Picasso refreshing images in ListView each time I scroll

Question

I have a ListView which keeps refreshing images each time I scroll up and down

I am picking image urls from JSON which I supply to Picasso.

I am using Picasso to load images.

The total size of the images all together is 516kb, knowing that, I'm not thinking its a cache problem because image sizes are actually small.

Honestly, I have researched over this issue on S.O, and not seen any good solution yet.

Maybe the issue isn't related to Picasso, maybe my implementation is actually wrong. Please I need more knowledge on this.

This is my code below.

public class ImageAdapter extends ArrayAdapter<Genres> {

    ArrayList<Genres> movieList;
    TextView movietitle, moviecategory;

    LayoutInflater vi;
    int Resource;
    ViewHolder holder;

    private Context mContext;

    public ImageAdapter(Context context, int resource, ArrayList<Genres> objects) {
        super(context, resource, objects);
        vi = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        Resource = resource;
        movieList = objects;
        mContext = context;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        View v = convertView;
        ImageView imageView;
        if (v == null) {
            holder = new ViewHolder();
            v = vi.inflate(Resource, null);

            holder.imageview = (ImageView) v.findViewById(R.id.movieimage);

            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(96, 128);
            holder.imageview.setLayoutParams(layoutParams);
            holder.imageview.setScaleType(ImageView.ScaleType.CENTER_CROP);
            holder.imageview.setPadding(4, 4, 4, 4);
            holder.imageview.setAdjustViewBounds(true);

            holder.movietitle = (TextView) v.findViewById(R.id.movietitle);
            holder.moviecategory = (TextView) v.findViewById(R.id.moviecategory);

            v.setTag(holder);

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

        Picasso.with(mContext)
        .load(movieList.get(position).getImage())
        .noFade()
        .into(holder.imageview);

        holder.movietitle.setText(movieList.get(position).getMoviename());
        holder.moviecategory.setText(movieList.get(position).getCategory());

        return v;
    }

    static class ViewHolder {
        public ImageView imageview;
        public TextView movietitle;
        public TextView moviecategory;
    }

}

Answer 1

I think the problem that you have here is that you made your holder object an instance variable of of your adapter class, so in effect you have only a single view holder.

Try removing your instance variable declaration

LayoutInflater vi;
int Resource;
ViewHolder holder;    // remove or comment out this line 

private Context mContext;

and then make both the new view holder and the one returned by the getTag()

local variables.

So these two changes:

first:

if (v == null) {
   // holder = new ViewHolder();
   ViewHolder holder = new ViewHolder();  // replace above commented line with this line
   v = vi.inflate(Resource, null);

and then in your else clause :

    } else {
    //    holder = (ViewHolder) v.getTag();
          ViewHolder holder = (ViewHolder) v.getTag(); // replace above commented line with this one.
    }

Now the holder stored by the layout will be different views rather than the one and only one that you currently have.

As a reference here is an adapter that I use with Picasso. There are several differenced but I think the main thing is your use of a single instance variable for the viewHolder variable.

public class FollowedUsersListAdapter extends ArrayAdapter<UserListItem> {
    private final Context context;
    private final ArrayList<UserListItem> values;

    public FollowedUsersListAdapter(Context context, ArrayList<UserListItem> values) {
        super(context, R.layout.row_layout, values);
        this.context = context;
        this.values = values;
    }

    static class ViewHolder {
        public TextView userNameView;
        public TextView lastPostView;
        public TextView postedTimeAgoView;
        public ImageView imageView;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        View followedUserView = convertView;
        if (followedUserView == null) {
            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            followedUserView = inflater.inflate(R.layout.followed_user_item_layout, parent, false);
            ViewHolder viewHolder = new ViewHolder();
            viewHolder.userNameView = (TextView) followedUserView.findViewById(R.id.user_name);
            viewHolder.lastPostView = (TextView) followedUserView.findViewById(R.id.last_post);
            viewHolder.postedTimeAgoView = (TextView) followedUserView.findViewById(R.id.posted_time_ago);
            viewHolder.imageView = (ImageView) followedUserView.findViewById(R.id.user_icon);
            followedUserView.setTag(viewHolder);
        }

        ViewHolder holder = (ViewHolder) followedUserView.getTag();
        holder.userNameView.setText(values.get(position).getName());
        holder.lastPostView.setText(values.get(position).getLastMicropost());
        holder.postedTimeAgoView.setText(values.get(position).getPostedTimeAgo());
        ImageView imageView = holder.imageView;
        String gravatarURL = "http://www.gravatar.com/avatar/"
                + values.get(position).getGravatarId();
        Picasso.with(context).load(gravatarURL).into(imageView);


        return followedUserView;
    }

}