In this article, I will show you how to build your own custom list view. Below are my other articles on list view:
- ListView Layout
- Improve empty list view using ViewStub
- A working ListView Example
- Using LayoutInflator
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
