SegmentedListItem

Lists are continuous, vertical indexes of text or images.

SegmentedListItem

Composable Component

Lists are continuous, vertical indexes of text or images.

Common
@ExperimentalMaterial3ExpressiveApi
@Composable
fun SegmentedListItem(
    onClick: () -> Unit,
    shapes: ListItemShapes,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingContent: @Composable (() -> Unit)? = null,
    trailingContent: @Composable (() -> Unit)? = null,
    overlineContent: @Composable (() -> Unit)? = null,
    supportingContent: @Composable (() -> Unit)? = null,
    verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment(),
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    colors: ListItemColors = ListItemDefaults.segmentedColors(),
    elevation: ListItemElevation = ListItemDefaults.elevation(),
    contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)

Parameters

onClickcalled when this list item is clicked.
shapesthe ListItemShapes that this list item will use to morph between depending on the user's interaction with the list item. The base shape depends on the index of the item within the overall list. See ListItemDefaults.segmentedShapes.
modifierthe Modifier to be applied to this list item.
enabledcontrols the enabled state of this list item. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
leadingContentthe leading content of this list item, such as an icon or avatar.
trailingContentthe trailing content of this list item, such as a checkbox, switch, or icon.
overlineContentthe content displayed above the main content of the list item.
supportingContentthe content displayed below the main content of the list item.
verticalAlignmentthe vertical alignment of children within the list item, after accounting for contentPadding.
onLongClickcalled when this list item is long clicked (long-pressed).
onLongClickLabelsemantic / accessibility label for the onLongClick action.
colorsthe ListItemColors that will be used to resolve the colors used for this list item in different states. See ListItemDefaults.segmentedColors.
elevationthe ListItemElevation used to resolve the elevation for this list item in different states. See ListItemDefaults.elevation.
contentPaddingthe padding to be applied to the content of this list item.
interactionSourcean optional hoisted MutableInteractionSource for observing and emitting Interactions for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if null is provided, interactions will still happen internally.
contentthe main content of this list item. Also known as the headline or label.
Common
@ExperimentalMaterial3ExpressiveApi
@Composable
fun SegmentedListItem(
    selected: Boolean,
    onClick: () -> Unit,
    shapes: ListItemShapes,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingContent: @Composable (() -> Unit)? = null,
    trailingContent: @Composable (() -> Unit)? = null,
    overlineContent: @Composable (() -> Unit)? = null,
    supportingContent: @Composable (() -> Unit)? = null,
    verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment(),
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    colors: ListItemColors = ListItemDefaults.segmentedColors(),
    elevation: ListItemElevation = ListItemDefaults.elevation(),
    contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)

Parameters

selectedwhether or not this list item is selected.
onClickcalled when this list item is clicked.
shapesthe ListItemShapes that this list item will use to morph between depending on the user's interaction with the list item. The base shape depends on the index of the item within the overall list. See ListItemDefaults.segmentedShapes.
modifierthe Modifier to be applied to this list item.
enabledcontrols the enabled state of this list item. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
leadingContentthe leading content of this list item, such as an icon or avatar.
trailingContentthe trailing content of this list item, such as a checkbox, switch, or icon.
overlineContentthe content displayed above the main content of the list item.
supportingContentthe content displayed below the main content of the list item.
verticalAlignmentthe vertical alignment of children within the list item, after accounting for contentPadding.
onLongClickcalled when this list item is long clicked (long-pressed).
onLongClickLabelsemantic / accessibility label for the onLongClick action.
colorsthe ListItemColors that will be used to resolve the colors used for this list item in different states. See ListItemDefaults.segmentedColors.
elevationthe ListItemElevation used to resolve the elevation for this list item in different states. See ListItemDefaults.elevation.
contentPaddingthe padding to be applied to the content of this list item.
interactionSourcean optional hoisted MutableInteractionSource for observing and emitting Interactions for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if null is provided, interactions will still happen internally.
contentthe main content of this list item. Also known as the headline or label.
Common
@ExperimentalMaterial3ExpressiveApi
@Composable
fun SegmentedListItem(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    shapes: ListItemShapes,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingContent: @Composable (() -> Unit)? = null,
    trailingContent: @Composable (() -> Unit)? = null,
    overlineContent: @Composable (() -> Unit)? = null,
    supportingContent: @Composable (() -> Unit)? = null,
    verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment(),
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    colors: ListItemColors = ListItemDefaults.segmentedColors(),
    elevation: ListItemElevation = ListItemDefaults.elevation(),
    contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)

Parameters

