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"]
    android:numColumns="3" />


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

View post on

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];
    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;
    4. In the onCreate we will create the GridView and fill the adapter with data
      [sourcecode language=”java”]
      protected void onCreate(Bundle savedInstanceState) {
      GridView gridView = (GridView) findViewById(;
      gridView.setAdapter(new ArrayAdapter<>(this, R.layout.grid_element,, person));}
    5. The output

      View post on

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;

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;

    public int getCount() {
        return img.length;

    public Object getItem(int position) {
        return position;

    public long getItemId(int position) {
        return position;

    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(;
        return convertView;

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=""

        android:src="@mipmap/ic_launcher" />

In your activity class java code

gridView.setAdapter(new GridAdapter(img));

The output will be shown as

View post on

Leave a Reply

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