RecyclerView shows wrong image after fast scroll

Question

In my application I'm using RecyclerView.Adapter with my custom Holder class. Each item consist of few TextView's and one ImageView(icon). Problem is that RecyclerView shows wrong Image after fast scrolling.

Example:

truth

NOT truth

So, my holder is:

public class CafeHolder extends RecyclerView.ViewHolder implements OnClickListener {
TextView itemName, itemType, itemMarksCount, itemCommentsCount, itemRating;
ImageView imgCafe;
ImageLoader imgLoader;
private Context context;
private int cafeId;

public CafeHolder(View view, Context context){
    super(view);
    this.context = context;
    itemName = (TextView) view.findViewById(R.id.tvCafeName);
    imgCafe = (ImageView) view.findViewById(R.id.imgCafe);
    itemType = (TextView) view.findViewById(R.id.tvCafeType);
    itemMarksCount = (TextView) view.findViewById(R.id.tvMarksCount);
    itemCommentsCount = (TextView) view.findViewById(R.id.tvCommentsCount);
    itemRating = (TextView) view.findViewById(R.id.tvRatingCount);
    imgLoader = new ImageLoader(context);
    view.setOnClickListener(this);
}

@Override
public void onClick(View v) {
    Intent intent = new Intent(context, InfoActivity.class);
    intent.putExtra(CafeDomain.ID, cafeId);
    context.startActivity(intent);
}

public void setCafeId(int cafeId){
    this.cafeId = cafeId;
}

And my RecyclerView.Adapter:

public class CafeAdapter extends RecyclerView.Adapter<CafeHolder> {
private Context context;
List<CafeDomain> listItems;

public CafeAdapter(List<CafeDomain> listItems, Context context) {
    this.listItems = listItems;
    this.context = context;
}

@Override
public CafeHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.my_cafe_item2, parent, false);
    CafeHolder vh = new CafeHolder(v, context);
    return vh;
}

@Override
public void onBindViewHolder(CafeHolder holder, int position) {
    CafeDomain dItem =  this.listItems.get(position);
    holder.imgCafe.setImageDrawable(null);
    holder.itemName.setText(dItem.getName());
    ArrayList<TypeDomain> types = dItem.getTypes();
    StringBuilder sbTypes = new StringBuilder();
    for (int i = 0; i < types.size(); i++){
      sbTypes.append(types.get(i).getName());
      if (i!=types.size()-1)
          sbTypes.append(", ");  
    }
    holder.itemType.setText(sbTypes.toString());
    if (!dItem.getIconUrl().isEmpty()){
        holder.imgLoader.DisplayImage(dItem.getIconUrl(), holder.imgCafe); //load image from cache or web
    }
    else{
        holder.imgCafe.setImageResource(R.drawable.icon200); //set default image
    }


    holder.itemMarksCount.setText(String.valueOf(dItem.getMarksCount()));
    holder.itemCommentsCount.setText(String.valueOf(dItem.getCommentsCount()));
    holder.itemRating.setText(String.valueOf(dItem.getRating()));
    holder.setCafeId(listItems.get(position).getId());
}

@Override
public int getItemCount() {
    return listItems.size();
}

}

I can see, that this code:

else{
        holder.imgCafe.setImageResource(R.drawable.icon200); //set default image
    }

is working, but two images are wrong anyway :(

UPDATE: The problem is only when you fast scrolling list without image cache in disk. When we have cache, there is no problem here...

Answer 1

Hi i think your problem is here:

 if (!dItem.getIconUrl().isEmpty()){
        holder.imgLoader.DisplayImage(dItem.getIconUrl(), holder.imgCafe); //load image from cache or web
    }
    else{
        holder.imgCafe.setImageResource(R.drawable.icon200); //set default image
    }

I can offer you two solutions that may work. First check your imageUrl is null with TextUtils.isEmpty()

 if (!TextUtils.isEmpty(dItem.getIconUrl())){
        holder.imgLoader.DisplayImage(dItem.getIconUrl(), holder.imgCafe); 
    }
    else{
        holder.imgCafe.setImageResource(R.drawable.icon200); //set default image
    }

İf this does not work, if you can set a image drawable for empty url or url loading fail just leave it to your image downloader and just use the code below:

holder.imgLoader.DisplayImage(dItem.getIconUrl(), holder.imgCafe);