How to create expandable list view with static values in jetpack compose

Question

I have created Kotlin Code with static values:

I wanted to know how can I create the same with jetpack compose? I don't know

Code:

       class TestApp : AppCompatActivity() {
    
        var listAdapter: ExpandableListAdapter? = null
        var expListView: ExpandableListView? = null
        var listDataHeader: MutableList<String>? = null
        var listDataChild: HashMap<String, List<String>>? = null
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    
            expListView = findViewById<View>(R.id.lvExp) as ExpandableListView
            prepareListData()
            listAdapter = ExpandableListAdapter(this, listDataHeader, listDataChild)
            expListView!!.setAdapter(listAdapter)
    
        }
        private fun prepareListData() {
        listDataHeader = ArrayList()
        listDataChild = HashMap()
        listDataHeader?.add(getString(R.string.q_1))
        val on_0: MutableList<String> = ArrayList()
        on_0.add(getString(R.string.faq_d_0))
        listDataChild!![listDataHeader!![0]] = on_0
}
    }

Answer 1

You can do it using LazyColumn plus mutable state list to store collapsed state:

@Composable
fun CollapsableLazyColumn(
    sections: List<CollapsableSection>,
    modifier: Modifier = Modifier
) {
    val collapsedState = remember(sections) { sections.map { true }.toMutableStateList() }
    LazyColumn(modifier) {
        sections.forEachIndexed { i, dataItem ->
            val collapsed = collapsedState[i]
            item(key = "header_$i") {
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier
                        .clickable {
                            collapsedState[i] = !collapsed
                        }
                ) {
                    Icon(
                        Icons.Default.run {
                            if (collapsed)
                                KeyboardArrowDown
                            else
                                KeyboardArrowUp
                        },
                        contentDescription = "",
                        tint = Color.LightGray,
                    )
                    Text(
                        dataItem.title,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier
                            .padding(vertical = 10.dp)
                            .weight(1f)
                    )
                }
                Divider()
            }
            if (!collapsed) {
                items(dataItem.rows) { row ->
                    Row {
                        Spacer(modifier = Modifier.size(MaterialIconDimension.dp))
                        Text(
                            row,
                            modifier = Modifier
                                .padding(vertical = 10.dp)
                        )
                    }
                    Divider()
                }
            }
        }
    }
}

data class CollapsableSection(val title: String, val rows: List<String>)

const val MaterialIconDimension = 24f

Usage:

CollapsableLazyColumn(
    sections = listOf(
        CollapsableSection(
            title = "Fruits A",
            rows = listOf("Apple", "Apricots", "Avocado")
        ),
        CollapsableSection(
            title = "Fruits B",
            rows = listOf("Banana", "Blackberries", "Blueberries")
        ),
        CollapsableSection(
            title = "Fruits C",
            rows = listOf("Cherimoya", "Cantaloupe", "Cherries", "Clementine")
        ),
    ),
)

Result: