Android Custom ListView Items “Row”

android-custom-listviewArrayAdapter, the bridge between a ListView and the data to be displayed, expects that the provided resource id references a single TextView. To use something other than single TextView for the array display, for instance, two TextView below each other, override getView(int, View, ViewGroup) to return the type of view you want.

 

Objectives:

  • How to create ListView with custom View for list items “row”?
  • How to create ListView for an activity class extending ListActivity or Activity?

Environment & Tools:

  • Android Developer Tools (ADT) (or Eclipse + ADT plugin)
  • AVD Nexus S Android 4.3 “emulator” or,
  • Min SDK 8

( 1 ) Define the Layout for ListView Items

We need to build the custom layout for the ListView items “rows” to be two TextView below each other “two lines” title and description.

  • res/layout/row.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
     >

    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:paddingLeft="5dp"
        android:textColor="@color/Black">
    </TextView>

     <TextView
        android:id="@+id/value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/label"
        android:textSize="12sp" 
        android:paddingLeft="5dp"
        android:textColor="@color/LightSkyBlue"
        >
    </TextView>

</RelativeLayout>

( 2 ) Item.java Data Bean

This class is just a sample class showing how to pass objects as data source.

  • src/com/hmkcode/android/Items.java
package com.hmkcode.android;

public class Item {

	private String title;
	private String description;

	public Item(String title, String description) {
		super();
		this.title = title;
		this.description = description;
	}
	// getters and setters...	
}

( 3 ) Extend ArrayAdapter

The main step in creating custom ListView is extending the Adapter and overriding the getView() method.

  • src/com/hmkcode/android/MyAdapter.java
  • Provide a constructor with parameters to be passed to the super class. From our activity class we will pass the context “this” and data source ArrayList<Item>.
  • Override getView()
  • We need to inflate our custom layout “row.xml” to get a reference to the view “row view”.
  • Once we get reference to row view we can access to its individual views in our case the two TextView.
  • Set the text for the two TextView get the data from the passed ArrayList<Item>.
  • Return the rowView.
package com.hmkcode.android;

import java.util.ArrayList;

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

public class MyAdapter extends ArrayAdapter<Item> {

		private final Context context;
		private final ArrayList<Item> itemsArrayList;

		public MyAdapter(Context context, ArrayList<Item> itemsArrayList) {

			super(context, R.layout.row, itemsArrayList);

			this.context = context;
			this.itemsArrayList = itemsArrayList;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {

			// 1. Create inflater 
			LayoutInflater inflater = (LayoutInflater) context
		        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

			// 2. Get rowView from inflater
			View rowView = inflater.inflate(R.layout.row, parent, false);

			// 3. Get the two text view from the rowView
			TextView labelView = (TextView) rowView.findViewById(R.id.label);
		    TextView valueView = (TextView) rowView.findViewById(R.id.value);

		    // 4. Set the text for textView 
		    labelView.setText(itemsArrayList.get(position).getTitle());
		    valueView.setText(itemsArrayList.get(position).getDescription());

		    // 5. retrn rowView
		    return rowView;
		}
}

( 4 ) Extend ListActivity

For the activity class we need to extend ListActivity class to view the ListView.

  • src/com/hmkcode/MainActivity.java
  • Extends ListActivityListActivity has a built-in ListView
  • Create ArrayAdapter “MyAdapter” pass context “this” and ArrayList<Item>
  • SetListAdapter(MyAdapter)
package com.hmkcode.android;

import java.util.ArrayList;
import android.os.Bundle;
import android.app.ListActivity;

public class MainActivity extends ListActivity {

	public void onCreate(Bundle icicle) {
		super.onCreate(icicle);

		// 1. pass context and data to the custom adapter
		MyAdapter adapter = new MyAdapter(this, generateData());

		//2. setListAdapter
		setListAdapter(adapter);
	}

	private ArrayList<Item> generateData(){
		ArrayList<Item> items = new ArrayList<Item>();
	    items.add(new Item("Item 1","First Item on the list"));
	    items.add(new Item("Item 2","Second Item on the list"));
	    items.add(new Item("Item 3","Third Item on the list"));

	    return items;
	}

}

( 5 ) Alternatively, Extend Activity

This step is alternative for step ( 4 )

We still can extend the regular Activity class but we need to add one more step. We need to define a layout with a ListView element.

  • res/layout/activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity" 
    >

    <ListView
 	   android:id="@+id/listview"
  	   android:layout_width="fill_parent"
  	   android:layout_height="wrap_content"
  	   /> 

</RelativeLayout>
  • src/com/hmkcode/android/MainActivity.java
package com.hmkcode.android;

import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

public class MainActivity extends Activity {

    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.activity_main);

        // 1. pass context and data to the custom adapter
        MyAdapter adapter = new MyAdapter(this, generateData());

        // 2. Get ListView from activity_main.xml
        ListView listView = (ListView) findViewById(R.id.listview);

        // 3. setListAdapter
        listView.setAdapter(adapter);
    }

    private ArrayList<Item> generateData(){
        ArrayList<Item> items = new ArrayList<Item>();
        items.add(new Item("Item 1","First Item on the list"));
        items.add(new Item("Item 2","Second Item on the list"));
        items.add(new Item("Item 3","Third Item on the list"));

        return items;
    }

}

Source Code @ GitHub

Related posts from Android Tutorial