Android Custom Grid View Example | Image and Text in GridView in

Android | Gridview demo in Android

Hello Friends,
Today I am sharing very simple useful post "Custom Grid View in Android".
All the code are given below just copy paste and enjoy. You can download zip folder from github also...

EDIT:On Item Click Make Toast

MainActivity.java
package com.manish.customgridview;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.Toast;
/**
*
* @author manish.s
*
*/

public class MainActivity extends Activity {

GridView gridView;
ArrayList<Item> gridArray = new ArrayList<Item>();
CustomGridViewAdapter customGridAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//set grid view item

Bitmap homeIcon = BitmapFactory.decodeResource(this.getResources(),
R.drawable.home);
Bitmap userIcon = BitmapFactory.decodeResource(this.getResources(),
R.drawable.personal);

gridArray.add(new Item(homeIcon,"Home"));
gridArray.add(new Item(userIcon,"User"));
gridArray.add(new Item(homeIcon,"House"));
gridArray.add(new Item(userIcon,"Friend"));
gridArray.add(new Item(homeIcon,"Home"));
gridArray.add(new Item(userIcon,"Personal"));
gridArray.add(new Item(homeIcon,"Home"));
gridArray.add(new Item(userIcon,"User"));
gridArray.add(new Item(homeIcon,"Building"));
gridArray.add(new Item(userIcon,"User"));
gridArray.add(new Item(homeIcon,"Home"));
gridArray.add(new Item(userIcon,"xyz"));

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

customGridAdapter = new CustomGridViewAdapter(this, R.layout.row_grid,
gridArray);
gridView.setAdapter(customGridAdapter);

gridView.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View v, int position,
long arg3) {

Toast.makeText(getApplicationContext(),gridArray.get(position).getTitle(),
Toast.LENGTH_SHORT).show();

}
});
}
}
CustomGridViewAdapter.java
package com.manish.customgridview;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

/**
*
* @author manish.s
*
*/
public class CustomGridViewAdapter extends ArrayAdapter<Item> {
Context context;
int layoutResourceId;
ArrayList<Item> data = new ArrayList<Item>();

public CustomGridViewAdapter(Context context, int layoutResourceId,

ArrayList<Item> data) {
super(context, layoutResourceId, data);
this.layoutResourceId = layoutResourceId;
this.context = context;
this.data = data;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
RecordHolder holder = null;

if (row == null) {
LayoutInflater inflater = ((Activity) context).getLayoutInflater();
row = inflater.inflate(layoutResourceId, parent, false);

holder = new RecordHolder();

holder.txtTitle = (TextView) row.findViewById(R.id.item_text);
holder.imageItem = (ImageView) row.findViewById(R.id.item_image);
row.setTag(holder);
} else {
holder = (RecordHolder) row.getTag();
}

Item item = data.get(position);

 holder.txtTitle.setText(item.getTitle());
holder.imageItem.setImageBitmap(item.getImage());
return row;

static class RecordHolder {

TextView txtTitle;
ImageView imageItem;

}
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<GridView
android:id="@+id/gridView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:columnWidth="80dp"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth" >
</GridView>

</RelativeLayout>
row_grid.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp" >

<ImageView
android:id="@+id/item_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="10dp"
android:src="@drawable/home" >
</ImageView>
 <TextView
android:id="@+id/item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textSize="15sp" >
</TextView>

</LinearLayout>
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.manish.customgridview"
android:versionCode="1"
android:versionName="1.0" >

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

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.manish.customgridview.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>
</activity>
</application>

</manifest>

Download Zip Code

Read more: http://www.androidhub4you.com/2013/07/custom-grid-view-example-in-

android.html#ixzz47BHsdKyC