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

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

4. Now add the following code to file.

package com.sunil.gridview;

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
    public void onCreate(Bundle savedInstanceState) {
       GridView gridview = (GridView) findViewById(;
       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.setPadding(5, 5, 5, 5);
            imageView = (ImageView) convertView;
        return imageView;

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

Android GridView       GridView Toast

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

Download Code

Be the first to comment

Post a Comment

Recent Posts

Site Stats

Our Apps

Get it on Google Play

©2012-2015 AndroidAspect - All rights reserved | Powered by Blogger

Creative Commons License