RecyclerView laggy scrolling

Question

I am loading 400x200 images in RecyclerView, but scrolling is laggy on 2k devices. I am using Picasso for loading images from resource.

As you can see in the demo images are blurry on 2k screen, but if I load higher resolution images the situation gets worse. How to fix this, I am not even loading large image, its 400x200 ?

Demo

Here is my code card_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    card_view:cardPreventCornerOverlap="false"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    card_view:cardCornerRadius="2dp">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/rel">

        <ImageView
            android:id="@+id/cardimage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@drawable/p7"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="title"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="16dp"
            android:paddingBottom="24dp"
            android:textStyle="bold"
            android:textSize="24sp"
            android:id="@+id/cardtitle"
            android:layout_gravity="center_vertical"/>

    </LinearLayout>

</android.support.v7.widget.CardView>

Myadapter Code

public class CardAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> {

private Context mContext;
List<Flower> list = new ArrayList<>();

public CardAdapter(Context mContext, List<Flower> list) {
    this.mContext = mContext;
    this.list = list;

}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)   {

    View itemView = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.card_view, parent, false);
    return new ViewHolder(itemView);
}

@Override
public void onBindViewHolder(ViewHolder holder, int position)  {

    holder.Flower=getItem(position);
    holder.cardtitle.setText(list.get(position).name);

    Picasso.with(mContext)
            .load(list.get(position).id)
            .placeholder(R.drawable.ic_launcher)
            .into(holder.cardimage);
}

@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
    super.onAttachedToRecyclerView(recyclerView);
}

@Override
public int getItemCount() {
    return list.size();
}

public Flower getItem(int i) {
    return list.get(i);
}

public class ViewHolder extends RecyclerView.ViewHolder {

    ImageView cardimage;
    TextView cardtitle;
    Flower Flower;

    public ViewHolder(View itemView) {
        super(itemView);

        cardimage = (ImageView) itemView.findViewById(R.id.cardimage);
        cardtitle = (TextView) itemView.findViewById(R.id.cardtitle);
    }
}
}

UPDATE: I am loading images from resource, I am not downloading nothing

Here is my array

 private void initializeData() {
    flowers = new ArrayList<>();
    flowers.add(new Flower("Flower 1", R.drawable.p8));
    flowers.add(new Flower("Flower 2", R.drawable.p10));
    flowers.add(new Flower("Flower 3", R.drawable.p11));
    flowers.add(new Flower("Flower 4", R.drawable.p8));
    flowers.add(new Flower("Flower 5", R.drawable.photo2));
    flowers.add(new Flower("Flower 6", R.drawable.photo6));
    flowers.add(new Flower("Flower 7", R.drawable.p12));
    flowers.add(new Flower("Flower 8", R.drawable.p9));
    flowers.add(new Flower("Flower 9", R.drawable.p8));
    flowers.add(new Flower("Flower 10", R.drawable.p8));
    flowers.add(new Flower("Flower 11", R.drawable.p8));
    flowers.add(new Flower("Flower 12", R.drawable.p10));
}

UPDATE 2 : Guys I fixed most of the lag by setting adapter.setHasStableIds(true) , but app is still laggy on the first scroll while images are not loaded yet, how to fix that ?

UPDATE 3: I just tried loading images from web and everything seems smooth, probably there is some problem with loading images from resource .

Ok, thank you guys, I am gonna load my images from web.

Answer 1

if you are using two or more recycler views like (RecyclerView and NestedView) try this

recyclerView.setNestedScrollingEnabled(false);

Source : Recyclerview inside Nested Scrollview scroll but does not fast scroll like normal Recyclerview or Nested Scrollview

Answer 2

Is RecyclerView.setHasFixedSize() set to true? I'm not able to reproduce this lag...can you please post the whole project on git? Check this out, maybe it can help you: http://antonioleiva.com/recyclerview/

Answer 3

I Believe that sometimes you may piss off when only trying some static images in drawable to display your recycler view. And it happens extremely lagging.

Why? You may not get this issue when using some library to load an image from url (Picasso, Glide, ...), but what happens with the same image, the same size, and it's right in your drawable (not need to download at all). And after a while, I figure out, android did some trick to resize an image in drawable for us to get a proper image in different resolution devices. So my suggestion is to use drawable-nodpi to store your image in order for android not to interfere with our images.

Answer 4

This is because the image is taking time to load. Firstly, change your code for loading image as the below one...

Picasso.get().load(list.get(position).id).fit().centerCrop()
                .placeholder(R.drawable.ic_launcher)
                .into(holder.cardimage);

Then, before setting the adapter on recyclerview to the instance of CardAdapter inside MainActivity add this line..

        yourAdapter_name.setHasStableIds(true);

One more tip...If anyone is using large drawables (xxxhdpi, xxhdpi ), first convert them into mdpi or ldpi . This will also improve the performance a lot and also reduces the apk size.You can use this website NativeScript Image Builder