How to implement an expandable ListView in Kotlin Android

How to implement an expandable ListView in Kotlin Android.

Here is a step-by-step tutorial on how to implement an expandable ListView in Kotlin for Android.

Step 1: Set up the project

Create a new Android project in Android Studio.
Make sure you have Kotlin enabled in your project.

Step 2: Create the layout

Open the layout file for your activity (e.g., activity_main.xml).

Add a ListView element to the layout.

<ListView
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Step 3: Create the model classes

Create a new Kotlin file for the model classes (e.g., Item.kt).
Define the Item class with properties for the item name and a list of sub-items.
```
data class Item(val name: String, val subItems: List<String>)
```

Step 4: Create the adapter

Create a new Kotlin file for the adapter (e.g., ExpandableListAdapter.kt).
Define the ExpandableListAdapter class and extend the BaseExpandableListAdapter class.

Implement the required methods for the adapter.

class ExpandableListAdapter(private val context: Context, private val items: List<Item>) :
    BaseExpandableListAdapter() {

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

    override fun getChildrenCount(groupPosition: Int): Int {
        return items[groupPosition].subItems.size
    }

    override fun getGroup(groupPosition: Int): Any {
        return items[groupPosition]
    }

    override fun getChild(groupPosition: Int, childPosition: Int): Any {
        return items[groupPosition].subItems[childPosition]
    }

    override fun getGroupId(groupPosition: Int): Long {
        return groupPosition.toLong()
    }

    override fun getChildId(groupPosition: Int, childPosition: Int): Long {
        return childPosition.toLong()
    }

    override fun hasStableIds(): Boolean {
        return false
    }

    override fun isChildSelectable(groupPosition: Int, childPosition: Int): Boolean {
        return true
    }

    override fun getGroupView(groupPosition: Int, isExpanded: Boolean, convertView: View?, parent: ViewGroup): View {
        var view = convertView
        if (view == null) {
            val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
            view = inflater.inflate(R.layout.list_group, null)
        }

        val item = getGroup(groupPosition) as Item
        val nameTextView = view!!.findViewById<TextView>(R.id.nameTextView)
        nameTextView.text = item.name

        return view
    }

    override fun getChildView(groupPosition: Int, childPosition: Int, isLastChild: Boolean, convertView: View?, parent: ViewGroup): View {
        var view = convertView
        if (view == null) {
            val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
            view = inflater.inflate(R.layout.list_item, null)
        }

        val subItem = getChild(groupPosition, childPosition) as String
        val nameTextView = view!!.findViewById<TextView>(R.id.nameTextView)
        nameTextView.text = subItem

        return view
    }
}

Step 5: Create the layout for the list items

Create a new layout file for the group item (e.g., list_group.xml).

Add a TextView element to the layout to display the group item name.

<TextView
    android:id="@+id/nameTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="18sp"
    android:padding="10dp" />

Create a new layout file for the child item (e.g., list_item.xml).
Add a TextView element to the layout to display the child item name.

Step 6: Set up the activity

Open the Kotlin file for your activity (e.g., MainActivity.kt).

Declare a variable for the ListView and the adapter.

private lateinit var listView: ListView
private lateinit var adapter: ExpandableListAdapter

Initialize the ListView and the adapter in the onCreate method.

listView = findViewById(R.id.listView)
adapter = ExpandableListAdapter(this, getItems())
listView.setAdapter(adapter)

Create a helper method getItems to populate the list of items.

private fun getItems(): List<Item> {
    val items = mutableListOf<Item>()
    items.add(Item("Group 1", listOf("Item 1", "Item 2", "Item 3")))
    items.add(Item("Group 2", listOf("Item 4", "Item 5", "Item 6")))
    items.add(Item("Group 3", listOf("Item 7", "Item 8", "Item 9")))
    return items
}

Step 7: Run the app

Build and run the app on an Android device or emulator.
You should see a ListView with expandable items.
Click on a group item to expand or collapse it and see the child items.

That's it! You have successfully implemented an expandable ListView in Kotlin for Android. You can customize the layout and adapter as per your requirements.

Step 1: Set up the project​

Step 2: Create the layout​

Step 3: Create the model classes​

Step 4: Create the adapter​

Step 5: Create the layout for the list items​

Step 6: Set up the activity​

Step 7: Run the app​