Expandable Recyclerview in Android Kotlin.

Mostly we used recycler view in our project but the expandable recycler view gives up a very beautiful look so today we will learn expandable recycler view in android kotlin.

Let's start with the expandable recycler view. I am using view binding in this project so we need to add build Features in build.Gradle(:app) file.

android {
buildFeatures {
        viewBinding true
    }
}

Now let's start with the design part of the recycler view.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:padding="8dp"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"/>
</LinearLayout>

We need to create one more XML file for the recycler items.

item_expandable.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="2dp"
    app:cardElevation="3dp"
    app:cardUseCompatPadding="true"
    android:background="@color/white">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout"
        android:orientation="vertical"
        android:padding="8dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txt_name"
            android:textColor="@color/black"
            android:textSize="22sp"
            android:padding="16dp"
            android:text="@string/hello_name"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/expandable_layout"
            android:visibility="visible"
            tools:ignore="ExtraText">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/txt_date"
                android:textColor="@color/darkgray"
                android:textSize="18sp"
                android:padding="16dp"
                android:textStyle="bold"
                android:text="@string/date"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/txt_api"
                android:textColor="@color/darkgray"
                android:textSize="18sp"
                android:padding="16dp"
                android:textStyle="bold"
                android:text="@string/api_level"
                android:layout_alignParentEnd="true" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/description"
                android:textColor="@color/darkgray"
                android:textSize="18sp"
                android:padding="16dp"
                android:text="@string/description_text"
                android:layout_below="@id/txt_date"/>
        </RelativeLayout>

    </LinearLayout>
</androidx.cardview.widget.CardView>

In recycler view, we need to create a data class so here I create my data class for expandable recycler view.

Model. kt

package com.example.expandablerecyclerview

data class Model(val namehello: String, val date:String, val apilevel: String, val description : String, var expandable : Boolean = false)

After creating the model class now we need to create an adapter class for expandable recycler view.

ExpandableRecyclerAdapter.kt

package com.example.expandablerecyclerview

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.LinearLayout
import android.widget.RelativeLayout
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class ExpandableRecyclerAdapter (val modelList: List<Model>):
    RecyclerView.Adapter<ExpandableRecyclerAdapter.AdapterVH>()
{
    class AdapterVH(itemView: View): RecyclerView.ViewHolder(itemView) {
        var nameTxt : TextView = itemView.findViewById(R.id.txt_name)
        var dateTxt : TextView = itemView.findViewById(R.id.txt_date)
        var apiTxt : TextView = itemView.findViewById(R.id.txt_api)
        var descriptionTxt : TextView = itemView.findViewById(R.id.description)
        var linearLayout : LinearLayout = itemView.findViewById(R.id.linearLayout)
        var expendableLayout : RelativeLayout = itemView.findViewById(R.id.expandable_layout)

    }

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

    override fun onBindViewHolder(holder: AdapterVH, position: Int) {
        val model :Model = modelList[position]
        holder.nameTxt.text = model.namehello
        holder.dateTxt.text = model.date
        holder.apiTxt.text = model.apilevel
        holder.descriptionTxt.text = model.description

        val isExpandable: Boolean = modelList[position].expandable
        holder.expendableLayout.visibility = if (isExpandable) View.VISIBLE else View.GONE

        holder.linearLayout.setOnClickListener{
            val version = modelList[position]
            version.expandable = !model.expandable
            notifyItemChanged(position)
        }
    }

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

After creating the adapter class now we need to code for activity class.

MainActivity.kt

package com.example.expandablerecyclerview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.expandablerecyclerview.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    val modelList = ArrayList<Model>()

    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding= ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
        initData()
        setRecyclerView()
    }
    private fun setRecyclerView() {
        val adapter = ExpandableRecyclerAdapter(modelList)
        binding.recyclerView.adapter = adapter
        binding.recyclerView.setHasFixedSize(true)
    }

    private fun initData() {
        modelList.add(Model(
            "harshita",
            "25/09/2021",
            "1.0",
            "this is sample copy this is sample copy this is sample copy this is sample copy this is sample copy"
        ))

        modelList.add(Model(
            "harshita",
            "25/09/2021",
            "1.0",
            "this is sample copy this is sample copy this is sample copy this is sample copy"
        ))

        modelList.add(Model(
            "harshita",
            "25/09/2021",
            "1.0",
            "this is sample copy this is sample copy this is sample copy this is sample copy this is sample copy"
        ))

        modelList.add(Model(
            "harshita",
            "25/09/2021",
            "1.0",
            "this is sample copy this is sample copy this is sample copy this is sample copy"
        ))

        modelList.add(Model(
            "harshita",
            "25/09/2021",
            "1.0",
            "this is sample copy this is sample copy this is sample copy this is sample copy"
        ))
        modelList.add(Model(
            "harshita",
            "25/09/2021",
            "1.0",
            "this is sample copy this is sample copy this is sample copy this is sample copy "
        ))
    }
}

Github source code https://github.com/HarshitaBambure/ExpandableRecyclerView

That's it.