Function

expandableButton

Adds a single item, for the button that controls expandable item(s).

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: