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;
}

Solution 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.

Solution 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.

Comments

[Aderbal Nunes]

I implemented the local cache, and changed the way it was downloading the images. I removed the notifyDataSetChanged () also now is downloading images and using the cache. My problem was also used when the scroll in listview. Thanks. Sorry my english is not clear.

[katmanco]

You are great my friend , I was trying to handle this few days , I solved this by caching but in low level devices I faced it again that Pictures were shuffling the reason was I was Checking Cached Images Through AsyncTask ' s in doInBackground method.Taking out this code solved my problem .+1