Android - Issue with lazy loading images into a ListView

Question

This is a very common scenario: displaying images in a ListView which have to be downloaded from the internet.

Right now I have a custom subclass of ArrayAdapter which I use for the ListView. In my getView() implementation of the ArrayAdapter, I spawn a separate thread to load an image. After the loading is done, it looks up the appropriate ImageView and sets the image with ImageView.setImageDrawable(). So the solution I used is kind of similar to this one: Lazy load of images in ListView

The problem I'm having is that as soon as I make the call to setImageDrawable() on the ImageView, the ListView somehow refreshes all currently visible rows in the list! This results in kind of an infinite loop:

1. getView() is called
2. thread is spawned to load image
3. image is loaded; setImageDrawable() is called on ImageView
4. ListView picks it up for some reason and refreshes itself
5. For the ListView to refresh, getView() is called for each visible row, so we go back to step 1 and the whole thing repeats itself

So as far as I can see, the solution proposed in "Android - How do I do a lazy load of images in ListView" (see link above) simply doesn't work. It might look like it does, but it will run very slow because in the background, it keeps reloading the currently visible rows.

Did anyone encounter this before and/or have a solution for this?

Answer 1

I used the code in following link : another stackoverflow question

i made small changes in order to solve recycling view problem.i set the url of image to Tag of imageview in the adapter. Following code contains my solution that solves recycling problem:

public void fetchDrawableOnThread(final String urlString, final ImageView imageView,Drawable drw) {

    imageView.setImageDrawable(drw);//drw is default image
    if (drawableMap.containsKey(urlString)) {
        if(imageView.getTag().toString().equals(urlString))
        {
            imageView.setImageBitmap(drawableMap.get(urlString));
            imageView.invalidate();
            return;
        }

    }

    final Handler handler = new Handler() {
        @Override
        public void handleMessage(Message message) {
            BitmapWrapper wrapper = (BitmapWrapper)message.obj;
            if(wrapper.imageurl.equals(imageView.getTag().toString()))
            {
                imageView.setImageBitmap((Bitmap)wrapper.bitmap);
                imageView.invalidate();
            }

        }
    };

    Thread thread = new Thread() {
        @Override
        public void run() {
            //TODO : set imageView to a "pending" image

            Bitmap drawable = fetchDrawable(urlString);
            BitmapWrapper wrapper = new BitmapWrapper();
            wrapper.bitmap = drawable;
            wrapper.imageurl = urlString;
            Message message = handler.obtainMessage(1, wrapper);
            handler.sendMessage(message);
        }
    };
    thread.start();
}


    public class BitmapWrapper
{
    public Bitmap bitmap;
    public String imageurl;
}

Answer 2

I had the same issue.

After almost 2 days of heavy debugging/optimizing and trying to figure out, why my getView() is called for all views over and over again when using setImageBitmap() in a Row, I came up with a dirty solution:

1) Extend a custom ImageView which you use for all the Images in your List

2) in this ImageView overwrite the method

@Override
public void requestLayout()
{ 
  return; 
}

3) Dirty, but for me it works

4) Profit ;)

Answer 3

In the linked solution, fetchDrawableOnThread() should only be called if the view does not already have the correct drawable.

A view does not have a drawable if getDrawable() returns null.

If you are reusing slots, you views you need to go further and manage the state. If your views have a member variable storing the URL, and a boolean to say whether it is loaded, it'd be easy to know whether to call fetchDrawableOnThread() or not, for example.

I'd speculate that the drawable's toString() detailed the path from which the image was loaded. (If it doesn't, you could subclass the drawable returned to make it so). In this case, you could avoid the boolean outlined above and just do a comparison to determine if its the right drawable or whether to fetch a replacement.

Additionally, your getView() on a visible row should ensure that those that no longer visible get unloaded, to prevent memory exhaustion. A finesse would be to move the no longer visible images to soft references (so they are unloaded when memory is needed) as another poster on the original thread noted.

Answer 4

I have a ThumbnailAdapter that wraps up this whole pattern that may help.