How to implement collapsible items in a RecyclerView in Kotlin Android

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

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

Step 1: Create a new Android project

Start by creating a new Android project in Android Studio. Choose an appropriate name and select the minimum SDK version that you want to support.

Step 2: Add RecyclerView to your layout file

Open the activity_main.xml file and add a RecyclerView to your layout. Set its width and height to match_parent. Give it an id, for example, "recyclerView".

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

Step 3: Create a layout file for your item

Create a new layout file called "item_layout.xml" to define the layout for each item in the RecyclerView. Customize it according to your requirements. For this tutorial, we will add a TextView and an ImageView to each item.

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

    <TextView
        android:id="@+id/titleTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:padding="16dp"/>

    <ImageView
        android:id="@+id/expandImageView"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_expand"
        android:layout_gravity="end"
        android:padding="16dp"/>

</LinearLayout>

Step 4: Create a data model class

Create a data model class to represent the data for each item in the RecyclerView. For this tutorial, we will create a simple "Item" class with a title and a boolean flag to track whether the item is expanded or collapsed.

data class Item(val title: String, var isExpanded: Boolean = false)

Step 5: Create an adapter class

Create an adapter class that extends RecyclerView.Adapter. This adapter will be responsible for binding the data to the RecyclerView and creating the necessary views.

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

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val titleTextView: TextView = itemView.findViewById(R.id.titleTextView)
        val expandImageView: ImageView = itemView.findViewById(R.id.expandImageView)
    }

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

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

        // Set the visibility of expandImageView based on the isExpanded flag
        if (currentItem.isExpanded) {
            holder.expandImageView.setImageResource(R.drawable.ic_collapse)
        } else {
            holder.expandImageView.setImageResource(R.drawable.ic_expand)
        }

        // Set a click listener on the expandImageView to toggle the item's expanded state
        holder.expandImageView.setOnClickListener {
            currentItem.isExpanded = !currentItem.isExpanded
            notifyDataSetChanged()
        }
    }

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

Step 6: Initialize and set up the RecyclerView

In your MainActivity, initialize the RecyclerView and set up the adapter.

class MainActivity : AppCompatActivity() {

    private lateinit var recyclerView: RecyclerView
    private lateinit var itemAdapter: ItemAdapter

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

        recyclerView = findViewById(R.id.recyclerView)
        recyclerView.layoutManager = LinearLayoutManager(this)

        val items = listOf(
            Item("Item 1"),
            Item("Item 2"),
            Item("Item 3")
        )

        itemAdapter = ItemAdapter(items)
        recyclerView.adapter = itemAdapter
    }
}

Step 7: Run the app

Build and run the app on an emulator or a physical device. You should see a list of items in the RecyclerView. Clicking on the expandImageView for each item should toggle its expanded state.

Congratulations! You have successfully implemented collapsible items in a RecyclerView in Kotlin for Android.