Problems when I use convertView, problems when I don't

Question

I have a ListView which contains an ImageView and a TextView. I'm subclassing ArrayAdapter so that I can load an image from the internet, via a subclassed AsyncTask. All good so far.

The problem is that if I try to use convertView, I have a problem where the image is recycled briefly into the wrong row. (This is a company's logo, so this is... not good.)

If I don't use convertView, however, the image is lost when the user scrolls. So if they scroll down and back up, the image is re-loaded from the internet (which is obviously bad for data use, battery life etc.)

Is there a simple way to fix this so that it doesn't load from the internet each time, or move the images around?

Here's what I'm using so far:

public class SupplierAdapter extends ArrayAdapter<Supplier>{
    int resource;
    String response;
    Context context;

    public SupplierAdapter(Context context, int resource, List<Supplier> suppliers) {
        super(context, resource, suppliers);
        this.resource = resource;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent){
    LinearLayout view;
        Supplier s = getItem(position);

        if(convertView == null){
            view = new LinearLayout(getContext());
            String inflater = Context.LAYOUT_INFLATER_SERVICE;
            LayoutInflater vi;
            vi = (LayoutInflater) getContext().getSystemService(inflater);
            vi.inflate(resource, view, true);
        } else {
            view = (LinearLayout) convertView;
        }

        ImageView iv = (ImageView) view.findViewById(R.id.thumbnail);
        // s.getThumbnail returns a URL
        new DownloadImageTask(iv).execute(s.getThumbnail()); 

        TextView titleText =(TextView) view.findViewById(R.id.titleText);
        titleText.setText(s.getTitle());
        titleText.setTag(s.getId());

        return view;
    }
}

All help very much appreciated :)

Answer 1

John, try using raptureinvenice.com's WebImageView. I recently refactored my code to use this easy and lightweight library and so far, so good. It easily provides a two level cache, updates multiple targets simultaneously, and was incredibly easy to set up. It looks like it seems to drop about 1/20 requests to display an image. Other than this lurking bug that could be the library's fault, it is excellent.

Answer 2

This is an annoyingly complicated problem. I went as far as having two layers of cache (memory and disk cache) to smooth out performance on top of a smarter update in the second thread (AsyncTask in your case). There are lots of little details like trying not to download the same image twice (which is an issue if you have the same company logo for multiple list items). The main issue of the wrong image being shown though can be fixed simply by keeping track of what the current URL associated with the ImageView is, and ensuring that is the same as the one passed into the AsyncTask before setting the final image. You could store that information in a HashMap maybe. I actually just abstracted all of this stuff into a WebImageView class that extends ImageView to make it all reusable.

Answer 3

For in RAM image caching you can use SoftReference. So the code would be something like this:

ImageView iv = (ImageView) view.findViewById(R.id.thumbnail);
// s.getDrawable returns a SoftReference to Drawable
SoftReference<Drawable> thumbRef = s.getDrawable();
Drawable thumb = thumbRef.get();
if (thumb == null) {
    new DownloadImageTask(s).execute(); 
} else {
    iv.setDrawable(thumb);
}

DownloadImageTask will get the image, wrap into SoftReference, set the reference to collection and notify adapter the underlaying data has changed. Of cource, the design could be more efficient, however this is just a rough plan.

Answer 4

If you need to download just a few images and if you don't need to display large image, you can use the following code. It store the bitmaps in memory. It works well is the images are not too big.

I changed my code to your situation:

import android.graphics.Bitmap;

public class Supplier {

// Data
private String  mText;
private Bitmap  mImage;
private String  mImageUrl;

// Flags
private boolean mIsLoading;

public Supplier() {
    mText       = "test";
    mImage      = null;
    mImageUrl   = "image_url";
    mIsLoading  = false;
}

public Supplier setLoadingStatus(boolean pIsLoading){
    mIsLoading = pIsLoading;
    return this;
}

public boolean isLoading(){
    return mIsLoading;
}

public Supplier setImageUrl(String pImageUrl){
    mImageUrl = pImageUrl;
    return this;
}

public String getImageUrl(){
    return mImageUrl;
}

public Supplier setText(String pText){
    mText = pText;
    return this;
}

public String getText(){
    return mText;
}

public Supplier setImageBitmap(Bitmap bmp){
    mImage = bmp;
    return this;
}

public Bitmap getImageBitmap(){
    return mImage;
}       

}

