Manish Srivastava

About Manish Srivastava

I have been a mobile software consultant + developer(Java, J2ME, Android) for over 2 years. I have done enterprise level development for large and small companies alike. Around 2010,I started doing Development for my customers.

Android Custom Grid View Example with Image and Text

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…

Screenshot_2013-07-25-10-10-14

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.widget.GridView;
/**
 * 
 * @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);
 }

}

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
Thanks!
 

Related Whitepaper:

Rapid Android Development: Build Rich, Sensor-Based Applications with Processing

Create mobile apps for Android phones and tablets faster and more easily than you ever imagined

Use 'Processing', the free, award-winning, graphics-savvy language and development environment, to work with the touchscreens, hardware sensors, cameras, network transceivers, and other devices and software in the latest Android phones and tablets.

Get it Now!  

8 Responses to "Android Custom Grid View Example with Image and Text"

  1. sanjay shaw says:

    In customgridviewadapter.java,there is an error..i couldnt solve it..plzz help..its in the line no.50 and 51

  2. Gorets says:

    Hi Manish, I see you post and want to give you a little advice as you use ArrayAdapter you shouldn’t creating a new ArrayList data = new ArrayList(); all your Items storing in inner ArrayAdaper’ ArrayList and you can get it using getItem(position) method in adapter

  3. Parthiban says:

    Thanks a lot friend, Very useful for me

  4. Adlante says:

    Thank you! Only with your example could write need part my app.

  5. akshay says:

    Hello how to display these above grids dynamically from JSON link?? i mean to say if i got number 8 it should display 8 grid views only

  6. Gladness says:

    Thank you so much Manish. It is working perfectly.

  7. wasim says:

    hey Manish Srivastava,
    thanks for this android tutorial it really helps.
    but you know i want to show this grid vertically can you explain me how i can do that thing with your code. ?

  8. We have recently released a fully featured DataGridView for Andriod, We would be glad to hear your feedback http://www.androidjetpack.com/Home/AndroidDataGrid

Leave a Reply


2 + six =



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.

Sign up for our Newsletter

20,709 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books