Android Customized GridView

By | October 3, 2012
In the Previous tutorial we have seen an example of Simple GridView , in this post we will see about how to customized the grid items in gridview .

Lets See An Example

Project Detail

Project Name CustomGrid
Package com.pavan.customgrid
Minimum SDK API 8
Target SDK API 17
Theme Holo Light with Dark Action Bar

1. XML Layout

file:-grid_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="150dp"
android:gravity="center"
android:numColumns="auto_fit"
android:padding="5dp"
android:stretchMode="columnWidth" >
</GridView>

file:-grid_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp"
android:orientation="vertical">

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_gravity="center"
android:textSize="20dp"
/>

<ImageView
android:id="@+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:src="@drawable/ic_launcher" />

</LinearLayout>

2. Activity

file:-Grid_activity.java

package com.pavan.customgrid;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;

public class Grid_activity extends Activity {
GridView gv;
String[] data = new String[] { "samsung", "lg", "htc", "moto" };

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.grid_activity);
gv = (GridView) findViewById(R.id.gridView1);
gv.setAdapter(new Custom_view(this));
}
public class Custom_view extends BaseAdapter {
Context ctx;
Custom_view(Context ctx) {
this.ctx = ctx;
}
public int getCount() {
return data.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {

View myview = convertView;
if (myview == null) {
LayoutInflater li = getLayoutInflater();
myview = li.inflate(R.layout.grid_item, null);
TextView tv = (TextView) myview.findViewById(R.id.textView1);
ImageView iv = (ImageView) myview.findViewById(R.id.imageView1);
if (data[position].equals("samsung")) {
tv.setText(data[position]);
iv.setImageResource(R.drawable.samsung);
} else if (data[position].equals("lg")) {
tv.setText(data[position]);
iv.setImageResource(R.drawable.lg);
} else if (data[position].equals("htc")) {
tv.setText(data[position]);
iv.setImageResource(R.drawable.htc);
} else if (data[position].equals("moto")) {
tv.setText(data[position]);
iv.setImageResource(R.drawable.moto);
}
}
return myview;
}
}
}

3. RUN

  • How do I include buttons in the gridview that open up another activity with a larger version of the same image when clicked?

  • Nice tutorial.can you tell me how to load bunch of images from server to grid layout and the most recent image must be loaded at top automatically whenever new images are added to server.

  • Anonymous

    hello,I have done all d way same as u did.but i am getting an error repeatedly.unfotunately,CustomGrid has stopped.I am using an AVD with API 14.kindly revert back asap