Skip to main content

How to implement expandable items in a RecyclerView in Kotlin Android

How to implement expandable items in a RecyclerView in Kotlin Android.

Here's a step-by-step tutorial on how to implement expandable items in a RecyclerView in Kotlin for Android.

Step 1: Set up the project​

Create a new Android project in Android Studio and add the necessary dependencies. Open the build.gradle (Module: app) file and add the following dependencies:

implementation 'androidx.recyclerview:recyclerview:1.2.0'

Step 2: Create the RecyclerView layout​

In the layout file (e.g., activity_main.xml), add a RecyclerView widget:

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

Step 3: Create the item layout​

Create a layout file for the expandable item (e.g., item_expandable.xml). Customize it according to your needs. For example:

<LinearLayout
    ...
    android:orientation="vertical"
    >

    <TextView
        android:id="@+id/titleTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

    <LinearLayout
        android:id="@+id/expandableLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        >

        <!-- Content of the expandable item -->

    </LinearLayout>
</LinearLayout>

Step 4: Create the RecyclerView Adapter​

Create a new Kotlin class for the RecyclerView Adapter (e.g., ExpandableAdapter). Extend the RecyclerView.Adapter class and implement the necessary methods:

class ExpandableAdapter(private val items: List<Item>) :
    RecyclerView.Adapter<ExpandableAdapter.ViewHolder>() {

    // ViewHolder class
    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val titleTextView: TextView = itemView.findViewById(R.id.titleTextView)
        val expandableLayout: LinearLayout = itemView.findViewById(R.id.expandableLayout)
    }

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

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

        // Set click listener to expand/collapse the item
        holder.titleTextView.setOnClickListener {
            val visibility = if (holder.expandableLayout.visibility == View.VISIBLE) View.GONE else View.VISIBLE
            holder.expandableLayout.visibility = visibility
        }

        // Bind the content of the expandable item here
    }

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

Step 5: Create the data model​

Create a data class to represent the items in the RecyclerView (e.g., Item):

data class Item(val title: String, val content: String)

Step 6: Initialize the RecyclerView​

In the activity or fragment where you want to display the RecyclerView, initialize it in the onCreate method:

val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
recyclerView.layoutManager = LinearLayoutManager(this)
val adapter = ExpandableAdapter(getItems())
recyclerView.adapter = adapter

Note: Replace getItems() with your own method to retrieve the list of items.

Step 7: Run the app​

Build and run the app on an Android device or emulator. You should see the RecyclerView with expandable items. Clicking on the title of an item should expand or collapse its content.

That's it! You have successfully implemented expandable items in a RecyclerView in Kotlin for Android. You can customize the layout and behavior according to your specific requirements.