Composable Function

rememberExpandableState

Create and remember an ExpandableState Example of an expandable list: Example of an expandable text:

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 },
            )
        }
    }
}

ExpandableTextSample

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

    ScalingLazyColumn(modifier = Modifier.fillMaxSize()) {
        expandableItem(expandableState) { expanded ->
            Text(
                "Account Alert: you have made a large purchase.\n" +
                    "We have noticed that a large purchase was charged to " +
                    "your credit card account. " +
                    "Please contact us if you did not perform this purchase. " +
                    "Our Customer Service team is available 24 hours a day, " +
                    "7 days a week to answer your account or product support question.",
                maxLines = if (expanded) 20 else 3,
                modifier = Modifier.padding(horizontal = 10.dp),
            )
        }

        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: