SingleChoiceSegmentedButtonRow

Functions summary

Functions

SingleChoiceSegmentedButtonRow

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

Material Design segmented button

A Layout to correctly position and size SegmentedButtons 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.

import androidx.compose.foundation.layout.size
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.material3.SingleChoiceSegmentedButtonRow
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

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)
        }
    }
}
Parameters
modifier: Modifier = Modifier

the Modifier to be applied to this row

space: Dp = SegmentedButtonDefaults.BorderWidth

the dimension of the overlap between buttons. Should be equal to the stroke width used on the items.

content: @Composable SingleChoiceSegmentedButtonRowScope.() -> Unit

the content of this Segmented Button Row, typically a sequence of SegmentedButtons