Loading Remote Images in a ListView on Android

So this appears to be a common challenge:

I have a list of items in my mobile application. Each item in the list contains an image and a title. The data for the list comes from a remote web service, RESTful interface or other Internet connection and the images are provided in a separate call. I want the list to be responsive, so I’ll load the list and then in a separate thread I will update the images in the list as they are loaded from the network.

I struggled with this on the BlackBerry where there was little similar code to go on, but got it working. I just finished an Android app and discovered that we had the same pattern. Trying to re-use my BlackBerry code I found that the UI patterns don’t translate (beyond frameworks, Android recycles views while it’s rendering to keep memory-use low).

There are lots of posts on the web about how to do this for the Android, such as this thread.

Unfortunately all of those ran into the same problem: Sometimes the images would load and sometimes they wouldn’t. Sometimes the images in the list would be the wrong one for the list item when rendered. And some solutions only rendered images that were off screen.

Eventually I got this (mostly) working and am sharing the code below in the hopes that this will help. While this is vastly derived from Tom van Zummeren’s tutorial at jTeam, the key that made this work right was recognizing from Nazmul’s tutorial at developerlife.com  that I could use notifyDataSetChanged to redraw the list when new data came in.

Let me say that I went down many paths here and I’m not sure that the solution, adopted from Nazmul, is the “right” one because it uses and Adapter’s getView method to bind the data, rather than using a ViewBinder. I tried a ViewBinder approach at one point and might go back to that if there’s any reason to rewrite this.

In addition, my final change was to not re-use views at all which makes for somewhat poor performance. Has anyone had better luck with this?

The Code

I have a custom data object, MediaItem, that contains a URL to the image and the label to be displayed in the list. My main activity view contains a ListView instance in the layout.

<ListView android:id="@+id/playList"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:choiceMode="singleChoice"
  />

Each item in the listview is represented by a custom view.

<?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="50dip"
 android:padding="10dip"
 >
 <ImageView android:id="@+id/icon"
 android:layout_width="50dp"
 android:layout_height="fill_parent"
 android:layout_marginRight="10dip"
 android:layout_alignParentLeft="true"
 />
 <TextView
 android:id="@+id/text"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@id/icon"
 android:gravity="center_vertical"
 android:textSize="12sp"
 android:textStyle="bold"
 android:ellipsize="marquee"
 android:singleLine="true"
 android:scrollHorizontally="true"
 />
</RelativeLayout>

In my onCreate method I set up and configure the list view to load the playlist (loaded elsewhere) from the data source through a custom adapter class.

@Override
public void onCreate(Bundle savedInstanceState) {
  listView = (ListView)findViewById(R.id.playList);
  listView.setAdapter(new MediaItemAdapter(this, R.layout.playlistitem, State.playlist));
}

In my code I actually did the loading in the onSurfaceCreated because (1) I wanted to use the spinner/progress indicator in the title bar while the playlist was loading data and because I want this to be reloaded by the playlist each time the app is brought into view. In most cases you probably wouldn’t want to do this.

The MediaItemAdapter class takes a List<MediaItem> which is our playlist.

public class MediaItemAdapter extends ArrayAdapter<MediaItem> {
  private final static String TAG = "MediaItemAdapter";
  private int resourceId = 0;
  private LayoutInflater inflater;
  private Context context;

  private ImageThreadLoader imageLoader = new ImageThreadLoader();

  public MediaItemAdapter(Context context, int resourceId, List<MediaItem> mediaItems) {
    super(context, 0, mediaItems);
    this.resourceId = resourceId;
    inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    this.context = context;
  }

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

    View view;
    TextView textTitle;
    TextView textTimer;
    final ImageView image;

    view = inflater.inflate(resourceId, parent, false);

    try {
      textTitle = (TextView)view.findViewById(R.id.text);
      image = (ImageView)view.findViewById(R.id.icon);
    } catch( ClassCastException e ) {
      Log.e(TAG, "Your layout must provide an image and a text view with ID's icon and text.", e);
      throw e;
    }

    MediaItem item = getItem(position);
    Bitmap cachedImage = null;
    try {
      cachedImage = imageLoader.loadImage(item.thumbnail, new ImageLoadedListener() {
      public void imageLoaded(Bitmap imageBitmap) {
      image.setImageBitmap(imageBitmap);
      notifyDataSetChanged();                }
      });
    } catch (MalformedURLException e) {
      Log.e(TAG, "Bad remote image URL: " + item.thumbnail, e);
    }

    textTitle.setText(item.name);

    if( cachedImage != null ) {
      image.setImageBitmap(cachedImage);
    }

    return view;
  }
}

The image is loaded in a separate thread. Several implementations spawned a new thread for each image. I don’t think that the 3G-or-worse speed of a mobile device is worth trying to download more than an image at a time and I’d rather have the first image show up as fast as possible so that the user sees that something is happening. So my implementation uses a queue and a single thread to load images that are in the queue until all images are loaded.

Note that in the adapter above I’m attaching an anonymous method to be called by the thread to set the bitmap image. The only variable used by that thread is a final reference to the ImageView for the item. I found that you can’t pass in a reference to the View for the item template or the ListView because of reuse and such. This was the most effective approach.