CustomGridView

GridView is used to display data in two dimension. In this tutorial we are going to show you how to implement custom GridView in Android with Images and Text. Creating a custom GridView with Text and Image is as easy as Using a Simple GridView. We need to just have a custom adapter and populate the GridView elements with custom adapter. It is similar to populating a ListView with Custom Adapter.

1. GridViewExample.java

package com.tutorialsee.customgridview;

import com.tutorialsee.customgridview.R;
import com.tutorialsee.customgridview.adapter.CustomGridAdapter;
import android.app.Activity;
import android.os.Bundle;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.AdapterView.OnItemClickListener;

public class GridViewExample extends Activity {

GridView gridView;
static final String[] GRID_DATA = new String[] { "Windows" ,"iOS", "Android" ,"Blackberry","Java" ,
"JQuery", "Phonegap" ,"SQLite","Thread" ,"Video"};

@Override
public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.grid_view_android_example);

gridView = (GridView) findViewById(R.id.gridView1);
gridView.setAdapter(new CustomGridAdapter(this, GRID_DATA));

gridView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,int position, long id) {

Toast.makeText(getApplicationContext(),((TextView) v.findViewById(R.id.grid_item_label))
.getText(), Toast.LENGTH_SHORT).show();

}
});
}
}

2. CustomGridAdapter.java

package com.tutorialsee.customgridview.adapter;

import com.tutorialsee.customgridview.R;
import android.annotation.SuppressLint;
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;


@SuppressLint("InflateParams") public class CustomGridAdapter extends BaseAdapter {

private Context context;
private final String[] gridValues;

//Constructor to initialize values
public CustomGridAdapter(Context context, String[] gridValues) {
this.context = context;
this.gridValues = gridValues;
}

@Override
public int getCount() {
// Number of times getView method call depends upon gridValues.length
return gridValues.length;
}

@Override
public Object getItem(int position) {
return null;
}

@Override
public long getItemId(int position) {
return 0;
}

// Number of times getView method call depends upon gridValues.length
public View getView(int position, View convertView, ViewGroup parent) {

//LayoutInflator to call external grid_item.xml file

LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View gridView;
if (convertView == null) {
gridView = new View(context);
// get layout from grid_item.xml
gridView = inflater.inflate(R.layout.grid_item, null);
// set value into textview
TextView textView = (TextView) gridView.findViewById(R.id.grid_item_label);
textView.setText(gridValues[position]);
// set image based on selected text
ImageView imageView = (ImageView) gridView.findViewById(R.id.grid_item_image);

String mobile = gridValues[position];
if (mobile.equals("WindowsPhone")) {

imageView.setImageResource(R.drawable.windows_logo);

} else if (mobile.equals("iOSPhone")) {

imageView.setImageResource(R.drawable.ios_logo);

} else if (mobile.equals("BlackberryPhone")) {

imageView.setImageResource(R.drawable.blackberry_logo);

} else {

imageView.setImageResource(R.drawable.android_logo);
}

} else {
gridView = (View) convertView;
}

return gridView;
}
}

3. grid_item.xml

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

    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:contentDescription="@drawable/android_logo"
        android:src="@drawable/android_logo" >
    </ImageView>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/grid_item_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:text=""
            android:textColor="@android:color/white"
            android:textSize="15sp" >
        </TextView>

        <TextView
            android:id="@+id/grid_item_label_static"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/text"
            android:textColor="@android:color/white"
            android:textSize="17sp" />
    </LinearLayout>

</LinearLayout>

4. grid_view_android_example.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="@android:color/black" >

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

</LinearLayout>