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