Android Grid View

GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.

In this tutorial, We'll create a grid of image thumbnails. When an image  is clicked, a new screen  will display  full image. I am showing the Grid View Output in Emulator.

we are going to create a new Android Project in Eclipse. Click on File Menu and Select a new Android project named it as androidGridView . Now Follow the Following Procedure to show GridView inandroid.

1. Put Image in Drawable Folder   Inside your project Folder there is drawable folder. Put the image you want to show as Grid and when User click it the same image Open in Full screen.

2. Inside layout folder create two xml file  inside your project there is a folder named as layout folder. inside that folder create two new xml file named as full_image.xml and grid_layout.xml. now put   the following code inside grid_layout.xml

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

</GridView>

and following code inside full_image.xml

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

<ImageView android:id="@+id/full_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/hello_world"/>

</LinearLayout>

3 .Now create following class inside src folder

Now right click on src folder and create following class.

ImageGridActivity, ImageAdapter and FullImageActivity

Now put the following code in ImageGridActivity
public class ImageGridActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.grid_layout);

GridView gridView = (GridView) findViewById(R.id.grid_view);

// Instance of ImageAdapter Class
gridView.setAdapter(new ImageAdapter(this));

gridView.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView<?> arg0, View arg1, int position,
long arg3) {
// TODO Auto-generated method stub
// Sending image id to FullScreenActivity
Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
// passing array index
i.putExtra("id", position);
startActivity(i);

}

});

Same way Now put Following code inside ImageAdapter class

public class ImageAdapter extends BaseAdapter{

private Context mContext;

// Keep all Images in array
public Integer[] mThumbIds = {
R.drawable.pic_1, R.drawable.pic_2,
R.drawable.pic_3, R.drawable.pic_4,
R.drawable.pic_5, R.drawable.pic_6,
R.drawable.pic_7, R.drawable.pic_8,
R.drawable.pic_9, R.drawable.pic_10,
R.drawable.pic_12,R.drawable.pic_14
};

// Constructor
public ImageAdapter(Context c){
mContext = c;
}

public int getCount() {
// TODO Auto-generated method stub
return mThumbIds.length;
}

public Object getItem(int position) {
// TODO Auto-generated method stub
return mThumbIds[position];
}

public long getItemId(int arg0) {
// TODO Auto-generated method stub
return 0;
}

public View getView(int position, View arg1, ViewGroup arg2) {
// TODO Auto-generated method stub
ImageView imageView = new ImageView(mContext);
imageView.setImageResource(mThumbIds[position]);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new GridView.LayoutParams(70, 70));

return imageView;
}

}

Finally in FullImageActivity class put the following code. 

public class FullImageActivity extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.full_image);

// get intent data
Intent i = getIntent();

// Selected image id
int position = i.getExtras().getInt("id");
ImageAdapter imageAdapter = new ImageAdapter(this);
ImageView imageView = (ImageView)findViewById(R.id.full_image_view);
imageView.setImageResource(imageAdapter.mThumbIds[position]);

}
}

4 Now Final Step Android Manifest.xml File

Finally your Android Manifestfile looks like following way..

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.sks.kindle"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="15" />

<application
android:icon="@drawable/android"
android:label="@string/app_name" >
<activity
android:name=".ImageGridActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<!-- FullImageActivity -->
<activity android:name=".FullImageActivity"></activity>
</application>

</manifest>

Now You have done all coding part now run your project and Get your Grid View.

Note Put all 11  png image  in Drawable folder named like pic_1.png,