ButtonGroupScope

Artifact: androidx.compose.material3:material3

Cmn

@ExperimentalMaterial3ExpressiveApi
interface ButtonGroupScope

Button group scope used to indicate a Modifier.weight and Modifier.animateWidth of a child element. Also defines the DSL to build the content of a ButtonGroup

Summary

Public functions
`Modifier`	`Modifier.align(alignment: Alignment.Vertical)` Align the element vertically within the `ButtonGroup`.	Cmn
`Modifier`	`Modifier.animateWidth( interactionSource: InteractionSource, compressionLimit: PaddingValues )` Specifies the interaction source to use with this item.	Cmn
`Unit`	`clickableItem( onClick: () -> Unit, label: String, icon: (@Composable () -> Unit)?, weight: Float, enabled: Boolean )` Adds a clickable item to the `ButtonGroup`.	Cmn
`Unit`	`customItem( buttonGroupContent: @Composable () -> Unit, menuContent: @Composable (ButtonGroupMenuState) -> Unit )` Adds a custom item to the `ButtonGroup`.	Cmn
`Unit`	`toggleableItem( checked: Boolean, label: String, onCheckedChange: (Boolean) -> Unit, icon: (@Composable () -> Unit)?, weight: Float, enabled: Boolean )` Adds a toggleable item to the `ButtonGroup`.	Cmn
`Modifier`	`Modifier.weight( weight: @FloatRange(from = 0.0, fromInclusive = false) Float )` Size the element's width proportional to its `weight` relative to other weighted sibling elements in the `ButtonGroup`.	Cmn

Public functions

Modifier.align

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.5.0-alpha21

fun Modifier.align(alignment: Alignment.Vertical): Modifier

Align the element vertically within the ButtonGroup. This alignment will have priority over the ButtonGroup's verticalAlignment parameter.

Parameters
`alignment: Alignment.Vertical`	the vertical alignment of the element

Modifier.animateWidth

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.5.0-alpha21

fun Modifier.animateWidth(
    interactionSource: InteractionSource,
    compressionLimit: PaddingValues = ButtonDefaults.ContentPadding
): Modifier

Specifies the interaction source to use with this item. This is used to listen to events and animate growing the pressed button and shrink the neighbor(s).

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Restaurant
import androidx.compose.material.icons.filled.Work
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.Restaurant
import androidx.compose.material.icons.outlined.Work
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ButtonGroup
import androidx.compose.material3.ButtonGroupDefaults
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonDefaults
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow

val options = listOf("Work", "Restaurant", "Home")
val unCheckedIcons = listOf(Icons.Outlined.Work, Icons.Outlined.Restaurant, Icons.Outlined.Home)
val checkedIcons = listOf(Icons.Filled.Work, Icons.Filled.Restaurant, Icons.Filled.Home)
val checked = remember { mutableStateListOf(false, false, false) }
val interactionSources = remember { List(options.size) { MutableInteractionSource() } }
ButtonGroup(
    overflowIndicator = { menuState ->
        ButtonGroupDefaults.OverflowIndicator(menuState = menuState)
    },
    expandedRatio = 1f,
) {
    options.forEachIndexed { index, label ->
        customItem(
            buttonGroupContent = {
                ToggleButton(
                    checked = checked[index],
                    onCheckedChange = { checked[index] = it },
                    shapes =
                        when (index) {
                            0 -> ButtonGroupDefaults.connectedLeadingButtonShapes()
                            options.lastIndex ->
                                ButtonGroupDefaults.connectedTrailingButtonShapes()
                            else -> ButtonGroupDefaults.connectedMiddleButtonShapes()
                        },
                    contentPadding = ButtonDefaults.ButtonWithIconContentPadding,
                    interactionSource = interactionSources[index],
                    modifier =
                        Modifier.animateWidth(
                            interactionSource = interactionSources[index],
                            compressionLimit = ButtonDefaults.ButtonWithIconContentPadding,
                        ),
                ) {
                    Icon(
                        if (checked[index]) checkedIcons[index] else unCheckedIcons[index],
                        contentDescription = "Localized description",
                    )
                    Spacer(Modifier.size(ToggleButtonDefaults.IconSpacing))
                    Text(
                        text = label,
                        softWrap = false,
                        maxLines = 1,
                        overflow = TextOverflow.Visible,
                    )
                }
            },
            menuContent = {
                DropdownMenuItem(
                    leadingIcon = { checkedIcons[index] },
                    text = { Text(label) },
                    onClick = {},
                    interactionSource = interactionSources[index],
                )
            },
        )
    }
}

Parameters
`interactionSource: InteractionSource`	the `InteractionSource` that button group will observe.
`compressionLimit: PaddingValues = ButtonDefaults.ContentPadding`	the `PaddingValues` used to determine the maximum compression that this item will be able to squish by.

clickableItem

Cmn

Added in 1.5.0-alpha21

fun clickableItem(
    onClick: () -> Unit,
    label: String,
    icon: (@Composable () -> Unit)? = null,
    weight: Float = Float.NaN,
    enabled: Boolean = true
): Unit

Adds a clickable item to the ButtonGroup.

Parameters
`onClick: () -> Unit`	The action to perform when the item is clicked.
`label: String`	The text label for the item.
`icon: (@Composable () -> Unit)? = null`	An optional composable representing the item's icon.
`weight: Float = Float.NaN`	the weight to be applied to this item, please see `ButtonGroupScope.weight`
`enabled: Boolean = true`	Whether the item is enabled.

customItem

Cmn

Added in 1.5.0-alpha21

fun customItem(
    buttonGroupContent: @Composable () -> Unit,
    menuContent: @Composable (ButtonGroupMenuState) -> Unit
): Unit

Adds a custom item to the ButtonGroup.

Parameters
`buttonGroupContent: @Composable () -> Unit`	The composable to display in the app bar.
`menuContent: @Composable (ButtonGroupMenuState) -> Unit`	The composable to display in the overflow menu. It receives an `ButtonGroupMenuState` instance.

toggleableItem

Cmn

Added in 1.5.0-alpha21

fun toggleableItem(
    checked: Boolean,
    label: String,
    onCheckedChange: (Boolean) -> Unit,
    icon: (@Composable () -> Unit)? = null,
    weight: Float = Float.NaN,
    enabled: Boolean = true
): Unit

Adds a toggleable item to the ButtonGroup.

Parameters
`checked: Boolean`	Whether the item is currently checked.
`label: String`	The text label for the item.
`onCheckedChange: (Boolean) -> Unit`	The action to perform when the item's checked state changes.
`icon: (@Composable () -> Unit)? = null`	An optional composable representing the item's icon.
`weight: Float = Float.NaN`	the weight to be applied to this item, please see `ButtonGroupScope.weight`
`enabled: Boolean = true`	Whether the item is enabled.

Modifier.weight

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.5.0-alpha21

fun Modifier.weight(
    weight: @FloatRange(from = 0.0, fromInclusive = false) Float
): Modifier

Size the element's width proportional to its weight relative to other weighted sibling elements in the ButtonGroup. The parent will divide the horizontal space remaining after measuring unweighted child elements and distribute it according to this weight.

Parameters
`weight: @FloatRange(from = 0.0, fromInclusive = false) Float`	The proportional width to give to this element, as related to the total of all weighted siblings. Must be positive.