Customized List View

In this article, I will show you how to build your own custom list view. Below are my other articles on list view:

We will be building a contact list view in this example. The first step we need to do is create a custom array adapter.

Steps in building custom ListView

You need the below mentioned to create your own list view:

List View Layout
Custom List Item View Layout
Custom Adapter
ListView Activity class

In this example, we will build a list of our favorite cartoon characters. We will keep the model class simple. It will contain the name of the character, a thumbnail picture and a bit of description about the character.

List View layout

We have two different layouts to deal with. One is the list view itself and the other is each item in the list. Below XML file describes the layout of each item:
Below XML is the layout of list view.

cartoon_list_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/taskListParent"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </ListView>

</LinearLayout>

Custom List Item View Layout

Below XML is the layout of list item view.

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

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

        <ImageView
            android:id="@+id/cartoon_pic"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_marginRight="6dip" 
            android:layout_weight="0"/>

        <TextView
            android:id="@+id/about_cartoon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/name"
            android:layout_weight="1"/>

    </LinearLayout>

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/name" />

</LinearLayout>

Custom ArrayAdapter

Our adapter will extend the ArrayAdapter class and override its getView() method in order to provide a custom list View. We will inflate our list item view layout and populate the content based on the row position and the model. We will find each widget using the findViewById() method, cast it to specific the widget type and then set its content.

CartoonListAdapter:

package com.jopc.sandbox;

import java.util.List;

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

public class CartoonListAdapter extends ArrayAdapter{
	private List cartoonItems;
	private Context context;

	
	public CartoonListAdapter(Context context, int textViewResourceId, List cartoonItems) {
		super(context, textViewResourceId, cartoonItems);
		this.context = context;
		this.cartoonItems = cartoonItems;
	}
    
	@Override
    public View getView(int position, View convertView, ViewGroup parent) {
  
        View view = convertView;
        if (view == null) {
            LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = vi.inflate(R.layout.contact_list_item_view, parent, true);
        }
        
        Cartoon cartoon = cartoonItems.get(position);
        
        if (cartoon != null) {            
            // name
            TextView nameTextView = (TextView) view.findViewById(R.id.name);
            nameTextView.setText(cartoon.getName());                       
            
            // thumb image
            ImageView imageView = (ImageView) view.findViewById(R.id.cartoon_pic);
            imageView.setImageResource(cartoon.getPicRes());                       
        }
        
        return view;        
    }
}

ListActivity class

Our list activity class CartoonListActivity will extend ListActivity. In its onCreate(), we call setContentView to set the layout to the list view. We then build our model, the cutsom adapter based on it and call setListAdapter to set the custom adapter.

CartoonListActivity:

package com.jopc.sandbox;

import java.util.ArrayList;
import java.util.List;

import android.app.ListActivity;
import android.os.Bundle;

public class CartoonListActivity extends ListActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.cartoon_list_view);
		List cartoonList = new ArrayList();
		cartoonList
				.add(new Cartoon(
						"Tintin",
						R.drawable.tintin_thumb,
						"Tintin is a fictional character in The Adventures of Tintin, the comics series by Belgian cartoonist Hergé."));
		cartoonList
				.add(new Cartoon(
						"Snowy",
						R.drawable.snowy_thumb,
						"Snowy is a white wire fox terrier who is a companion to Tintin, the series' protagonist. Snowy is a central character in all Tintin stories"));
		cartoonList
				.add(new Cartoon(
						"Obelix",
						R.drawable.obelix_thumb,
						"Obelix is a cartoon character from the French comic book series Asterix. He works as a menhir sculptor and deliveryman, and is Asterix's best friend. Obelix is noted for his fatness, the menhirs he carries around on his back and his superhuman strength"));
		cartoonList
				.add(new Cartoon(
						"Asterix",
						R.drawable.asterix_thumb,
						"Asterix is a fictional character, the titular hero of the French comic book series The Adventures of Asterix. The series portrays him as a diminutive but fearless Gaulish warrior living in the time of Julius Caesar's Gallic Wars"));
		setListAdapter(new CartoonListAdapter(this,
				R.layout.cartoon_list_item_view, cartoonList));
	}
}

Here is the final look out the custom list view.

Download the Source Code

You can download the source code here: sandboxCustomList.zip