Picasso image misplacement issue when using with RecyclerView

Question

In my app, I'm showing the articles which are getting fetched from a webservice. Those articles have title, image and other fields. For displaying the images, I'm using Picasso.

Problem - While scrolling the RecyclerView, I'm seeing the images getting misplaced. Some items are having the duplicate images. I know it is RecyclerView which reuses the xml item layout and because of that it is creating a problem. But I think there must be some solution to this problem. I've googled about this and found some posts on stackoverflow but that didn't help. For example-

Picasso loads pictures to the wrong imageview in a list adapter

I've tried the following but having the same problem-

public class ArticleAdapter extends RecyclerView.Adapter<ArticleAdapter.ArticleViewHolder> {

    protected Activity mActivity;
    protected List<Article> mItems = new ArrayList<>();
    private static OnEntityClickCallback mCallback;

    public ArticleAdapter(Activity pActivity) {
        mActivity = pActivity;
    }

    public void setItemClickCallback(OnEntityClickCallback pCallback) {
        this.mCallback = pCallback;
    }

    @Override
public ArticleViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View articleView = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_article_item, parent, false);
    return new ArticleViewHolder(articleView);
}

    public void addItem(List<Article> moreItems) {
        mItems.addAll(moreItems);
        notifyDataSetChanged();
    }

    public void removeItems(){
        mItems.clear();
        notifyDataSetChanged();
    }


    @Override
    public void onBindViewHolder(ArticleViewHolder holder, int position) {
        holder.bind(mItems.get(position));
    }

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


    static class ArticleViewHolder extends RecyclerView.ViewHolder {

        private TextView tvTitle;
        TextView tvAuthor;
        TextView tvPostdate;
        ImageView imgImage;
        RatingBar ratingBar;

        public ArticleViewHolder(View view) {
            super(view);
            this.tvTitle = (TextView) view.findViewById(R.id.tv_title);
            this.tvAuthor = (TextView) view.findViewById(R.id.tv_author);
            this.tvPostdate = (TextView) view.findViewById(R.id.tv_date);
            this.imgImage = (ImageView) view.findViewById(R.id.img_image);
            this.ratingBar = (RatingBar) view.findViewById(R.id.ratingBar);
        }

       public void bind(final Article article) {

        tvTitle.setText(article.getTitle());
        tvPostdate.setText(article.getPostdate());
        tvAuthor.setText(article.getAuthor());

        // Canceling the older request
        Picasso.with(imgImage.getContext()).cancelRequest(imgImage);
         // Creating a new request.
        if (article.getImage() != null) {
                Picasso.with(imgImage.getContext()).load(article.getImageUrl())
                .placeholder(R.drawable.noimage)
                .error(R.drawable.noimage)
                .into(imgImage);
        }

    this.itemView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (mCallback != null)
                mCallback.onEntitySelected(article);
        }
    });
}

    }
}

Update - Part of my layout file

 <ImageView
                    android:id="@+id/img_image"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/cardview_image_thumbnail_height"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentLeft="true"
                    android:scaleType="centerCrop"
                    android:layout_margin="@dimen/cardview_padding_btw_widgets"
                    android:src="@drawable/noimage"
                    />

Any help would be appreciated. Thank you.

Only images has been misplaced or the texts also ? – Soham Dec 29 '15 at 06:53 — Soham, Dec 29 '15 at 06:53
@Soham Only images are getting misplaced. – Rahul Chaurasia Dec 29 '15 at 06:55 — Rahul Chaurasia, Dec 29 '15 at 06:55
Can you please post your adapter class. – Soham Dec 29 '15 at 06:57 — Soham, Dec 29 '15 at 06:57
@Soham Added the adapter class. Please check. – Rahul Chaurasia Dec 29 '15 at 07:13 — Rahul Chaurasia, Dec 29 '15 at 07:13

Ankit Aggarwal · Accepted Answer · 2015-12-29T09:25:48.180

12

Externally set the drawable because you are getting the imageview which has some drawable already attached to it. Imageview is not getting recreated so the previous image in the ImageView will be visible until you remove it.

    if (article.getImage() != null) {
            Picasso.with(imgImage.getContext()).load(article.getImageUrl())
                    .placeholder(R.drawable.noimage)
                    .error(R.drawable.noimage)
                    .into(imgImage);
    }else{
//         imgImage.setImageDrawable(null);
         imgImage.setImageDrawable(R.drawable.some_drawable);
    }

edited Dec 29 '15 at 09:25

answered Dec 29 '15 at 06:47

Ankit Aggarwal

5,317
2
30
53

1

I'm not seeing any change here. Can you please elaborate – Rahul Chaurasia Dec 29 '15 at 06:56
1

check this line else{ imgImage.setImageDrawable(null); }. actuly whats happening is your imageview is recycled and it is having the image from the last time. So if the imageUrl is null, you should remove any drawable present in that imageview. Tell me if this works – Ankit Aggarwal Dec 29 '15 at 06:58
Okay. But I'm having a default image within the xml layout. I want that image to be display if the image url is null. – Rahul Chaurasia Dec 29 '15 at 07:01
in that case do this else{ imgImage.setImageDrawable(R.drawable.some_drawable); } – Ankit Aggarwal Dec 29 '15 at 07:02
actually you have to externally set the drawable because you are getting the imageview which has some drawable already attached to it. imageview is not recreating so the default image in the xml layout wont be visible until you set it externally – Ankit Aggarwal Dec 29 '15 at 07:05
Tried your solution. It didn't work. Still getting the same issue. – Rahul Chaurasia Dec 29 '15 at 07:17
I was doing it wrong. Your solution working now. Please update the answer and I'll accept that. – Rahul Chaurasia Dec 29 '15 at 09:18
Edited the answer now. – Ankit Aggarwal Dec 29 '15 at 09:26
You saved my life！ – Sam Chen Aug 19 '20 at 21:45

score 2 · Answer 2 · answered Jan 08 '19 at 05:27

2

Also, it worked for me:

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

@Override
public int getItemViewType(int position) {
   return position;
}

These methods are a cleaner approach to accessing the list's data.

answered Jan 08 '19 at 05:27

Shailendra Madda

20,649
15
100
138

score 0 · Answer 3 · answered Dec 29 '15 at 07:40

Use setTag in onBindViewHolder it will hold data and your images will not misplace.

@Override
    public void onBindViewHolder(ArticleViewHolder holder, int position) {
        holder.bind(mItems.get(position));
        holder.imgImage.setTag(mItems.get(position));
    }

OR

Maybe try your approach maybe it works

@Override
    public void onBindViewHolder(ArticleViewHolder holder, int position) {
        holder.bind.setTag(mItems.get(position));
    }

score 0 · Answer 4 · answered Oct 25 '16 at 13:04

Your view is reused.

Call Picasso.with(imgImage.getContext()).cancelRequest(imgImage); to cancel any existing requests of your ImageView.

Then you can load your image if article.getImage() != null and provide a fallback if your article image is null like imgImage.setImageDrawable(R.drawable.some_drawable);

Picasso image misplacement issue when using with RecyclerView

4 Answers4