Function

expandableItems

Adds a series of items, that will be expanded/collapsed according to the ExpandableState Example of an expandable list:

ExpandableWithItemsSample

@Sampled
@Composable
fun ExpandableWithItemsSample() {
    val expandableState = rememberExpandableState()

    val sampleItem: @Composable (String) -> Unit = { label ->
        Chip(label = { Text(label) }, onClick = {}, secondaryLabel = { Text("line 2 - Secondary") })
    }

    val items = List(10) { "Item $it" }
    val top = items.take(3)
    val rest = items.drop(3)

    ScalingLazyColumn(modifier = Modifier.fillMaxSize()) {
        items(top.size) { sampleItem(top[it]) }
        expandableItems(expandableState, rest.size) { sampleItem(rest[it]) }
        expandableButton(expandableState) {
            OutlinedCompactChip(
                label = {
                    Text("Show More")
                    Spacer(Modifier.size(6.dp))
                    Icon(painterResource(R.drawable.ic_expand_more_24), "Expand")
                },
                onClick = { expandableState.expanded = true },
            )
        }
    }
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: