Custom list view in android

ListView  is used for arranging items in a vertical and scrollable list. ListViews are commonly used to display a large set of similar data.

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

The simplest way to display a list view is using ArrayAdapter class . You can study how to create ListViews using array adapter 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 listView 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

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

    <ListView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/listView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        >
    </ListView>

</RelativeLayout>

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

list_view_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/list_item_image"
        android:layout_width="50px"
        android:layout_height="50px"
        android:layout_marginRight="10px"
        android:background="@drawable/ic_launcher" >
    </ImageView>

    <TextView
        android:id="@+id/list_item_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5px"
        android:text="@+id/label"
        android:textSize="15px" >

    </TextView>

</LinearLayout>

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

ImageAdapter.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 ImageAdapter extends BaseAdapter {
	private Context context;
	private final String[] StrValues;

	public ImageAdapter(Context context, String[] StrValues) {
		this.context = context;
		this.StrValues = StrValues;
	}

	// getView that displays the data at the specified position in the data set.
	public View getView(int position, View convertView, ViewGroup parent) {
		// create a new LayoutInflater
		LayoutInflater inflater = (LayoutInflater) context
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

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

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

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

		}

		return gridView;
	}

	// Total number of items contained within the adapter
	@Override
	public int getCount() {
		return StrValues.length;
	}

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

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

}

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

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

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {
	static final String[] StrValues = 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" };
	ListView listView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		listView = (ListView) findViewById(R.id.listView1);
		// setting adapter on listview
		listView.setAdapter(new ImageAdapter(this, StrValues));
		//setting on item click listener
		listView.setOnItemClickListener(new OnItemClickListener() {
			public void onItemClick(AdapterView<?> parent, View v,
					int position, long id) {//displaying toast
				Toast.makeText(
						getApplicationContext(),
						((TextView) v.findViewById(R.id.list_item_label))
								.getText(), Toast.LENGTH_SHORT).show();

			}
		});

	}
}

Screenshot:

custom Listview

Download

You can also download the above ListView Example here.

Related Posts:

Simple ListView in android

Simple GridView in android

Custom GridView in android

Advertisements