Image GridView

GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter.

In this tutorial, we show you how to create an image Gridview.

Copy some images into your project's drawable folder.

File : res/layout/activity_gridview.xml

<?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:columnWidth="120dip"

    android:gravity="center"

    android:horizontalSpacing="2dp"

    android:numColumns="3"

    android:padding="10dp"

    android:stretchMode="columnWidth"

    android:verticalSpacing="2dp" >

</GridView>

File : Gridview_Activity.java

package com.mindmedia.gridview;

import android.os.Bundle;

import android.app.Activity;

import android.content.Context;

import android.view.Menu;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.GridView;

import android.widget.ImageView;

public class Gridview_Activity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_gridview);

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

// Instance of ImageAdapter Class

gridView.setAdapter(new ImageAdapter(this));

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.activity_gridview, menu);

return true;

}

public class ImageAdapter extends BaseAdapter {

private Context mContext;

// Keep all Images in array

public Integer[] mThumbIds = { R.drawable.pic1, R.drawable.pic2,

R.drawable.pic3, R.drawable.pic4, R.drawable.pic6,

R.drawable.pic7, R.drawable.pic8, R.drawable.pic9,

R.drawable.pic10, R.drawable.pic11, R.drawable.pic12,

R.drawable.pic13 };

// Constructor

public ImageAdapter(Context c) {

mContext = c;

}

@Override

public int getCount() {

return mThumbIds.length;

}

@Override

public Object getItem(int position) {

return mThumbIds[position];

}

@Override

public long getItemId(int position) {

return 0;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ImageView imageView = new ImageView(mContext);

imageView.setImageResource(mThumbIds[position]);

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

imageView.setLayoutParams(new GridView.LayoutParams(160, 160));

return imageView;

}

}

}

Output :