ButtonGroup

Component in Wear Material 3 Compose

Layout component to implement an expressive group of buttons, that react to touch by growing the touched button, (while the neighbor(s) shrink to accommodate and keep the group width constant).

Last updated: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha27")
}

Overloads

@Composable
fun ButtonGroup(
    modifier: Modifier = Modifier,
    spacing: Dp = ButtonGroupDefaults.Spacing,
    expansionWidth: Dp = ButtonGroupDefaults.ExpansionWidth,
    contentPadding: PaddingValues = ButtonGroupDefaults.fullWidthPaddings(),
    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
    content: ButtonGroupScope.() -> Unit
)

Parameters

name	description
modifier	Modifier to be applied to the button group
spacing	the amount of spacing between buttons
expansionWidth	how much buttons grow when pressed
contentPadding	The spacing values to apply internally between the container and the content
verticalAlignment	the vertical alignment of the button group's children.
content	the content and properties of each button. The Ux guidance is to use no more than 3 buttons within a ButtonGroup.

Code Example

ButtonGroupSample

@Composable
fun ButtonGroupSample() {
    val interactionSourceLeft = remember { MutableInteractionSource() }
    val interactionSourceRight = remember { MutableInteractionSource() }
    Box(Modifier.size(300.dp), contentAlignment = Alignment.Center) {
        ButtonGroup(Modifier.fillMaxWidth()) {
            buttonGroupItem(interactionSource = interactionSourceLeft) {
                Button(onClick = {}, interactionSource = interactionSourceLeft) {
                    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                        Text("Left")
                    }
                }
            }
            buttonGroupItem(interactionSource = interactionSourceRight) {
                Button(onClick = {}, interactionSource = interactionSourceRight) {
                    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                        Text("Right")
                    }
                }
            }
        }
    }
}