Picasso Images Reloading on Scroll in listview

Question

I am having a problem where any time I scroll through my listview,images seem to keep on reloading themselves and it makes the listview lag a lot. What can I do to prevent this from happening,I've done this in my listview before and it doesn't do this.

public class PostsAdapter extends BaseAdapter{
     public List<PostList> postList;
     protected Context context;

     public void add(PostList object,int position) {
            postList.add(position,object);
        }

        public PostsAdapter(Context context) {
            this.context = context;
            postList = new ArrayList<PostList>();
        }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return postList.size();
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return postList.get(position);
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        ViewHolder holder;
        if(convertView == null){
            convertView = LayoutInflater.from(context).inflate(R.layout.posts_list, null);
            holder = new ViewHolder();
            holder.image = (ImageView)convertView.findViewById(R.id.postImage);
            holder.username = (TextView)convertView.findViewById(R.id.postUsername);
            convertView.setTag(holder);
        }else{
            holder = (ViewHolder)convertView.getTag();
        }
        holder.username.setText(postList.get(position).user);
        Picasso.with(context).load(postList.get(position).postPicture).into(holder.image);

        return convertView;
    }
static class ViewHolder{
        ImageView image;
        TextView username;
    }

Answer 1

When a user fires a fling MotionEvent , application is downloading images, it needs to stop, concentrate of scrolling, and then get back to downloading images again as soon as motion stops. The effects of doing this is almost magical.

Also, Google gave out code to show how it's done. You can find it here - https://github.com/google/iosched

Here's a quick snippet of how do you add a scroll listener to stop and start the queue.

listView.setOnScrollListener(new OnScrollListener() {
    @Override
    public void onScrollStateChanged(AbsListView listView, int scrollState) {
        // Pause disk cache access to ensure smoother scrolling
        if (scrollState == AbsListView.OnScrollListener.SCROLL_STATE_FLING) {
            imageLoader.stopProcessingQueue();
        } else {
            imageLoader.startProcessingQueue();
        }
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
            // TODO Auto-generated method stub
    }
});

Answer 2

   public class PostsAdapter extends BaseAdapter
    {
       public List<PostList> postList;
       protected Context context;

    public PostsAdapter(Context context,ArrayList<PostList> List) 
    {
        this.context = context;
        postList = List;
    }

    @Override
    public int getCount() 
     {
    // TODO Auto-generated method stub
    return postList.size();
    }

@Override
public Object getItem(int position) {
    // TODO Auto-generated method stub
    return postList.get(position);
}

@Override
public long getItemId(int position) {
    // TODO Auto-generated method stub
    return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    ViewHolder holder;
    if(convertView == null){
        convertView = LayoutInflater.from(context).inflate(R.layout.posts_list, null);
        holder = new ViewHolder();
        holder.image = (ImageView)convertView.findViewById(R.id.postImage);
        holder.username = (TextView)convertView.findViewById(R.id.postUsername);
        convertView.setTag(holder);
    }else{
        holder = (ViewHolder)convertView.getTag();
    }
    holder.username.setText(postList.get(position).user);
    Picasso.with(context).load(postList.get(position).postPicture).into(holder.image);

    return convertView;
}
   static class ViewHolder
{
    ImageView image;
    TextView username;
}

Answer 3

I had a similar issue, and combined the tips from Detecting the scrolling direction in the adapter (up/down) and Fetch images with Callback in Picasso?. That is, I detected whether the user was scrolling up or down by comparing the last position accessed by the adapter to the current position, and loaded the next images they would encounter into an empty target to warm the cache.

Answer 4

Use resize with picasso

                 Picasso.with(context)
                .load(imageURL)
                .tag(context)
                .placeholder(R.drawable.kanye8080s)
                .error(R.drawable.stadiumarcadium)
                .into(imageView)
                .resize(x,y);

//This would definitely help