🌈 Create new beautiful Compose Gradients with our new wesite ->

SegmentedListItem

Kotlin 
@Composable
fun SegmentedListItems() {
    val count = 4
    val colors =
        ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
    Column(
        modifier = Modifier.verticalScroll(rememberScrollState()),
        verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap),
    ) {
        SegmentedListItem(
            shapes = ListItemDefaults.segmentedShapes(index = 0, count = count),
            colors = colors,
            leadingContent = { Icon(Icons.Filled.Favorite, contentDescription = null) },
            content = { Text("One line list item") },
        )

        SegmentedListItem(
            shapes = ListItemDefaults.segmentedShapes(index = 1, count = count),
            colors = colors,
            leadingContent = { Icon(Icons.Filled.Favorite, contentDescription = null) },
            supportingContent = { Text("Supporting text") },
            content = { Text("Two line list item") },
        )

        SegmentedListItem(
            shapes = ListItemDefaults.segmentedShapes(index = 2, count = count),
            colors = colors,
            leadingContent = { Icon(Icons.Filled.Favorite, contentDescription = null) },
            overlineContent = { Text("Overline text") },
            supportingContent = { Text("Supporting text") },
            content = { Text("Three line list item") },
        )

        SegmentedListItem(
            shapes = ListItemDefaults.segmentedShapes(index = 3, count = count),
            colors = colors,
            leadingContent = { Icon(Icons.Filled.Favorite, contentDescription = null) },
            supportingContent = { Text("Supporting text\nthat is multiple lines") },
            content = { Text("Another three line list item") },
        )
    }
}
View All