Custom GridView Android

GridView is used to display items in a two-dimensional, scrollable grid form. The grid items are automatically inserted to the layout using a Adapter.

For example,  displaying grid of icons. Item is represented by a single item view. This pattern is quite handy as it shows several icons on screen at the same time. Its helps displaying grids of data in a very simple and scrollable grid manner.

The simplest way to display a grid view is using ArrayAdapter class . You can find the gridview arrayadapter example here.

We can also create our own custom adapters using BaseAdapter class. Custom Adapters are way better than array adapters, they give you more control over the list/grid view content and UI .Here we inflate each row of GridView using a layout.

The following example explains the usage of ListView using a custom adapter.

Step1: Create the xml for the activity which contains a ListView

 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"
tools:context=".GridViewActivity" >

<GridView
android:id="@+id/grid_id"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="3" >
</GridView>

</RelativeLayout>

Step 2: Create a custom layout for each row of the Grid View.

 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:orientation="vertical" >

    <ImageView
        android:id="@+id/imgView_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"/>

    <TextView
        android:id="@+id/textView_id"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" />

</LinearLayout>

Step 3: Create a custom adapter in the following way .

GridAdapter.java 

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class GridAdapter extends BaseAdapter {

	String[] textArray;
	Context contxt;

	public GridAdapter(String[] textArr, Context context) {
		textArray = textArr;
		contxt=context;
	}

	@Override
	public int getCount() {

		return textArray.length;
	}

	@Override
	public Object getItem(int arg0) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public long getItemId(int arg0) {
		// TODO Auto-generated method stub
		return 0;
	}

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

		// create a new LayoutInflater
		LayoutInflater inflater = (LayoutInflater) contxt
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

		View gridView;
		gridView = null;
		convertView = null;// avoids recycling of grid view
		if (convertView == null) {

			gridView = new View(contxt);
			// inflating grid view item
			gridView = inflater.inflate(R.layout.grid_item, null);

			// set value into textview
			TextView textView = (TextView) gridView
					.findViewById(R.id.textView_id);
			textView.setText(textArray[position]);

		}

		return gridView;
	}

}

Step 4: Create the Activity and implement custom adapter in the activity using the code mentioned below.

  • Create  GridAdapter type adapter .
  • Set GridView adapter as this custom adapter.
  • You can set listeners on your list view also.

GridViewActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;

import com.example.customgridviewexample.R;

public class GridViewActivity extends Activity {
	static final String[] numbers = new String[] { "one", "two", "three",
			"four", "five", "six", "seven", "eight", "nine", "ten", "eleven",
			"twelve", "thirteen", "fourteen", "fifteen", "sixteen",
			"seventeen", "eighteen", "nineteen", "twenty", "twenty one",
			"twenty two" };
	GridView gridView;
	GridAdapter adapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		gridView = (GridView) findViewById(R.id.grid_id);
		adapter=new  GridAdapter(numbers, this);
		gridView.setAdapter(adapter);

	}

}

 

Screenshot:

customgrid

Download

You can also download the above ListView Example here.

Related Posts:

GridView Array Adapter Example

ListView ArrayAdapter Example

Custom ListView Examle