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

Advertisements

GridView example 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 add lists or arrays of custom objects to it and these objects are referenced using index and displayed in the TextView of GridView.

We set the ArrayAdapter to the GridView to display the items of array adapter in it .

The following example explains the usage of GridView using ArrayAdapter.

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

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=".AdapterActivity" >

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

</RelativeLayout>

Step 2:  Create the Activity and use the code mentioned below.

  • Create the ArrayAdapter and add a default layout grid style and string array of data to it.
  • Set GridView adapter as the ArrayAdapter.
  • You can set listeners on your grid view also.
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;

public class AdapterActivity extends Activity {
    GridView gridView;

    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"
            };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        gridView = (GridView) findViewById(R.id.grid_id);
        ArrayAdapter adapter = new ArrayAdapter(this,
                android.R.layout.simple_list_item_1, numbers);

        gridView.setAdapter(adapter);
        gridView.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v,
                int position, long id) {
               Toast.makeText(getApplicationContext(),
                ((TextView) v).getText(), Toast.LENGTH_SHORT).show();
            }
        });
    }

}

Screenshot:

gridview

You can also download the above GridView Example here.

Related Posts:

Custom Gridview Example 

Custom Listview Example 

Simple ListView Example