Custom ListView in Android Tutorial

Now, we shall look at creating a custom list view – a custom layout, a custom row layout and how we bind the custom data holder to these layouts. (please see the earlier article on simple list view for the fundamentals of list view).

So, here again, we start with extending ListActivity.

public class MyCustomListView extends ListActivity {

Now let us create the custom list view in an xml file – custom_list_view.xml. This will be set using the setContentView() in onCreate() method:

    <ListView android:id="@id/android:list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#000fff"
    android:layout_weight="2"
    android:drawSelectorOnTop="false">
    </ListView>
    <TextView android:id="@id/android:empty"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFff00"
    android:text="No data"
    />

Note that it must contain a ListView object with android:id="@id/android:list"

I have also declared a TextView which should be whon when the list if empty by declaring with android:id="@id/android:empty"

Now we will declare how each row in this ListView should be displayed by creating a new xml file – custom_row_view.xml

I plan to have 3 items one below the other in each row. So, here is the declaration for the same:

    <TextView android:id="@+id/text1"
    android:textSize="16sp"
    android:textStyle="bold"
    android:textColor="#FFFF00"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>
    <TextView android:id="@+id/text2"
    android:textSize="12sp"
    android:textStyle="bold"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"/>
    <TextView android:id="@+id/text3"
    android:typeface="sans"
    android:textSize="14sp"
    android:textStyle="italic"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

So, now, how do I tie all of this together? The MyCustomListView class, the listview layout and the row layout. Just like in the earlier example, we need a ListAdpater object. Here I plan to use a SimpleAdpater provided by the SDK.

An adapter expects the context, the layout and the handle to the data that needs to be displayed. So, let us create a list of data in an ArrayList of HashMaps. This way, the HashMap can store any amount of data.

    static final ArrayList<HashMap<String,String>> list =

    new ArrayList<HashMap<String,String>>();

This is just a declaration of the list object. We need to populate it with data. Our custom row layout expects each row to have 3 prices of data…

This list is populated in a method as shown below with the 3 keys as ‘pen’, ‘price’ and ‘color’:

private void populateList() {

    HashMap<String,String>  temp = new HashMap<String,String>();
    temp.put("pen","MONT Blanc");
    temp.put("price", "200.00$");
    temp.put("color", "Silver, Grey, Black");
    list.add(temp);
    HashMap<String,String> temp1 = new HashMap<String,String>();
    temp1.put("pen","Gucci");
    temp1.put("price", "300.00$");
    temp1.put("color", "Gold, Red");
    list.add(temp1);
    HashMap<String,String> temp2 = new HashMap<String,String>();
    temp2.put("pen","Parker");
    temp2.put("price", "400.00$");
    temp2.put("color", "Gold, Blue");
    list.add(temp2);
    HashMap<String,String> temp3 = new HashMap<String,String>();
    temp3.put("pen","Sailor");
    temp3.put("price", "500.00$");
    temp3.put("color", "Silver");
    list.add(temp3);
    HashMap<String,String> temp4 = new HashMap<String,String>();
    temp4.put("pen","Porsche Design");
    temp4.put("price", "600.00$");
    temp4.put("color", "Silver, Grey, Red");
    list.add(temp4);
    }

So, now how do we tie up the data with the row layout and the listview layout. It is in this simple piece of code in the onCreate() method of MyCustomListView class:

    setContentView(R.layout.custom_list_view);

    SimpleAdapter adapter = new SimpleAdapter(
    this,
    list,
    R.layout.custom_row_view,
    new String[] {"pen","price","color"},
    new int[] {R.id.text1,R.id.text2, R.id.text3}

    );

    populateList();


    setListAdapter(adapter);

Here we have set the default view to custom_list_view.
Then, using the SimpleAdapter, we have set the context, the list containing the data for display, the custom_row_view, the keys by which the data has to be fetched from the list, the TextViews into which the corresponding data has to be displayed.

Now execute and you will have a custom list view. Here is what you will get to see:


NOTE: if you do not populate the list with any data, you will see another view – the empty listview that we have defined in the custom_list_view.xml

You can download the complete source code for this example here.

Added later:
Based on a question below, I would like to add that an item can be clicked even in this custom list and the even captured by overriding the onListItemClick() method on the ListActivity class.

Here is the piece of code you can add to my sample, if you haev downlaoded and ti will toast a message on what has been selected:

protected void onListItemClick(ListView l, View v, int position, long id) {

    super.onListItemClick(l, v, position, id);
    Object o = this.getListAdapter().getItem(position);
    String pen = o.toString();
    Toast.makeText(this, "You have chosen the pen: " + " " + pen, Toast.LENGTH_LONG).show();
}

Enjoy....