Grid View with Image and Label in Android

Step1.    Create a XML in Layout of type Linear Layout.

Step2. Paste  Following  Code for Image view and Label .

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”;




android:orientation=”vertical” >






android:src=”@drawable/demo” >









android:textSize=”10dp” >



you can also create own image view and label but in that case name of these should be same any where .(ex. java code).

Step3. Create a class file in src with name  “ImageAdapter” it will be shown in src as

Step 4. paste Following code in this file (

package com.example.looknfeel;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class ImageAdapter extends BaseAdapter {

private Context context;

private final String[] mobileValues;

public ImageAdapter(Context context, String[] mobileValues) {

this.context = context;

this.mobileValues = mobileValues;


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

LayoutInflater inflater = (LayoutInflater) context


View gridView;

if (convertView == null) {

gridView = new View(context);

// get layout from mobile.xml

gridView = inflater.inflate(, null);

// set value into textview

TextView textView = (TextView) gridView



// set image based on selected text

ImageView imageView = (ImageView) gridView


String mobile = mobileValues[position];


} else {

gridView = (View) convertView;


return gridView;



public int getCount() {

return mobileValues.length;



public Object getItem(int position) {

return null;



public long getItemId(int position) {

return 0;



*** Replace Package name with your package.

Step 5. create a Xml file of Grid Layout Type.

Step 6. Create a class with name FriendView . and paste following Code  .

package com.example.looknfeel;


import android.content.Context;

import android.content.Intent;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.View.OnFocusChangeListener;

import android.view.View.OnTouchListener;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.BaseAdapter;

import android.widget.Button;

import android.widget.GridView;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

public class FriendView extends Activity {

GridView grid_main;


protected void onCreate(Bundle savedInstanceState) {


setContentView(R.layout.friendview);// replace friend view by name of grid xml.

GridView gridView = (GridView) findViewById(;

final String[] MOBILE_OS = new String[] {

“Android”, “iOS”,”Windows”, “Blackberry” };

// gridView.setAdapter(new ImageAdapter(this,null));

gridView.setAdapter(new ImageAdapter(this, MOBILE_OS));

gridView.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView<?> parent, View v,

int position, long id) {

Intent move = new Intent(FriendView.this, FriendDetail.class);







Step 7. change the name of images with with are available in your drawable .

Hope your Grid View with image and label will be created .

ImageBest of Luck…….


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at

Up ↑

%d bloggers like this: