Creating an Advanced ListView with Images and Text

In Chapter: Other GUI Elements: Lists and Views
Author: Marco Dinacci (marco.dinacci@gmail.com) 'lunkwill'
Published? true
FormatLanguage: WikiFormat

Problem:

You want to write a ListView that shows an image next to a string.

Solution:

We're going to create an Activity that extends from ListActivity, prepare the XML resource files and at last create a custom view adapter to load the resources onto the view.

Discussion:

The Android documentation says that the ListView widget is easy to use. It is true if you just want to display a simple list of strings but as soon as you want to customize your list things become more complicated.

This recipe shows you how to write a ListView that displays a static list of images and strings, similar to the settings list on your phone.

Here's a picture of the final result:

Let's start with the Activity code. First of all, we extends from ListActivity instead of Activity so we can easily supply our custom adapter:

public class AdvancedListViewActivity extends ListActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        Context ctx = getApplicationContext();
	Resources res = ctx.getResources();

	String[] options = res.getStringArray(R.array.country_names);
	TypedArray icons = res.obtainTypedArray(R.array.country_icons);
		
	setListAdapter(new ImageAndTextAdapter(ctx, R.layout.main_list_item, options, icons));
    }
}

In the onCreate we also create an array of strings, which contains the country names, and a TypedArray, which will contain our Drawable flags.

The arrays are created from an XML file, here's the content of the countries.xml file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="country_names">
        <item>Bhutan</item>
        <item>Colombia</item>
        <item>Italy</item>
        <item>Jamaica</item>
        <item>Kazakhstan</item>
        <item>Kenya</item>
    </string-array>
    <array name="country_icons">
        <item>@drawable/bhutan</item>
        <item>@drawable/colombia</item>
        <item>@drawable/italy</item>
        <item>@drawable/jamaica</item>
        <item>@drawable/kazakhstan</item>
        <item>@drawable/kenya</item>
    </array>
</resources>

Now we're ready to create the adapter. The official documentation for Adapter says:

<para>An Adapter object acts as a bridge between an AdapterView and the underlying data for that view. The Adapter provides access to the data items. The Adapter is also responsible for making a View for each item in the data set.</para>

There are several subclasses of Adapter; we're going to extend on ArrayAdapter which is a concrete BaseAdapter that is backed by an array of arbitrary objects.

public class ImageAndTextAdapter extends ArrayAdapter<String> {

	private LayoutInflater mInflater;
	
	private String[] mStrings;
	private TypedArray mIcons;
	
	private int mViewResourceId;
	
	public ImageAndTextAdapter(Context ctx, int viewResourceId,
			String[] strings, TypedArray icons) {
		super(ctx, viewResourceId, strings);
		
		mInflater = (LayoutInflater)ctx.getSystemService(
				Context.LAYOUT_INFLATER_SERVICE);
		
		mStrings = strings;
		mIcons = icons;
		
		mViewResourceId = viewResourceId;
	}

	@Override
	public int getCount() {
		return mStrings.length;
	}

	@Override
	public String getItem(int position) {
		return mStrings[position];
	}

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

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		convertView = mInflater.inflate(mViewResourceId, null);
		
		ImageView iv = (ImageView)convertView.findViewById(R.id.option_icon);
		iv.setImageDrawable(mIcons.getDrawable(position));

		TextView tv = (TextView)convertView.findViewById(R.id.option_text);
		tv.setText(mStrings[position]);
		
		return convertView;
	}
}

The constructor accepts a Context, the id of the layout that will be used for every row (more on this soon), an array of strings (the country names) and a TypedArray (our flags).

The getView method is where we build a row for the list. We first use a LayoutInflater to create a View from XML, then we retrieve the country flag as a Drawable and the country name as a String and we use them to populate the ImageView and TextView that we've declared in the layout.

The layout for the list rows is the following:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android">
	<ImageView
	android:id="@+id/option_icon"
	android:layout_width="48dp"
	android:layout_height="fill_parent"/>
	<TextView
	   android:id="@+id/option_text"
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    android:padding="10dp"
	    android:textSize="16dp" >
	</TextView>
</LinearLayout>

And this is the content of the main layout:

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

Note that the ListView ID must be exactly @android:id/listor you'll get a RuntimeException.

Download:

The source code for this project is in the Android Cookbook repository, http://github.com/IanDarwin/Android-Cookbook-Examples/tree/master/ListViewAdvanced.