GridView with a single textview in Android

GridView with a single textview – Tutorial

What is GridView?

GridView is a group of similar views represented in a 2D scrollable grid. In a gridview element you can have either textview, imageview or both.

At first we will be dealing with a single element in gridview. The number of columns to be shown in gridview can be fixed either through xml layout or java code.

GridView XML

[sourcecode language="java"]
<GridView
    android:id="@+id/gridView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="3" />

[/sourcecode]

In the layout editor preview you will see something like this below image

View post on imgur.com

As you see we have grid of 3 columns which will be repeated indefinitely with an automatic scroller.

For gridview we can make use of the same adapter which we used in the list view.

There are 2 types of adapter
1: ArrayAdapter which takes input as an array
2: CursorAdapter which exposes data from Cursor in SqliteDatabase

In this example we will be making use of ArrayAdapter

Android GridView 

    1. Create  a gridview in the activity XML as described above in this post.
    2. Create a string array of 100 items[sourcecode language=”java”]
      String[] person = new String[100];
      [/sourcecode]
    3. Lets fill this array with person names
      [sourcecode language=”java”]

      private void createItems() {
          for (int i = 0; i < person.length; i++) {
              int temp = i + 1;
              person[i] = "Person Name   " + temp;
          }
      }
      [/sourcecode]
    4. In the onCreate we will create the GridView and fill the adapter with data
      [sourcecode language=”java”]
      @Override
      protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      createItems();
      GridView gridView = (GridView) findViewById(R.id.gridView);
      gridView.setAdapter(new ArrayAdapter<>(this, R.layout.grid_element, R.id.label, person));}
      [/sourcecode]
    5. The output

      View post on imgur.com

Now lets put some images into the view

Create an integer array of 100 elements which hold reference to images we put in drawable folder,

[sourcecode language=”java”]

int[] img = new int[100];

Now lets set the images

private void createImages() {
    for (int i = 0; i < img.length; i++) {
        if (i % 4 == 0) {
            img[i] = R.mipmap.img1;
        }
        if (i % 4 == 1) {
            img[i] = R.mipmap.img2;
        }
        if (i % 4 == 2) {
            img[i] = R.mipmap.img3;
        }
        if (i % 4 == 3) {
            img[i] = R.mipmap.img4;
        }
    }
}[/sourcecode]

For showning images in GridView we will be making use of BaseAdapter. BaseAdapter is responsible for defining your custom
to either gridview or listview.
Create a new class GridAdapter which extends BaseAdapter as follows
[sourcecode language="java"]public class GridAdapter extends BaseAdapter {

    int[] img;

    public GridAdapter(int[] img) {
        this.img = img;
    }

    @Override
    public int getCount() {
        return img.length;
    }

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

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

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

        convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout.grid_element_image, null);
        ImageView icon = (ImageView) convertView.findViewById(R.id.gridViewImage);
        icon.setImageResource(img[position]);
        return convertView;
    }
}[/sourcecode]

Now we will create the grid_element_image.In the layout folder create new XML layout file and name it "grid_element_image"
[sourcecode language="java"]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <ImageView
        android:id="@+id/gridViewImage"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/ic_launcher" />
</LinearLayout>[/sourcecode]

In your activity class java code

createImages();
gridView.setAdapter(new GridAdapter(img));

The output will be shown as

View post on imgur.com

Leave a Reply

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