Multiple RecyclerView(two) has lag - android

Question

I have a list that load in RecyclerView with CardView and in CardView I have a RecyclerView that have (max) 10 items, I load it now, but it has lag:

My First LessonContentListAdapter.kt:

class LessonContentListAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    private var onItemClickListener: ((LessonsContentList) -> Unit)? = null

    fun setOnItemClickListener(listener: (LessonsContentList) -> Unit) {
        onItemClickListener = listener
    }

    private val callback = object : DiffUtil.ItemCallback<LessonsContentList>() {
        override fun areItemsTheSame(
            oldItem: LessonsContentList,
            newItem: LessonsContentList
        ): Boolean {
            return oldItem.id == newItem.id
        }

        override fun areContentsTheSame(
            oldItem: LessonsContentList,
            newItem: LessonsContentList
        ): Boolean {
            return oldItem == newItem
        }

    }
    val differ = AsyncListDiffer(this, callback)


    override fun getItemCount(): Int {
        return differ.currentList.size
    }

    inner class LessonContentListItems(private val lessonContentListItemsBinding: LessonContentListItemsBinding) :
        RecyclerView.ViewHolder(lessonContentListItemsBinding.root) {
        fun bind(lessons: LessonsContentList) {
            lessonContentListItemsBinding.txtContentTitleO.text = lessons.titleOriginal
            lessonContentListItemsBinding.txtContentTitleT.text = lessons.titleTranslate
            lessonContentListItemsBinding.txtTime.text = lessons.timeLaps
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        val view =
            LessonContentListItemsBinding.inflate(
                LayoutInflater.from(parent.context),
                parent,
                false
            )
        return LessonContentListItems(view)
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        (holder as LessonContentListItems).bind(differ.currentList[position])
        val childLessonContentListVectorsAdapter =
            ChildLessonContentListVectorsAdapter(
                differ.currentList[position].imgLevels
            )

        holder.itemView.recyclerLessonsContentListVectors.layoutManager = LinearLayoutManager(
            holder.itemView.recyclerLessonsContentListVectors.context,
            LinearLayoutManager.HORIZONTAL,
            false
        )
        holder.itemView.recyclerLessonsContentListVectors.setHasFixedSize(true)
        holder.itemView.recyclerLessonsContentListVectors.adapter =
            childLessonContentListVectorsAdapter
    }
}

Second ChildLessonContentListVectorsAdapter.kt:

class ChildLessonContentListVectorsAdapter(imgLevels: List<ImgLevelsDetalis>) :
    RecyclerView.Adapter<ChildLessonContentListVectorsAdapter.MyViewHolder>() {
    var childModelArrayList: List<ImgLevelsDetalis> = imgLevels

    class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        var heroImage: ImageView

        init {
            heroImage = itemView.findViewById(R.id.imgHaveStudied)
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val view: View = LayoutInflater.from(parent.context)
            .inflate(R.layout.child_lessons_content_list, parent, false)
        return MyViewHolder(view)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        val currentItem: ImgLevelsDetalis = childModelArrayList[position]
        holder.heroImage.setImageResource(currentItem.img)
    }

    override fun getItemCount(): Int {
        return childModelArrayList.size
    }
}

First fragment_lesson_content_list.xml:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:clickable="true"
    android:fitsSystemWindows="true"
    android:focusable="true"
    tools:context=".presentation.ui.lessoncontentlist.LessonContentListFragment">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbarLessonContentList"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/purple_500"
        android:contentInsetStart="0dp"
        android:contentInsetLeft="0dp"
        android:minHeight="?attr/actionBarSize"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center">

            <ImageButton
                android:id="@+id/imgBackContent"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:layout_centerVertical="true"
                android:background="@null"
                android:paddingLeft="10dp"
                android:src="@drawable/ic_baseline_arrow_back_24" />

            <TextView
                android:id="@+id/txtTitleContent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:textColor="@color/white"
                android:textStyle="bold" />

        </RelativeLayout>
    </androidx.appcompat.widget.Toolbar>


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerLessonsContentList"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbarLessonContentList" />
</androidx.constraintlayout.widget.ConstraintLayout>

second lesson_content_list_items.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        card_view:cardBackgroundColor="@color/purple_700"
        card_view:cardCornerRadius="4dp"
        card_view:layout_constraintLeft_toLeftOf="parent"
        card_view:layout_constraintRight_toRightOf="parent"
        card_view:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:weightSum="10">

            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="5"
                android:orientation="horizontal"
                android:weightSum="10">

                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="8"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/txtContentTitleO"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Grammer"
                        android:textColor="@color/white"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/txtContentTitleT"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="مکالمه"
                        android:textColor="@color/white" />
                </androidx.appcompat.widget.LinearLayoutCompat>

                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="2"
                    android:gravity="right"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/txtTime"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_margin="5dp"
                        android:text="2Min"
                        android:textColor="@color/white"
                        android:textStyle="bold" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="5dp"
                        android:adjustViewBounds="true"
                        android:scaleType="center"
                        android:src="@drawable/ic_baseline_timelapse_24" />
                </androidx.appcompat.widget.LinearLayoutCompat>

            </androidx.appcompat.widget.LinearLayoutCompat>

            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_marginBottom="5dp"
                android:gravity="right"
                android:orientation="horizontal">

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/recyclerLessonsContentListVectors"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:orientation="horizontal" />
            </androidx.appcompat.widget.LinearLayoutCompat>
        </androidx.appcompat.widget.LinearLayoutCompat>
    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

Third child_lessons_content_list.xml:

<?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="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right">

    <ImageView
        android:id="@+id/imgHaveStudied"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Parth Umaraniya · Accepted Answer · 2022-05-21 09:19:16Z

2

Firstly, you can use setInitialItemPrefetchCount() for a prefetching feature for nested RecyclerView. for more information please check this article

I think, the main reason, loading images from the server blocks the main thread. You can do this asynchronously. please check this article too.

answered May 21, 2022 at 9:19

Parth Umaraniya

456 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jo jo Over a year ago

How can I use setInitialItemPrefetchCount() in my code?

jo jo Over a year ago

Please don't copy/paste(stackoverflow.com/a/52332064/10211127)

Collectives™ on Stack Overflow

Multiple RecyclerView(two) has lag - android

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related