Images in RecyclerView feels laggy (Using Picasso)

Question

I have a RecyclerView (It is actually a chat). The users can send images and text. The problem is when I scroll it feels laggy because the images are being loaded (If I go down and up, it takes to much time to Picasso to bring the image back again). And I'm using this line of code to do it.

 Picasso.with(itemView.getContext())
                    .load(((ChatMediaMessage) message).getUrl())
                    .into(imageView);

If I use the resize option is not laggy at all, but the images lose the image ratio obviously.

Picasso.with(itemView.getContext())
                    .load(((ChatMediaMessage) message).getUrl())
                    .resize(400, 400)
                    .into(imageView);

The layout of the ViewHolder looks like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginTop="8dp">

    <com.stfalcon.chatkit.utils.ShapeImageView
        android:id="@id/messageUserAvatar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_marginRight="8dp" />

    <com.google.android.flexbox.FlexboxLayout
        android:id="@id/bubble"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="@dimen/message_incoming_bubble_margin_right"
        android:layout_toRightOf="@id/messageUserAvatar"
        android:orientation="vertical"
        app:alignContent="stretch"
        app:alignItems="stretch"
        app:flexWrap="wrap"
        app:justifyContent="flex_end">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="centerInside" />

        <TextView
            android:id="@id/messageText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@id/messageTime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/messageText"
            android:layout_marginLeft="8dp"
            app:layout_alignSelf="center" />

    </com.google.android.flexbox.FlexboxLayout>

</RelativeLayout>

Answer 1

Don't use adjustViewBounds for dynamically-loaded images, because it will trigger a full relayout after each image completes loading. Set a fixed size to your ImageViews instead, and use centerInside scale mode if you want to preserve aspect ratio, or centerCrop if you prefer to crop the image. This tip applies to any image library.

Furthermore, when the ImageView has a fixed size, Picasso or Glide allows you to resize the image to it automatically, which reduces memory usage and improves performance. For Picasso, use:

Picasso.with(itemView.getContext())
                    .load(((ChatMediaMessage) message).getUrl())
                    .fit()
                    .centerCrop()
                    .into(imageView);

You can also use centerInside() instead of centerCrop().

Glide has a similar API. It will provide slightly better performance than Picasso because it caches the resized images to disk as well, while Picasso only caches the full-size images to disk and will have to resize them each time they are loaded back from disk.