CODEWITHSUNDEEP
androidperformancepicassoandroid-glideonscrolllistener
Johannes N
Johannes N

Reputation: 263

Stuttering effects during scroll using android Picasso or Glide

I tried both image frameworks Picasso and Glide to load images from SD and display them in ReceyclerView's list item's ImageView. The ReceyclerView list contains around 50 items and more.

Whenever I scroll down the list, the sroll movement is not fluent and sometimes starts stuttering which worsen the UX in my opinion. I only load images from disc (SD) inside a Fragment.

For Picasso I used following code:

Picasso.with(activity.getApplicationContext())
    .load(Constants.ABS_PATH_USER_IMAGE + user.getPicture() + ".jpg")
    .tag(PicassoOnScrollListener.TAG)
    .resize(100, 100)
    .centerCrop()
    .transform(new CircleTransform())
    .placeholder(R.drawable.default_user)
    .error(R.drawable.default_user)
    .into(holder.thumbNail);

The Picasso ScrollListener looks like:

public class PicassoOnScrollListener extends RecyclerView.OnScrollListener {
public static final Object TAG = new Object();
private static final int SETTLING_DELAY = 500;

private static Picasso sPicasso = null;
private Runnable mSettlingResumeRunnable = null;

public PicassoOnScrollListener(Context context) {
    if(this.sPicasso == null) {
        this.sPicasso = Picasso.with(context.getApplicationContext());
    }
}

@Override
public void onScrollStateChanged(RecyclerView recyclerView, int scrollState) {
    if(scrollState == RecyclerView.SCROLL_STATE_IDLE) {
        recyclerView.removeCallbacks(mSettlingResumeRunnable);
        sPicasso.resumeTag(TAG);

    } else if(scrollState == RecyclerView.SCROLL_STATE_SETTLING) {
        mSettlingResumeRunnable = new Runnable() {
            @Override
            public void run() {
                sPicasso.resumeTag(TAG);
            }
        };

        recyclerView.postDelayed(mSettlingResumeRunnable, SETTLING_DELAY);

    } else {
        sPicasso.pauseTag(TAG);
    }
}}

To add ScrollListener to the ReceyclerView I did following:

myRecyclerView.addOnScrollListener(new PicassoOnScrollListener(getContext()));

For Glide I simply used follwong code sample:

Glide
    .with(mActivity.getApplicationContext())
    .load(Constants.ABS_PATH_USER_IMAGE + author.getPicture() + ".jpg")
    .centerCrop()
    .placeholder(R.drawable.default_user)
    .crossFade()
    .diskCacheStrategy(DiskCacheStrategy.ALL)
    .transform(new GlideCircleTransform(mActivity.getApplicationContext()))
    .into(holder.thumbNailAuthor);

Have you got any ideas how to achieve a smooth scroll movement?

Upvotes: 3

Views: 1569

Answers (2)

lisandro101
lisandro101

Reputation: 474

Try adding this to your RecyclerView:

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

Besides I used .Fit() intead of .Resize() and removed .CenterCrop(). Now it works like a charm.

Source

Upvotes: 3

Raj
Raj

Reputation: 50

Try to use 

android:adjustViewBounds="true"

in imageView in layout

Upvotes: 2

Related Questions