Question

I have this strange problem about loading images using AsyncTask in ListView.In my ListView, every row contains an ImageView and a TextView. I followed this link for it:

http://android-developers.blogspot.in/2010/07/multithreading-for-performance.html

The images are being downloaded successfully from the URL and are populated on their respected rows. But when I scroll the ListView or click on any list item, the images just exchange their rows. Though the text in the TextViews remain on the same rows. I don’t understand why its happening. I have googled a lot about it but can’t find a perfect reason for it. Please help.

Here is my adapter class:

     private class ListAdapter extends BaseAdapter{

    private ArrayList<HashMap<String, Object>> allFriends; 
    private LayoutInflater mInflater;

    public ListAdapter(ArrayList<HashMap<String, Object>> allFriends, Context context){
        this.allFriends = allFriends;
        mInflater = LayoutInflater.from(context);
    }

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

    @Override
    public Object getItem(int position) {
        return allFriends.get(position);
    }

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

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        FriendsViewHolder holder;

        if (convertView == null||!(convertView instanceof TextView)||!(convertView instanceof ImageView)) {
             convertView = mInflater.inflate(R.layout.friend_list_view, null);

             holder = new FriendsViewHolder();
             holder.friendName = (TextView) convertView.findViewById(R.id.friendName);
             holder.friendImage = (ImageView) convertView.findViewById(R.id.friendImage);                

             convertView.setTag(holder);
         }else {
             holder = (FriendsViewHolder) convertView.getTag(); 
         }

        holder.friendName.setText((String) allFriends.get(position).get(FriendsActivity.FRIENDS_NAME_KEY));

        String otherId=(String) allFriends.get(position).get(FriendsActivity.IDKEY);
        String isImage=(String) allFriends.get(position).get(FriendsActivity.IS_IMAGE_KEY);

            if(isImage.equalsIgnoreCase("true")){
                download(otherId, holder.friendImage);
            }

        return convertView;
    }
}//End of list adapter

and the download method is:

   public void download(String otherId, ImageView imageView) {
     BitmapDownloaderTask task = new BitmapDownloaderTask(imageView);
     task.execute(otherId);
 }

Here BitmapDownloaderTask is the async task for downloading the images:

    class BitmapDownloaderTask extends AsyncTask<String, Void, Bitmap> {
        private String otherId;
        private final WeakReference<ImageView> imageViewReference;

        public BitmapDownloaderTask(ImageView imageView) {
            imageViewReference = new WeakReference<ImageView>(imageView);
        }

        @Override
        // Actual download method, run in the task thread
        protected Bitmap doInBackground(String... params) {
             // params comes from the execute() call: params[0] is the url.

             return getOtherUserImage(params[0]);
        }

        @Override
        // Once the image is downloaded, associates it to the imageView
        protected void onPostExecute(Bitmap bitmap) {
            if (isCancelled()) {
                bitmap = null;
            }

            if(bitmap!=null){
                if (imageViewReference != null) {
                    ImageView imageView = imageViewReference.get(); 
                    if(imageView != null ){
                        imageView.setImageBitmap(bitmap);
                    } 
                }
            }
        }
    }

And getOtherUserImage method is:

    public Bitmap getOtherUserImage(String otherUserId){

    // code to download the image goes here. It returns bitmap "bmImg".

    if(bmImg==null){
        return null;
    }else {
        bmImg = Bitmap.createScaledBitmap(bmImg,imageWidth, imageHeight, true);

        /*availableFriends.get(position).put(BITMAP_KEY, bmImg);
        runOnUiThread(new Runnable() {
            public void run() {
                adapter.notifyDataSetChanged();
            }
        });*/
        return bmImg;
    }
}

Answer 1

This Android Developer’s Blog post describes how to correctly load images into a ListView asynchronously and provides a great sample app that you should be able to quickly and easily modify (I did) to fit your needs.

Indeed, for memory efficiency reasons, ListView recycles the views
that are displayed when the user scrolls. If one flings the list, a
given ImageView object will be used many times. Each time it is
displayed the ImageView correctly triggers an image download task,
which will eventually change its image. So where is the problem? As
with most parallel applications, the key issue is in the ordering. In
our case, there’s no guarantee that the download tasks will finish in
the order in which they were started. The result is that the image
finally displayed in the list may come from a previous item, which
simply happened to have taken longer to download. This is not an issue
if the images you download are bound once and for all to given
ImageViews.