MultiChoiceSegmentedButtonRow

Functions summary

Unit
@Composable
MultiChoiceSegmentedButtonRow(
    modifier: Modifier,
    space: Dp,
    content: @Composable MultiChoiceSegmentedButtonRowScope.() -> Unit
)

Material Design segmented button
Cmn

Functions

MultiChoiceSegmentedButtonRow

Cmn 
@Composable
fun MultiChoiceSegmentedButtonRow(
    modifier: Modifier = Modifier,
    space: Dp = SegmentedButtonDefaults.BorderWidth,
    content: @Composable MultiChoiceSegmentedButtonRowScope.() -> Unit
): Unit

Material Design segmented button

A Layout to correctly position, size, and add semantics to SegmentedButtons in a Row. It handles overlapping items so that strokes of the item are correctly on top of each other.

MultiChoiceSegmentedButtonRow is used when the selection allows multiple value, for correct semantics.

import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.TrendingUp
import androidx.compose.material.icons.filled.BookmarkBorder
import androidx.compose.material.icons.filled.StarBorder
import androidx.compose.material3.Icon
import androidx.compose.material3.MultiChoiceSegmentedButtonRow
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

val checkedList = remember { mutableStateListOf<Int>() }
val options = listOf("Favorites", "Trending", "Saved")
val icons =
    listOf(
        Icons.Filled.StarBorder,
        Icons.AutoMirrored.Filled.TrendingUp,
        Icons.Filled.BookmarkBorder,
    )
MultiChoiceSegmentedButtonRow {
    options.forEachIndexed { index, label ->
        SegmentedButton(
            shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
            icon = {
                SegmentedButtonDefaults.Icon(active = index in checkedList) {
                    Icon(
                        imageVector = icons[index],
                        contentDescription = null,
                        modifier = Modifier.size(SegmentedButtonDefaults.IconSize),
                    )
                }
            },
            onCheckedChange = {
                if (index in checkedList) {
                    checkedList.remove(index)
                } else {
                    checkedList.add(index)
                }
            },
            checked = index in checkedList,
        ) {
            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 MultiChoiceSegmentedButtonRowScope.() -> Unit

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