Adding Textview inside GridView using Adapters | Androidmonks

Adding Textview inside GridView using Adapters

This is a quick implementation to show how you can use a TextView inside a GridView. There always needn’t be a Button.

The objective here is to create a 2×2 Grid and add Textviews inside. Check the code below.

YOU ARE YOUR BOSS
I agree to have my personal information transfered to MailChimp ( more information )
Join over 5.000 visitors who are receiving our free content and learn how to program with Android. The growth of Android is estimated to reach a whooping 83% by 2020. Hop on the train and start making money!
We hate spam. Your email address will not be sold or shared with anyone else.
Create your layout.xml

You have to create your layout.xml by including the GridView. Create a GridView with numColumns = 2. Check the code below.

<GridView
    android:layout_marginTop="15dp"
    android:id="@+id/grid_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnWidth="60dp"
    android:gravity="center"
    android:horizontalSpacing="5dp"
    android:numColumns="2"
    android:stretchMode="columnWidth"
    android:verticalSpacing="5dp" />

Wrap this around with a LinearLayout and your layout.xml will look like this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradiant"
    >
    <GridView
        android:layout_marginTop="15dp"
        android:id="@+id/grid_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:columnWidth="60dp"
        android:gravity="center"
        android:horizontalSpacing="5dp"
        android:numColumns="2"
        android:stretchMode="columnWidth"
        android:verticalSpacing="5dp" />
</LinearLayout>
Creating our TextView.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/grid_item_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@+id/label"
        android:background="@drawable/ic_launcher_background"
        android:layout_marginTop="5px"
        android:textSize="20dp"
        android:textColor="#fff"
        android:gravity="center"
        android:shadowRadius="45">
    </TextView>
</LinearLayout>

Here, our label is the id we have given it, so that it will be easy to pull the text from the textview, however, you also have to know, setting a value to the textview has to come from a list of values!

We will be achieving that by create a list of values and passing it to the Adapter we are going to create below.

Time to create our Adapter

This is where we will be creating our adapter, it is important to note that, you should know how adapters work. If you dont, check here. Once you have the adapter to be created, note that we are going to extend the BaseAdapter class.

textViewValues is our List of values which we will be using to set the value inside the TextView.

Check the implementation below.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.monks.android.justmultiply.R;

import java.util.List;

public class TextViewAdapter extends BaseAdapter {
    private Context context;
    private final List<Integer> textViewValues;

    public TextViewAdapter(Context context, List<Integer> textViewValues) {
        this.context = context;
        this.textViewValues = textViewValues;
    }

    public View getView(int position, View convertView, ViewGroup parent) {

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View gridView;

        if (convertView == null) {

            gridView = new View(context);

            // get layout from mobile.xml
            gridView = inflater.inflate(R.layout.textview_gamebutton, null);

            // set value into textview
            TextView textView = (TextView) gridView
                    .findViewById(R.id.grid_item_label);
            textView.setText(String.valueOf(textViewValues.get(position)));
        } else {
            gridView = (View) convertView;
        }

        return gridView;
    }

    @Override
    public int getCount() {
        return textViewValues.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

}

We additionally have a textview that we need to inflate. Use the textview we created above with the name textview_gamebutton (or whatever you want to, be sure to change it in the adapter also!).

Creating our MainActivity.java

So far so good. We additionally have to create a MainActivity.java that we will be using to stitch together our XML and Adapter.

MainActivity will be responsible for passing the Values we need to set inside the TextView that are now part of the GridView.

Check the below code for clearer understanding.

List<Integer> values;
GridView gridview;

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.game_layout);
values = new ArrayList<>();
values.add(6);
values.add(7);
values.add(8);
values.add(4);
gridview = findViewById(R.id.grid_view);
gridview.setAdapter(new TextViewAdapter(this,values));
}
Job Done!

Drop in any comments you have below. The grid view will now hold 2×2 elements in a box.

Sample Output
Sample Output

“Learn and Be Curious”

Also Read  Flutter Appbar with Example | Androidmonks

Leave a Comment

Your email address will not be published. Required fields are marked *