GridView in Android.

GridView 

The GridView shows items in a two-dimensional scrolling grid. You can use the GridView together with an ImageView to display a series of images.
The following example demonstrates how.

1 . Using Eclipse, create a new Android project and name it Grid. 

2 . Drag and drop a series of images into the res/drawable-mdpi folder. When a dialog is displayed, check the copy option and click OK.

3 . Populate the main.xml file with the following content: 

<?xml​ version=”1.0”​encoding=”utf-8”?>
<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 . Add the following statements in bold to the MainActivity.java file: 

package com.emergingandroidtech.Grid;

import android.app.Activity;
import android.os.Bundle;

import android.content.Context;
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 MainActivity extends Activity {
    //---the 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                   
    };

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        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;
        }

        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(185, 185));
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                imageView.setPadding(5, 5, 5, 5);
            } else {
                imageView = (ImageView) convertView;
            }
            imageView.setImageResource(imageIDs[position]);
            return imageView;
        }
    }   
}

5 . It shows the GridView displaying all the images.

How It Works 

Like the Gallery and ImageSwitcher example, you implement the ImageAdapter class and then bind it to the GridView:

​​​​​​​​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(); ​​​​​​​​​​​​} ​​​​​​​​
});

When an image is selected, you display a Toast message indicating the image selected. Within the GridView, you can specify the size of the images and how images are spaced out in the GridView by setting the padding for each image:

​​​​​​​​//---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(85, 85));
​​​​​​​​​​​​​​​​imageView.setScaleType( ​​​​​​​​​​​​​​​​​​​​ImageView.ScaleType.CENTER_CROP);
​​​​​​​​​​​​​​​​imageView.setPadding(5, 5, 5, 5); ​​​​​​​​​​​​
}
​else
​{
 ​​​​​​​​​​​​​​​​imageView​=​(ImageView)​convertView; ​​​​​​​​​​​​
}
​​​​​​​​​​​​imageView.setImageResource(imageIDs[position]); ​​​​​​​​​​​​
return ​imageView;
​​​​​​​​}