Images were Shuffled when scrolling a ListView with a ViewHolder

Question

My problem is connected when the user scrolls the ListView. I looked around and saw numerous examples of 'listview lazy image', has also watched the video of the Google IO which speaks of 'good practice ' to make this work. But my problem continues when the user moves up and down the ListView.

What happens is that when scrolling the list, the images that were loaded on each item are shuffled, and the avatar of each item going to the next item ends. I do not know if I'm being clear but I will show with the image.

When you start, items that have no image left with the standard image.

Image 1: http://boxandroid.com/app/weguide/itsok.png Before user scroll ListView: http://boxandroid.com/app/weguide/nook.png

Note that the pictures were shuffled among other items.

in my adapter:

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

    ViewHolder viewHolder = new ViewHolder();
    if(convertView == null){
        convertView = _inflate.inflate(R.layout.layout_list, null);
        viewHolder.text = (TextView) convertView.findViewById(R.id.title);
        viewHolder.owner = (TextView) convertView.findViewById(R.id.owner);
        viewHolder.image = (ImageView) convertView.findViewById(R.id.thumb);
        convertView.setTag(viewHolder);
    }else{
        viewHolder = (ViewHolder) convertView.getTag();
    }

    HashMap<String, String> item = (HashMap<String, String>) getItem(position);

    viewHolder.text.setText( item.get("poiName").toString() );
    viewHolder.owner.setText( item.get("owner").toString() );

    ImageView imageView = viewHolder.image;
    imageView.setTag(item.get("thumbs"));

    if(!item.get("thumbs").equals("null")){
        Drawable cacheImage = loader.loadDrawable(item.get("thumbs"), new ImageManage.ImageCallback() {
            public void imageLoaded(Drawable imageDrawable, String imageUrl) {
                ImageView imageViewByTag = (ImageView) _listView.findViewWithTag(imageUrl);
                if(imageViewByTag != null)
                    imageViewByTag.setBackgroundDrawable(imageDrawable);
            }
        });
        imageView.setImageDrawable(cacheImage);
        notifyDataSetChanged();
    }

    return convertView;
}

Answer 1

Used as base the example on the blog of Android.

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

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

    ViewHolder viewHolder = new ViewHolder();
    if(convertView == null){
        convertView = _inflate.inflate(R.layout.layout_list, null);
        viewHolder.text = (TextView) convertView.findViewById(R.id.title);
        viewHolder.owner = (TextView) convertView.findViewById(R.id.owner);
        viewHolder.image = (ImageView) convertView.findViewById(R.id.thumb);
        convertView.setTag(viewHolder);
    }else{
        viewHolder = (ViewHolder) convertView.getTag();
    }

    HashMap<String, String> item = (HashMap<String, String>) getItem(position);

    viewHolder.text.setText( item.get("poiName").toString() );
    viewHolder.owner.setText( item.get("owner").toString() );
    viewHolder.image.setTag(item.get("thumbs"));
    imageDowload.download(item.get("thumbs"), viewHolder.image);


    return convertView;
}

is now working, thanks.

Answer 2

Your problem is that you are colling notifyDataSetChange() inside of getView method

if(!item.get("thumbs").equals("null")){
    Drawable cacheImage = loader.loadDrawable(item.get("thumbs"), new ImageManage.ImageCallback() {
        public void imageLoaded(Drawable imageDrawable, String imageUrl) {
            ImageView imageViewByTag = (ImageView) _listView.findViewWithTag(imageUrl);
            if(imageViewByTag != null)
                imageViewByTag.setBackgroundDrawable(imageDrawable);
        }
    });
    imageView.setImageDrawable(cacheImage);
    notifyDataSetChanged();
}

code above should be done outside of getView method.