Function

expandableItem

Adds a single item, that will be expanded/collapsed according to the ExpandableState.

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: