Android GridView Tutorial

GridView shows items in two-dimensional scrolling grid. We can use the GridView together with an ImageView to display a series of images. In this tutorial, we'll create a grid of image thumbnails. When an image is selected, a toast message will display the position of the image.

Here is our step by step tutorial-

1. Create a new project by going to File ⇒ New Android Project and fill required details. (I named my main activity as GridViewExample.java)

2. Prepare your images which you want to show in grid and place them in res/drawable folder.

3. Open your layout file or Create a new XML layout under layout folder and name it as grid_view.xml (Right Click) layout ⇒ New ⇒ Android XML File

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/gridview"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:numColumns="auto_fit"
     android:verticalSpacing="10dp"
     android:horizontalSpacing="10dp"
     android:columnWidth="90dp"
     android:stretchMode="columnWidth"
     android:gravity="center"/>

4. Now add the following code to GridViewExample.java file.

package com.sunil.gridview;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;

public class GridViewExample extends Activity {
   
    // Images to display
    Integer[] imageIDs={
            R.drawable.pic1,  R.drawable.pic2,
            R.drawable.pic3,  R.drawable.pic4,
            R.drawable.pic5,  R.drawable.pic6,
            R.drawable.pic7,  R.drawable.pic8,
            R.drawable.pic9,  R.drawable.pic10,
            R.drawable.pic11, R.drawable.pic12,
            R.drawable.pic13, R.drawable.pic14,
            R.drawable.pic15, R.drawable.pic16,
            R.drawable.pic17, R.drawable.pic18
    };
   
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.grid_view);
       
       
       GridView gridview = (GridView) findViewById(R.id.gridview);
       gridview.setAdapter(new ImageAdapter(this));
            
       gridview.setOnItemClickListener(new OnItemClickListener()
       {
           public void onItemClick(AdapterView<?> parent, View v, int position, long id)
           {
               Toast.makeText(getBaseContext(), "Pic "+(position+1)+
                              " selected", Toast.LENGTH_SHORT).show();
           }
       });
}
   

public class ImageAdapter extends BaseAdapter
{
    private Context context;
   
    public ImageAdapter(Context c)
    {
        context = c;
    }
   
   
   // Returns the number of images
    public int getCount(){
     return imageIDs.length;
    }
   
    // Returns the ID of an item
    public Object getItem(int position) {
        return position;
    }
   
    // Returns the ID of an item
    public long getItemId(int position){
        return position;
    }
   
    // Returns an ImageView View
    public View getView(int position, View convertView, ViewGroup parent){
        ImageView imageView;
        if(convertView == null){
            imageView = new ImageView(context);
            imageView.setLayoutParams(new GridView.LayoutParams(100,100));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(5, 5, 5, 5);
        }
        else{
            imageView = (ImageView) convertView;
        }
       
        imageView.setImageResource(imageIDs[position]);
        return imageView;
    }
   
    }
}

5. Run your project by pressing F11 key (Eclipse).

      

That's it ! For detail attribute exaplanation, see GridView reference.