ButtonGroup

Functions summary

Unit

@Composable
ButtonGroup(
    modifier: Modifier,
    state: ButtonGroupState,
    horizontalArrangement: Arrangement.Horizontal,
    verticalAlignment: Alignment.Vertical,
    contentPadding: PaddingValues,
    content: @Composable () -> Unit
)

A ButtonGroup is a horizontal container for multiple Buttons, allowing them to scroll if they exceed the size of the viewport.

Functions

ButtonGroup

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha16

@Composable
fun ButtonGroup(
    modifier: Modifier = Modifier,
    state: ButtonGroupState = rememberButtonGroupState(),
    horizontalArrangement: Arrangement.Horizontal = ButtonGroupDefaults.HorizontalArrangement,
    verticalAlignment: Alignment.Vertical = ButtonGroupDefaults.VerticalAlignment,
    contentPadding: PaddingValues = ButtonGroupDefaults.ContentPadding,
    content: @Composable () -> Unit
): Unit

A ButtonGroup is a horizontal container for multiple Buttons, allowing them to scroll if they exceed the size of the viewport. It is recommended that this container is used for groups of approximately 3-7 related buttons.

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.xr.glimmer.Button
import androidx.xr.glimmer.ButtonGroup
import androidx.xr.glimmer.Text

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}

As the user scrolls, the state will keep track of the "current item" via ButtonGroupState.currentItemIndex. If this container is currently focused, then it will continuously attempt to gain focus on the current item.

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.xr.glimmer.Button
import androidx.xr.glimmer.ButtonGroup
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.rememberButtonGroupState

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}

Parameters
`modifier: Modifier = Modifier`	The modifier to be applied to the ButtonGroup
`state: ButtonGroupState = rememberButtonGroupState()`	The `ButtonGroupState` of this ButtonGroup
`horizontalArrangement: Arrangement.Horizontal = ButtonGroupDefaults.HorizontalArrangement`	The horizontal arrangement of the ButtonGroup's children
`verticalAlignment: Alignment.Vertical = ButtonGroupDefaults.VerticalAlignment`	The vertical alignment of the ButtonGroup's children
`contentPadding: PaddingValues = ButtonGroupDefaults.ContentPadding`	The spacing values to apply internally between the container and content
`content: @Composable () -> Unit`	The content of the ButtonGroup