Picasso loads pictures to the wrong imageview in a list adapter

Question

I'm loading an image from a server to a list view item using picasso like this:

public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View participantView;
    if(convertView == null) {
        participantView = inflater.inflate(R.layout.participant_item, parent, false);
    } else {
        participantView = convertView;
    }

    TextView textView = (TextView) participantView.findViewById(R.id.participantName);
    textView.setText(getItem(position).getName());
    ImageView imageView = (ImageView) participantView.findViewById(R.id.participantImage);
    String profilePic = getItem(position).getProfilePic();

    if(!profilePic.equals("None")) {
        Log.d("tom.debug", "creating picture for user: " + getItem(position).getName());
        Picasso.with(this.context)
            .load(urlToProfilePics + profilePic)
            .placeholder(R.drawable.sample_0)
            .resize(52, 52)
            .into(imageView);
    } else {
        //load the place holder into the image view
        Picasso.with(this.context).load(R.drawable.sample_0);
    }

    if(!getItem(position).isHere()) {
        imageView.setColorFilter(Color.DKGRAY, PorterDuff.Mode.MULTIPLY);
    }

    return participantView;
}

The debug log under the if statement only fires for users that really have a profile picture. (Users that don't have will get a value of None).

However, some of the other list view items (that don't have a profile pic) also get the picture loaded.

Another useful fact (I think): The items that get the bug changes when scrolling up and down the list.

I'm not sure what I'm missing here.

Answer 1

Make sure you call the cancelRequest everytime you are about to use Picasso on a getView() from the Adapter..

// 1st: reset the imageView
Picasso.with(this.context).cancelRequest(holder.imageView); 

// 2nd start a new load for the imageView
Picasso.with(this.context).load(...).into(holder.imageView); 

The reason is that the view you are reusing from the convertView parameter belongs to a previous row that was possibly already being loaded by Picasso for another picture.

This is only really necessary when using the convertView, if you have just inflated a new layout, it won't be needed..but you can call always to make your code easier.