SegmentedListItem for settings screens in Compose

• wifiWi-FiHome network
• bluetoothBluetoothOff
• dark_modeDark themeFollows the system

One rounded group, small gaps, larger corners on the first and last item. Tap a row.

SegmentedListItem gives settings screens the Expressive look: list items inside one rounded group, with larger corners on the first and last items. It has overloads for plain, onClick, selected and checked items.

@Composable
fun SettingsGroup(settings: List<Setting>, onToggle: (Int, Boolean) -> Unit) {
    // Segmented list items: one rounded group, small gaps, larger corners on the first and last.
    Column(verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap)) {
        settings.forEachIndexed { index, setting ->
            SegmentedListItem(
                checked = setting.enabled,
                onCheckedChange = { onToggle(index, it) },
                shapes = ListItemDefaults.segmentedShapes(index = index, count = settings.size),
                supportingContent = { Text(setting.summary) },
                trailingContent = { Switch(checked = setting.enabled, onCheckedChange = null) },
            ) {
                Text(setting.title)
            }
        }
    }
}

The Switch has onCheckedChange = null because the whole row is the toggle. That gives one touch target and one screen-reader announcement.

Related: toggle buttons · audit

Want your agent to get this right every time? Install the skill. If this page helped,star the repo on GitHub.