Recyclerview painfully slow to load cached images form Picasso

Question

Setting recyclerView parameters as below solved my stutter problem :

recyclerView.setHasFixedSize(true);
recyclerView.setItemViewCacheSize(20);
recyclerView.setDrawingCacheEnabled(true);
recyclerView.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);

i hope it helps someone else too.

Use fit().

Picasso.with(context)
        .load(file)
        .fit()
        .centerCrop()
        .into(imageView);

The fit() actually resizes the image to fit into the imageView's bounds. This doesn't load the full image and smoothens the scrolling.

I mixed the answer from @ergunkocak and @Mangesh Ghotage, using this works great:

recyclerView.setHasFixedSize(true);
recyclerView.setItemViewCacheSize(20);
recyclerView.setDrawingCacheEnabled(true);

And this on every image:

Picasso.with(context)
        .load(file)
        .fit()
        .into(imageView);

besides you could set Picasso to use a single instance like this:

Picasso.setSingletonInstance(picasso);

And finally enabling the cache indicators will give you clues on what's going wrong:

Picasso  
    .with(context)
    .setIndicatorsEnabled(true);

More about Picasso

I have encountered this issue recently, and yes you are right. Picasso is a good library for showing images from sdcard but it has some issues regarding cache if you are fetching images online that is why you see a place holder image while scrolling. I tried different things and the issue was not resolved.

There is an alternate library i.e. "AQuery" which is very good for fetching and caching images from network.

http://code.google.com/p/android-query/

The main advantages of AQuery/Android Query is that you can clear the cache, no lag while scrolling and quite effective for caching images and not showing place holder images while scrolling.

I resolved my issue by removing picaaso and using Aquery. Its just a one line replacement and you are done with your issue.

(new AQuery(mContext)).id(exploreViewHolder.getvProfilePic()).image(item.getUserProfilePicUrl().trim(), true, true, device_width, R.drawable.profile_background, aquery.getCachedImage(R.drawable.profile_background),0);

Besides you can easily shift from picasso to AQuery as there is no such thing which is available in picasso but not in AQuery and the syntax is almost the same. So I would recommend you to use AQuery, until this is fixed by picasso.

Picasso automatically cache images in two levels:

• disk cache (this is actually NOT in picasso but in the network layer that picasso use)
• memory cache

They are bot initialized with defaults that suites most applications.

When the memory cache is getting too big the oldest used bitmap is removed from memory cache (which by default is 1/7 of the available heap space).

I think what's happening here is that you are close to the memory limit of the cache and thus images are decoded again every time you need them again.

See here: Android Picasso Configure LruCache Size

But I advice AGAINST increasing the memory cache size unless you really are re-sizing the images to the actual size you use..

I think the problem with your code is this:

.resize(deviceWidth, deviceWidth)

are you sure you really need an image of that size? What do you store in PrefUtils ? does it get updated when the device rotate? (landscape vs portrait)

If you need smaller images try to pass the resize the actual size of the image you are gonna use. If you don't know (computed at runtime with the layout) do with an approximation or write your code to obtain the actual size (I usually write custom classes extending ImageView for these stuff).

If you really need the images at that size just increase the cache size (see link above) and you should be good to go.

I can't verify the correctness of this solution, but I was facing this problem as well and approached it following this idea:

@Override
public void onBindViewHolder(ViewHolder viewHolder, final int i) {

...

    if(mImageView.getDrawable() == null)
         Picasso.with(context)
            .load(path)
            .error(errorResId)
            .tag(tag)
            .into(mImageView);
...  
}

It is intended to forbid Picasso from loading anything unless the ImageView has nothing to display.

Use Glide. it caches the resized image, not the full-size image, unlike Picasso. In this approach, you will lose image quality. If you want to retain the full-size quality, I suggest you use Glide to load and save the image into file storage, so whenever you need the full-size image, just access that image from file storage.