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.

--

--

Android Developer || WomenTech Global Ambassador at WomenTech Network. || Yoga Teacher || Member @WTM .

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Harshita Bambure

Android Developer || WomenTech Global Ambassador at WomenTech Network. || Yoga Teacher || Member @WTM .