RecyclerView lags while Scrolling-CodePudding

I have a recyclerView that loads songs from memory and when I scroll it lags, This is my ViewBinding.

override fun onBindViewHolder(holder: MyHolder, position: Int) {
        holder.titleView.text = musicList[position].title
        holder.albumName.text = musicList[position].artist
        holder.duration.text = formatDuration(musicList[position].length)
        Glide
            .with(context)
            .load(musicList[position].artUri)
            .diskCacheStrategy(DiskCacheStrategy.ALL)
            .apply(RequestOptions().placeholder(R.drawable.image_as_cover).centerCrop())
            .into(holder.imageView)
        holder.itemView.setOnClickListener {
            if (MainActivity.isSearching)
                sendIntent(position = position, parameter = "MusicAdapterSearch")
            else
                sendIntent(position = position, parameter = "MusicAdapter")
        }
    }

I noticed that when I removed image loading from binding i.e Glide, I did not lag, and it only first scrolled each time I open the app. How can I Handle the lag, is there any other library I should use or any caching-like thing? Here is my XML.

<?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_margin="5dp"
    android:theme="@style/Theme.Music.Font">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@ id/imageView"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentStart="true"
        android:layout_margin="5dp"
        android:contentDescription="@string/cover"
        android:src="@drawable/image_as_cover"
        app:shapeAppearance="@style/roundedImageView" />

    <LinearLayout
        android:id="@ id/linearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toStartOf="@ id/duration"
        android:layout_toEndOf="@ id/imageView"
        android:orientation="vertical">

        <TextView
            android:id="@ id/titleView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:fontFamily="@font/medium"
            android:maxLines="1"
            android:singleLine="true"
            android:text="@string/love_is_gone_by_slander_forever_on_love"
            android:textSize="15sp" />

        <TextView
            android:id="@ id/albumName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:fontFamily="@font/medium"
            android:maxLines="1"
            android:text="@string/albumName"
            android:textSize="12sp"
            android:theme="@style/Theme.Music.FontColor" />
    </LinearLayout>

    <TextView
        android:id="@ id/duration"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_margin="10dp"
        android:fontFamily="@font/medium"
        android:maxLines="1"
        android:text="@string/duration"
        android:textSize="11sp" />

</RelativeLayout>

CodePudding user response：

It is maybe due to high-quality images with glide

Try to resize it by adding request option with center crop

 RequestOptions myOptions = new RequestOptions()
                    .centerCrop() // or centerCrop
                    .override(800, 500);//your imageview frame size

            Glide.with(activity)
                    .applyDefaultRequestOptions(myOptions)
                    .load(list.get(position).appthumbnail)
                    .error(R.drawable.no_image_available)
                    .into(holder.ivImage);

hope it will help you

CodePudding user response：

The reason I asked for the view holder layout because it might be one of the reason resulting jank.

You may give a try using below XML to see whether the issue will be resolved.

(by replacing the relative layout and child linear layout to constraint layout)

e.g., view holder xml example

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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_margin="5dp"
    android:theme="@style/Theme.Music.Font">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@ id/imageView"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentStart="true"
        android:layout_margin="5dp"

        android:contentDescription="@string/cover"
        android:src="@drawable/image_as_cover"
        app:shapeAppearance="@style/roundedImageView"
        
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


    <View
        android:id="@ id/linearLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/imageView"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@ id/titleView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"

        android:maxLines="1"
        android:singleLine="true"
        android:fontFamily="@font/medium"
        android:text="@string/love_is_gone_by_slander_forever_on_love"
        android:textSize="15sp"
        android:text="123"
        app:layout_constraintTop_toTopOf="@id/linearLayout"
        app:layout_constraintBottom_toTopOf="@id/albumName"
        app:layout_constraintStart_toStartOf="@id/linearLayout"
        app:layout_constraintEnd_toEndOf="@id/linearLayout" />
    
    <TextView
        android:id="@ id/albumName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:fontFamily="@font/medium"
        android:maxLines="1"
        android:singleLine="true"
        android:text="@string/love_is_gone_by_slander_forever_on_love"
        android:textSize="15sp"

        app:layout_constraintTop_toBottomOf="@id/titleView"
        app:layout_constraintBottom_toTopOf="@id/duration"
        app:layout_constraintStart_toStartOf="@id/linearLayout"
        app:layout_constraintEnd_toEndOf="@id/linearLayout" />

    <TextView
        android:id="@ id/duration"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_margin="10dp"
        android:fontFamily="@font/medium"
        android:maxLines="1"
        android:text="@string/duration"
        android:textSize="11sp"

        app:layout_constraintTop_toBottomOf="@id/albumName"
        app:layout_constraintBottom_toBottomOf="@id/linearLayout"
        app:layout_constraintStart_toStartOf="@id/linearLayout"
        app:layout_constraintEnd_toEndOf="@id/linearLayout" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

REF

https://developer.android.com/topic/performance/vitals/render#common-jank

"If your view types look good, look at reducing the cost of your inflation. Reducing unnecessary container and structural Views can help – consider building itemViews with ConstraintLayout, which can make it easy to reduce structural Views. If you want to really optimize for performance, your items hierarchies are simple, and you don't need complex theming and style features, consider calling the constructors yourself – note though, that it's often not worth the tradeoff of losing the simplicity and features of XML."