How to implement a collapsible section in a ListView in Kotlin Android

How to implement a collapsible section in a ListView in Kotlin Android.

Here's a detailed step-by-step tutorial on how to implement a collapsible section in a ListView in Kotlin for Android.

Step 1: Set up your project

Create a new Android project in Android Studio and set up the necessary dependencies in your app's build.gradle file. Make sure you have the following dependencies:

implementation 'androidx.appcompat:appcompat:1.3.0'
implementation 'androidx.recyclerview:recyclerview:1.2.1'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

Step 2: Create the layout for the collapsible section Create a new layout file for the collapsible section. In this example, we'll use a LinearLayout with a TextView for the section header and another LinearLayout for the content. The content LinearLayout will be initially hidden and will only be shown when the section header is clicked. Here's an example layout file (collapsible_section_layout.xml):

<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/section_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Section Header"
        android:clickable="true"
        android:focusable="true"
        android:background="?attr/selectableItemBackground"
        android:textAppearance="?android:attr/textAppearanceMedium" />

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

        <!-- Content views go here -->

    </LinearLayout>

</LinearLayout>

Step 3: Create the adapter for the ListView

Create a new class for your ListView adapter. Extend the RecyclerView.Adapter class and implement the necessary methods. In the adapter, you'll need to keep track of the collapsed/expanded state of each section. Here's an example adapter class (ListViewAdapter.kt):

class ListViewAdapter(private val sections: List<Section>) :
    RecyclerView.Adapter<ListViewAdapter.ViewHolder>() {

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val section = sections[position]

        holder.sectionHeader.text = section.header
        holder.sectionContent.removeAllViews()

        for (content in section.content) {
            val textView = TextView(holder.itemView.context)
            textView.text = content
            holder.sectionContent.addView(textView)
        }

        holder.sectionHeader.setOnClickListener {
            section.isExpanded = !section.isExpanded
            holder.sectionContent.visibility = if (section.isExpanded) View.VISIBLE else View.GONE
        }
    }

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

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val sectionHeader: TextView = itemView.findViewById(R.id.section_header)
        val sectionContent: LinearLayout = itemView.findViewById(R.id.section_content)
    }

    data class Section(val header: String, val content: List<String>, var isExpanded: Boolean = false)
}

Step 4: Set up the ListView in your activity

In your activity, set up the RecyclerView and attach the adapter to it. You can provide data for the adapter by creating a list of Section objects. Here's an example activity class (MainActivity.kt):

class MainActivity : AppCompatActivity() {

    private lateinit var recyclerView: RecyclerView
    private lateinit var adapter: ListViewAdapter

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

        val sections = listOf(
            ListViewAdapter.Section(
                "Section 1",
                listOf("Content 1.1", "Content 1.2", "Content 1.3")
            ),
            ListViewAdapter.Section(
                "Section 2",
                listOf("Content 2.1", "Content 2.2", "Content 2.3")
            ),
            ListViewAdapter.Section(
                "Section 3",
                listOf("Content 3.1", "Content 3.2", "Content 3.3")
            )
        )

        recyclerView = findViewById(R.id.recycler_view)
        recyclerView.layoutManager = LinearLayoutManager(this)
        adapter = ListViewAdapter(sections)
        recyclerView.adapter = adapter
    }
}

Step 5: Run the app

Build and run your app on an Android device or emulator. You should see a ListView with collapsible sections. Clicking on a section header should expand or collapse the corresponding section content.

That's it! You have successfully implemented a collapsible section in a ListView in Kotlin for Android. Feel free to customize the layout and adapter logic to fit your specific requirements.