Skip to main content

How to implement nested RecyclerViews in Kotlin Android

How to implement nested RecyclerViews in Kotlin Android.

Here's a detailed step-by-step tutorial on how to implement nested RecyclerViews in Kotlin for Android:

Step 1: Create a new Android project​

To get started, open Android Studio and create a new Android project. Choose an appropriate project name and set the minimum SDK version to at least 21.

Step 2: Add RecyclerView dependency​

In your project's build.gradle file, add the RecyclerView dependency to use RecyclerView in your app. Add the following line to the dependencies block:

implementation 'androidx.recyclerview:recyclerview:1.2.1'

Sync your project to download the necessary dependencies.

Step 3: Create the outer RecyclerView layout​

In your app's layout XML file, create the layout for the outer RecyclerView. For example, you can create a LinearLayout with vertical orientation:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/outerRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" />

Step 4: Create the item layout for the outer RecyclerView​

Create a new layout XML file for the item layout of the outer RecyclerView. This layout will contain the inner RecyclerView. For example, you can create a CardView:

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/outerItemCardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">

    <!-- Inner RecyclerView will be added here -->

</androidx.cardview.widget.CardView>

Step 5: Create the inner RecyclerView layout​

Create a new layout XML file for the item layout of the inner RecyclerView. This layout will represent each item of the inner RecyclerView. For example, you can create a simple TextView:

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/innerItemTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Step 6: Create the adapter for the inner RecyclerView​

Create a new Kotlin class for the adapter of the inner RecyclerView. Extend the RecyclerView.Adapter class and implement the necessary methods. This adapter will bind the data to the inner RecyclerView.

class InnerAdapter(private val items: List<String>) : RecyclerView.Adapter<InnerAdapter.ViewHolder>() {

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val textView: TextView = itemView.findViewById(R.id.innerItemTextView)
    }

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = items[position]
        holder.textView.text = item
    }

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

Step 7: Create the adapter for the outer RecyclerView​

Create a new Kotlin class for the adapter of the outer RecyclerView. Extend the RecyclerView.Adapter class and implement the necessary methods. This adapter will bind the data to the outer RecyclerView and handle the creation of the inner RecyclerView.

class OuterAdapter(private val items: List<List<String>>) : RecyclerView.Adapter<OuterAdapter.ViewHolder>() {

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val innerRecyclerView: RecyclerView = itemView.findViewById(R.id.innerRecyclerView)
    }

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val innerItems = items[position]
        val innerAdapter = InnerAdapter(innerItems)
        holder.innerRecyclerView.apply {
            layoutManager = LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false)
            adapter = innerAdapter
        }
    }

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

Step 8: Set up the outer RecyclerView in the activity or fragment​

In your activity or fragment, set up the outer RecyclerView by finding the RecyclerView from the layout and creating an instance of the outer adapter. Set the layout manager and adapter for the outer RecyclerView.

class MainActivity : AppCompatActivity() {

    private lateinit var outerRecyclerView: RecyclerView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        outerRecyclerView = findViewById(R.id.outerRecyclerView)
        outerRecyclerView.layoutManager = LinearLayoutManager(this)
        outerRecyclerView.adapter = OuterAdapter(getData())
    }

    private fun getData(): List<List<String>> {
        // Return your data for the outer and inner RecyclerViews
        // This can be a list of lists or a multidimensional array
    }
}

Step 9: Run the app​

Build and run your app on an emulator or a physical device. You should now see the nested RecyclerViews in action, with the inner RecyclerViews displaying the data inside the outer RecyclerView items.

That's it! You have successfully implemented nested RecyclerViews in Kotlin for Android. You can customize the layouts, adapters, and data as per your requirements to achieve the desired functionality.