Android ListAdapter example

If you want to use a ListView, you will have to supply it with a ListAdapter to allow it to display any content. A few simple implementations of that adapter are already available in the SDK:

• ArrayAdapter<T> (for displaying an array of objects, using toString() to display them)
• SimpleAdapter (for displaying a list of Maps)
• SimpleCursorAdapter (for displaying rows fetched from a database table using a Cursor)

These implementations are perfect for displaying very simple lists. But if your list is just a little more complicated than that, you will need to write your own custom ListAdapter implementation. In most cases it's useful to subclass ArrayAdapter which already takes care of managing a list of objects. Now you only have to tell it how to render each object in the list. Do this by overriding thegetView(int, View, ViewGroup) method of the ArrayAdapter class.

Example of a ListView containing Youtube search results in the form of images and text

The images need to be on-the-fly downloaded from the internet. Let's create a class which represents items in the list:

1. public class ImageAndText {
2.     private String imageUrl;
3.     private String text;
5.     public ImageAndText(String imageUrl, String text) {
6.         this.imageUrl = imageUrl;
7.         this.text = text;
8.     }
9.     public String getImageUrl() {
10.         return imageUrl;
11.     }
12.     public String getText() {
13.         return text;
14.     }
15. }

Now, let's create an implementation of a ListAdapter that is able to display a list of these ImageAndTexts.

1. public class ImageAndTextListAdapter extends ArrayAdapter<ImageAndText> {
3.     public ImageAndTextListAdapter(Activity activity, List<ImageAndText> imageAndTexts) {
4.         super(activity, 0, imageAndTexts);
5.     }
7.     @Override
8.     public View getView(int position, View convertView, ViewGroup parent) {
9.         Activity activity = (Activity) getContext();
10.         LayoutInflater inflater = activity.getLayoutInflater();
12.         // Inflate the views from XML
13.         View rowView = inflater.inflate(R.layout.image_and_text_row, null);
14.         ImageAndText imageAndText = getItem(position);
16.         // Load the image and set it on the ImageView
17.         ImageView imageView = (ImageView) rowView.findViewById(R.id.image);
18.         imageView.setImageDrawable(loadImageFromUrl(imageAndText.getImageUrl()));
20.         // Set the text on the TextView
21.         TextView textView = (TextView) rowView.findViewById(R.id.text);
22.         textView.setText(imageAndText.getText());
24.         return rowView;
25.     }
27.     public static Drawable loadImageFromUrl(String url) {
28.         InputStream inputStream;
29.         try {
30.             inputStream = new URL(url).openStream();
31.         } catch (IOException e) {
32.             throw new RuntimeException(e);
33.         }
34.         return Drawable.createFromStream(inputStream, "src");
35.     }
36. }

The views are inflated from an XML file called "image_and_text_row.xml":

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.              android:orientation="horizontal"
4.              android:layout_width="fill_parent"
5.              android:layout_height="wrap_content">
7.         <ImageView android:id="@+id/image"
8.                   android:layout_width="wrap_content"
9.                   android:layout_height="wrap_content"
10.                   android:src="@drawable/default_image"/>
12.         <TextView android:id="@+id/text"
13.                  android:layout_width="wrap_content"
14.                  android:layout_height="wrap_content"/>
16. </LinearLayout>

This ListAdapter implementation renders the Image And Texts in the ListView like you would expect. The only thing is that this only works for a very small list which doesn't require scrolling to see all items. If the list of ImageAndTexts gets bigger you will notice that scrolling isn't as smooth as it should be (in fact, it's far off!).