Android GridView Example

In this android tutorial you will learn about android simple and custom gridview example.

In Android, GridView is a ViewGroup that is used to display items in a two dimensional scrollable grid form. You might have seen image gallery in Android mobiles, it is created using GridView layout.

Here we will see two examples, one is simple GridView layout with some text and another is custom GridView layout with image and text.

Android GridView Example

Android Simple GridView Example

Make an android project with package name com.gridviewexample and add following code in respective files.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/simpleGrid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="100dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

MainActivity.java

package com.gridviewexample;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.Toast;


public class MainActivity extends Activity {
    GridView grid;
    String items[]={"Apple","Banana","Orange","Mango","Papaya","Watermelon","Grapes","Muskmelon","Pineapple"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        grid = (GridView)findViewById(R.id.simpleGrid);
        ArrayAdapter adapter = new ArrayAdapter(this,android.R.layout.simple_list_item_1,items);
        grid.setAdapter(adapter);

        grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(getApplicationContext(),items[position],Toast.LENGTH_LONG).show();
            }
        });
    }
}

Output

Android Custom GridView Example

Make an android project with package name com.gridviewexample and add following code in respective files.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/simpleGrid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="100dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

custom_gridview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/item_image"
        android:layout_width="100px"
        android:layout_height="100px"/>

    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5px"
        android:textSize="15px" >
    </TextView>

</LinearLayout>

MainActivity.java

package com.gridviewexample;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;


public class MainActivity extends Activity {
    GridView grid;
    String text[] = {"Apple","Banana","Orange","Mango","Papaya","Watermelon","Grapes","Muskmelon","Pineapple"};
    int image[] = {R.drawable.apple,R.drawable.banana,R.drawable.orange,R.drawable.mango,R.drawable.papaya,R.drawable.watermelon,R.drawable.grapes,R.drawable.muskmelon,R.drawable.pineapple};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        grid = (GridView)findViewById(R.id.simpleGrid);
        grid.setAdapter(new ImageAdapter(this,image,text));

        grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(getApplicationContext(),text[position],Toast.LENGTH_LONG).show();
            }
        });
    }
}

ImageAdapter.java

package com.gridviewexample;

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;

public class ImageAdapter extends BaseAdapter {
    private Context context;
    private final int item_image[];
    private final String item_text[];

    public ImageAdapter(Context context, int item_image[], String[] item_text) {
        this.context = context;
        this.item_image = item_image;
        this.item_text = item_text;
    }

    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 custom_gridview.xml
            gridView = inflater.inflate(R.layout.custom_gridview, null);

            // set value into imageview
            ImageView image = (ImageView) gridView.findViewById(R.id.item_image);
            image.setImageResource(item_image[position]);

            // set value into textview
            TextView text = (TextView) gridView.findViewById(R.id.item_text);
            text.setText(item_text[position]);
        } else {
            gridView = (View) convertView;
        }

        return gridView;
    }

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

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

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

Output

When you will click on any item, its name will be displayed in a toast.

Comment below if you have any queries related to above android gridview example.