Images are changing in ListView while scrolling in Android

Question

I have an ImageView in a ListView, the ImageView has a default image and while rendering, I asynchronously download images and load them into ImageViews. It works perfectly, but when I scroll down two items and scroll back, then the default images in the first and second row changing to the image of the sixth and seventh row.

I read these topics, but didn't find the solution.

Image change when i scroll gridview

My images changing during scroll in listview android

ListView images changing During Scroll

public class RssAdapter extends BaseAdapter {

private final List<SyndEntry> items;
private static Context context;
private static Map<String, Bitmap> mBitmapCache = new HashMap<String, Bitmap>();

public RssAdapter(Context context, List<SyndEntry> items) {
    this.items = items;
    this.context = context;
}

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

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

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder = new ViewHolder();
    if (convertView == null) {
        convertView = View.inflate(context, R.layout.rss_item, null);
        holder.itemTitle = (TextView) convertView.findViewById(R.id.itemTitle);
        holder.itemPubDate = (TextView) convertView.findViewById(R.id.itemPubDate);
        holder.itemImg = (ImageView) convertView.findViewById(R.id.itemImg);
        convertView.setTag(holder);

    } else {
        holder = (ViewHolder) convertView.getTag();
    }
    holder.itemTitle.setText(items.get(position).getTitle());
    holder.itemPubDate.setText(items.get(position).getPublishedDate().toString());

    List<SyndEnclosure> encls = items.get(position).getEnclosures();
    if(!encls.isEmpty()){
        holder.imageUrl = encls.get(0).getUrl();
    }

    if (!encls.isEmpty() && holder.imageUrl != null && !holder.imageUrl.equals("null")) {
        holder.setImage(holder.imageUrl);
    }

    return convertView;
}

private static class ViewHolder {
    TextView itemTitle;
    TextView itemPubDate;
    ImageView itemImg;
    String imageUrl;

    public void setImage(String imageUrl) {
        this.imageUrl = imageUrl;
        Bitmap imageBitmap = mBitmapCache.get(imageUrl);
        if(imageBitmap!=null){
            itemImg.setImageBitmap(imageBitmap);
        } else {
            AsyncHttpClient client = new AsyncHttpClient();
            client.get(imageUrl, null, fileHandler);
        }
    }

    FileAsyncHttpResponseHandler fileHandler = new FileAsyncHttpResponseHandler(context) {

        @Override
        public void onFailure(int statusCode, Header[] headers, Throwable throwable, File file) {

        }

        @Override
        public void onSuccess(int statusCode, Header[] headers, File response) {
            Bitmap imageBitmap = BitmapFactory.decodeFile(response.getPath());
            itemImg.setImageBitmap(imageBitmap);
            mBitmapCache.put(imageUrl, imageBitmap);
        }
    };
}

I tried to set a boolean variable to check whether my image was set or not and also tried to use SharedPreferences, but this part of my code didn't run when the image changing.

    if(!encls.isEmpty()){
        holder.imageUrl = encls.get(0).getUrl();
    }

    if (!encls.isEmpty() && holder.imageUrl != null && !holder.imageUrl.equals("null")) {
        holder.setImage(holder.imageUrl);
    }

If you need to implement it for production I would strongly suggest you to use a library (picasso or glide) — lelloman, Feb 25 '17 at 14:48
Follow this link this will works [See this link](http://stackoverflow.com/questions/36563923/my-images-changing-during-scroll-in-listview-android) — Milan Pansuriya, Feb 25 '17 at 14:48
@MilanPansuriya Thanks, I read that before, but didn't help. — user1721713, Feb 25 '17 at 15:21

score 0 · Accepted Answer · answered Feb 25 '17 at 17:55

It seems I solved the problem finally, I post the solution for the future. So, at this part of code

} else {
    holder = (ViewHolder) convertView.getTag();
}

the holder object is not that which has to be rendered for the given row. Thus we have to set the parameters of the holder object for the required values. And it was ok, but I didn't set the image related parameters to null if there was no image. So, the two else part were missing:

    if(!encls.isEmpty()){
        holder.imageUrl = encls.get(0).getUrl();
    } else {
        holder.imageUrl = null;
    }

    if (!encls.isEmpty() && holder.imageUrl != null && !holder.imageUrl.equals("null")) {
        holder.setImage(holder.imageUrl);
    } else {
        holder.itemImg.setImageResource(R.mipmap.news_icon);
    }

Images are changing in ListView while scrolling in Android

1 Answers1