import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.MalformedURLException; import java.net.URL; import java.util.ArrayList;

import android.R; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Handler; import android.os.Message; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView;

public class TestAdapter extends BaseAdapter{

protected static final int MSG_IMAGE_DOWNLOADED = 0;

// Constants
private final String TAG = "TestAdapter";

private ArrayList<Supplier> mItems;
private Context mContext;
private LayoutInflater mLf;
private Handler mHandler;


public TestAdapter(Context pContex) {
    mContext    = pContex;
    mLf         = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    mItems      = new ArrayList<Supplier>();
    mHandler    = new Handler(){
        public void handleMessage(Message msg) {
            switch (msg.what) {
            case MSG_IMAGE_DOWNLOADED:
                if(null != msg.obj){
                    mItems.get(msg.arg1).setImageBitmap((Bitmap)msg.obj)
                                        .setLoadingStatus(false);
                    notifyDataSetChanged();
                }
                break;

            default:
                break;
            }
        };
    };
}

public TestAdapter addItem(Supplier pItem){
    mItems.add(pItem);
    return this;
}

@Override
public int getCount() {
    return mItems.size();
}

@Override
public Supplier getItem(int position) {
    return mItems.get(position);
}

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

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

    if(null == convertView){
        convertView     = mLf.inflate(R.layout.your_resource, parent, false);
        vh              = new ViewHolder();
        vh.mTextView    = (TextView)convertView.findViewById(R.id.your_textview_from_resource);
        vh.mImage       = (ImageView)convertView.findViewById(R.id.yout_imageview_from_resource);
        convertView.setTag(vh);
    }else{
        vh = (ViewHolder)convertView.getTag();
    }       

    vh.mTextView.setText(mItems.get(position).getText());
    if(mItems.get(position).getImageBitmap() == null && !mItems.get(position).isLoading()){
        // download image
        downloadImage(mItems.get(position).getImageUrl(), position);
        // set a flag to know that the image is downloading and it is not need to 
        // start another download if the getView method is called again.
        mItems.get(position).setLoadingStatus(true);
    }else{
        vh.mImage.setImageBitmap(mItems.get(position).getImageBitmap());
    }
    return null;
}

private void downloadImage(String pImageUrl, int pItemPosition){
    final int cItemPosition = pItemPosition;
    final String cImageUrl  = pImageUrl; 

    Thread tGetImage = new Thread(new Runnable() {          
        @Override
        public void run() {             
            Message msg = new Message();
            msg.what = MSG_IMAGE_DOWNLOADED;

            BitmapFactory.Options options = new BitmapFactory.Options();                                                                                            
            Bitmap  bmImg;      
            URL     myFileUrl = null; 

            try {
                myFileUrl= new URL(cImageUrl);
            } catch (MalformedURLException e) {
                e.printStackTrace();                        
            }                       
            try {
                HttpURLConnection conn= (HttpURLConnection)myFileUrl.openConnection();
                conn.setDoInput(true);
                conn.connect();
                InputStream is  = conn.getInputStream();
                bmImg           = BitmapFactory.decodeStream(is, null, options);

                is.close();
                conn.disconnect();          
                msg.obj     = bmImg;                    
            } catch (IOException e) {
                e.printStackTrace();                        
            }                       
            msg.arg1 = cItemPosition;
            mHandler.sendMessage(msg);              
        }
    });
    tGetImage.start();
}

private class ViewHolder{
    public TextView     mTextView;
    public ImageView    mImage;
}

}

The code is not tested but should work.