Picasso + convertView: what am I doing wrong here?

Question

This is my getView().

I am obviously doing something wrong here, because the FIRST item of my list always shows no picture.

The problem here is with the convertview because if I don't recycle it, there is no problem.

Please what am I doing wrong??

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if(convertView==null) //IF I DELETE THIS IF EVERYTHING OK!!!
    convertView = inflater.inflate(R.layout.square, null);
    ImageView image = (ImageView) convertView.findViewById(R.id.background_image);
    if (data.get(position).isFollowed()) {
        int approprieteimage = getApproppreiateImage(data.get(position));
        Picasso.with(context).load(approprieteimage).centerCrop().error(R.drawable.no_image_available).transform(new TealTransformation(context)).fit().into(image);
    } else {
        int approprieteimage = getApproppreiateImage(data.get(position));
        Picasso.with(context).load(approprieteimage).centerCrop().error(R.drawable.no_image_available).fit().into(image);

    }
    AbsListView.LayoutParams layoutParams = new AbsListView.LayoutParams(width / 2, width / 2);
    convertView.setLayoutParams(layoutParams);
    return convertView;
}

Answer 1

Hi Lisa Anne please try this

ViewHolder h; //declare viewholder global

Your get view with viewholder

@Override
public View getView(int position, View convertView, ViewGroup parent) {

        if (convertView == null) {
            convertView = inflater.inflate(R.layout.square, parent, false);
            h = new ViewHolder();
            h.image = (ImageView) convertView.findViewById(R.id.background_image);
            convertView.setTag(h);
        }else{
            h = (ViewHolder)convertView.getTag();
        }
        //display in log and check if the the url of image is here and live.
        Log.e("checking","image file name"+data.get(position))
    if (data.get(position).isFollowed()) {
        int approprieteimage = getApproppreiateImage(data.get(position));
        Picasso.with(context).load(approprieteimage).centerCrop().error(R.drawable.no_image_available).transform(new TealTransformation(context)).fit().into(h.image);
    } else {
        int approprieteimage = getApproppreiateImage(data.get(position));
        Picasso.with(context).load(approprieteimage).centerCrop().error(R.drawable.no_image_available).fit().into(h.image);

    }
    AbsListView.LayoutParams layoutParams = new AbsListView.LayoutParams(width / 2, width / 2);
    convertView.setLayoutParams(layoutParams);

    return convertView;
}

Viewholder class

static class ViewHolder {
     ImageView  image;
  }

Your code might call findViewById() frequently during the scrolling of ListView, which can slow down performance. Even when the Adapter returns an inflated view for recycling, you still need to look up the elements and update them. A way around repeated use of findViewById() is to use the "view holder" design pattern.

A ViewHolder object stores each of the component views inside the tag field of the Layout, so you can immediately access them without the need to look them up repeatedly.

View holder is very useful technique especially when displaying images. Android Developer documentation

after that please show me your log error.

Answer 2

Why don't you just use the Holder pattern in your adapter?

if (convertView == null) {
   convertView = inflater.inflate(R.layout.square, null, false);
   holder = new Holder(convertView);
   convertView.setTag(holder);
}
else {
   holder = (Holder) convertView.getTag();
}

Create your holder like this (replace it with your views)

public static class Holder {
    private View row;
    private TextView title;

    public Holder(View row) {
       this.row = row;
    }

    public TextView getTitle() {
       if (title == null) {
          title = (TextView) row.findViewById(R.id.title);
       }
       return title;
    }
 }

You should be fine.

Answer 3

As I found in this link: picasso issue When recycle the view, you should call cancelRequest before load new request. So the code should be:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if(convertView==null) //IF I DELETE THIS IF EVERYTHING OK!!!
    convertView = inflater.inflate(R.layout.square, null);
    ImageView image = (ImageView) convertView.findViewById(R.id.background_image);
    Picasso.with(context).cancelRequest(image); // cancel old request
    if (data.get(position).isFollowed()) {
        int approprieteimage = getApproppreiateImage(data.get(position));
        Picasso.with(context).load(approprieteimage).centerCrop().error(R.drawable.no_image_available).transform(new TealTransformation(context)).fit().into(image);
    } else {
        int approprieteimage = getApproppreiateImage(data.get(position));
        Picasso.with(context).load(approprieteimage).centerCrop().error(R.drawable.no_image_available).fit().into(image);

    }
    AbsListView.LayoutParams layoutParams = new AbsListView.LayoutParams(width / 2, width / 2);
    convertView.setLayoutParams(layoutParams);
    return convertView;
}