checkedwhether this list item is toggled on or off.
onCheckedChangecalled when this toggleable list item is clicked.
shapesthe ListItemShapes that this list item will use to morph between depending on the user's interaction with the list item. The base shape depends on the index of the item within the overall list. See ListItemDefaults.segmentedShapes.
modifierthe Modifier to be applied to this list item.
enabledcontrols the enabled state of this list item. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
leadingContentthe leading content of this list item, such as an icon or avatar.
trailingContentthe trailing content of this list item, such as a checkbox, switch, or icon.
overlineContentthe content displayed above the main content of the list item.
supportingContentthe content displayed below the main content of the list item.
verticalAlignmentthe vertical alignment of children within the list item, after accounting for contentPadding.
onLongClickcalled when this list item is long clicked (long-pressed).
onLongClickLabelsemantic / accessibility label for the onLongClick action.
colorsthe ListItemColors that will be used to resolve the colors used for this list item in different states. See ListItemDefaults.segmentedColors.
elevationthe ListItemElevation used to resolve the elevation for this list item in different states. See ListItemDefaults.elevation.
contentPaddingthe padding to be applied to the content of this list item.
interactionSourcean optional hoisted MutableInteractionSource for observing and emitting Interactions for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if null is provided, interactions will still happen internally.
contentthe main content of this list item. Also known as the headline or label.

Code Examples

MultiSelectionSegmentedListItemSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun MultiSelectionSegmentedListItemSample() {
    val count = 4
    val colors =
        ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
    Column(verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap)) {
        repeat(count) { idx ->
            var checked by rememberSaveable { mutableStateOf(false) }
            SegmentedListItem(
                checked = checked,
                onCheckedChange = { checked = it },
                colors = colors,
                shapes = ListItemDefaults.segmentedShapes(index = idx, count = count),
                leadingContent = { Checkbox(checked = checked, onCheckedChange = null) },
                trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
                supportingContent = { Text("Additional info") },
                content = { Text("Item ${idx + 1}") },
            )
        }
    }
}

SegmentedListItemWithExpansionSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun SegmentedListItemWithExpansionSample() {
    var expanded by rememberSaveable { mutableStateOf(false) }
    val numChildren = 3
    val itemCount = 1 + if (expanded) numChildren else 0
    val childrenChecked = rememberSaveable { mutableStateListOf(*Array(numChildren) { false }) }
    val colors =
        ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap),
    ) {
        Spacer(Modifier.height(100.dp))
        SegmentedListItem(
            onClick = { expanded = !expanded },
            modifier =
                Modifier.semantics { stateDescription = if (expanded) "Expanded" else "Collapsed" },
            colors = colors,
            shapes = ListItemDefaults.segmentedShapes(index = 0, count = itemCount),
            leadingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
            trailingContent = {
                Icon(
                    if (expanded) Icons.Default.ExpandLess else Icons.Default.ExpandMore,
                    contentDescription = null,
                )
            },
            content = { Text("Click to expand/collapse") },
        )
        AnimatedVisibility(
            visible = expanded,
            enter = expandVertically(MaterialTheme.motionScheme.fastSpatialSpec()),
            exit = shrinkVertically(MaterialTheme.motionScheme.fastSpatialSpec()),
        ) {
            Column(verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap)) {
                repeat(numChildren) { idx ->
                    SegmentedListItem(
                        checked = childrenChecked[idx],
                        onCheckedChange = { childrenChecked[idx] = it },
                        colors = colors,
                        shapes =
                            ListItemDefaults.segmentedShapes(index = idx + 1, count = itemCount),
                        leadingContent = {
                            Icon(Icons.Default.Favorite, contentDescription = null)
                        },
                        trailingContent = {
                            Checkbox(checked = childrenChecked[idx], onCheckedChange = null)
                        },
                        content = { Text("Child ${idx + 1}") },
                    )
                }
            }
        }
    }
}

SingleSelectionSegmentedListItemSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun SingleSelectionSegmentedListItemSample() {
    val count = 4
    val colors =
        ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
    Column(
        modifier = Modifier.selectableGroup(),
        verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap),
    ) {
        var selectedIndex: Int? by rememberSaveable { mutableStateOf(null) }
        repeat(count) { idx ->
            val selected = selectedIndex == idx
            SegmentedListItem(
                selected = selected,
                onClick = { selectedIndex = if (selected) null else idx },
                colors = colors,
                shapes = ListItemDefaults.segmentedShapes(index = idx, count = count),
                leadingContent = { RadioButton(selected = selected, onClick = null) },
                trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
                supportingContent = { Text("Additional info") },
                content = { Text("Item ${idx + 1}") },
            )
        }
    }
}