Custom GridView example in Android

Hai to all now am going to share how to creat a custom 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.


res/layout/

Step 1 : 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"
     
      />

</RelativeLayout>

Step 2: grid_row.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>

Step 3 : MainActivity.java

package com.apc.gridSample.com;

import java.util.ArrayList;

import android.app.Activity;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.os.Bundle;

import android.widget.GridView;

import android.widget.Toast;

public class MainActivity extends Activity {

protected static final Toast text = null;

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 mediaIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.media);

Bitmap eventIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.event);

Bitmap regIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.reg);

Bitmap donateIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.donate);

Bitmap feedbackIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.feedback);

Bitmap photosIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.photos);

Bitmap videosIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.videos);

Bitmap careersIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.careers);

Bitmap contactIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.contact);

Bitmap fbIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.fb);

Bitmap twitterIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.twitter);

gridArray.add(new Item(homeIcon,"Home"));

gridArray.add(new Item(mediaIcon,"Media"));

gridArray.add(new Item(eventIcon,"Event"));

gridArray.add(new Item(regIcon,"Register"));

gridArray.add(new Item(donateIcon,"Donate"));

gridArray.add(new Item(feedbackIcon,"Feedback"));

gridArray.add(new Item(photosIcon,"Photos"));

gridArray.add(new Item(videosIcon,"Videos"));

gridArray.add(new Item(careersIcon,"Careers"));

gridArray.add(new Item(contactIcon,"Contact US"));

gridArray.add(new Item(fbIcon,"Facebook"));

gridArray.add(new Item(twitterIcon,"Twitter"));

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

customGridAdapter = new CustomGridViewAdapter(this, R.layout.grid_row, gridArray);

gridView.setAdapter(customGridAdapter);

}

}

Step 4 : Item.java

package com.apc.gridSample.com;

import android.graphics.Bitmap;

public class Item {

Bitmap image;

String title;

String text;

public Item(Bitmap image, String title) {

super();

this.image = image;

this.title = title;

}

public Bitmap getImage() {

return image;

}

public void setImage(Bitmap image) {

this.image = image;

}

public String getTitle() {

return title;

}

public void setTitle(String title) {

this.title = title;

}

}

Step 5:  CustomGridViewAdapter.Java

package com.apc.gridSample.com;

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;

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;

}

}

ScreenShot : 

Note : Please Place all appropriate images in drawable folder...

Source Code :     Click here to Download Source Code

Happy Programming ....

Cheers.....!!!!!!