SingleChoiceSegmentedButtonRow

Component in Material 3 Compose

A Layout to correctly position and size [SegmentedButton]s in a Row. It handles overlapping items so that strokes of the item are correctly on top of each other. [SingleChoiceSegmentedButtonRow] is used when the selection only allows one value, for correct semantics.

Last updated: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.4.0-alpha02")
}

Overloads

@Composable
fun SingleChoiceSegmentedButtonRow(
    modifier: Modifier = Modifier,
    space: Dp = SegmentedButtonDefaults.BorderWidth,
    content: @Composable SingleChoiceSegmentedButtonRowScope.() -> Unit
)

Parameters

name	description
modifier	the [Modifier] to be applied to this row
space	the dimension of the overlap between buttons. Should be equal to the stroke width used on the items.
content	the content of this Segmented Button Row, typically a sequence of [SegmentedButton]s

Code Example

SegmentedButtonSingleSelectSample

@Composable
@Preview
fun SegmentedButtonSingleSelectSample() {
    var selectedIndex by remember { mutableStateOf(0) }
    val options = listOf("Day", "Month", "Week")
    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex
            ) {
                Text(label)
            }
        }
    }
}