# ButtonGroupKt

Added in 1.3.0

*** ** * ** ***


```
public final class ButtonGroupKt
```

<br />

*** ** * ** ***

## Summary

| ### Public methods |
|---|---|
| `static final @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/LayoutElementBuilders.LayoutElement` | `https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonGroupKt#(androidx.wear.protolayout.material3.MaterialScope).buttonGroup(androidx.wear.protolayout.DimensionBuilders.ContainerDimension,androidx.wear.protolayout.DimensionBuilders.ContainerDimension,kotlin.Float,kotlin.Function1)( @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/MaterialScope receiver, @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/DimensionBuilders.ContainerDimension width, @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/DimensionBuilders.ContainerDimension height, @https://developer.android.com/reference/androidx/annotation/Dimension(unit = 0) float spacing, @https://developer.android.com/reference/androidx/annotation/NonNull Function1<@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonGroupScope, https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html> content )` ProtoLayout Material3 component-layout that places its children in a horizontal sequence. |

## Public methods

### buttonGroup

Artifact: [androidx.wear.protolayout:protolayout-material3](https://developer.android.com/jetpack/androidx/releases/wear-protolayout) [View Source](https://cs.android.com/search?q=file:androidx/wear/protolayout/material3/ButtonGroup.kt+function:buttonGroup) Added in [1.3.0](https://developer.android.com/jetpack/androidx/releases/wear-protolayout#1.3.0)

```
public static final @NonNull LayoutElementBuilders.LayoutElement buttonGroup(
    @NonNull MaterialScope receiver,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @Dimension(unit = 0) float spacing,
    @NonNull Function1<@NonNull ButtonGroupScope, Unit> content
)
```

ProtoLayout Material3 component-layout that places its children in a horizontal sequence.

These behave as a group which fill the available space to maximize on screen real estate. The color and size of the child elements should be changed in order to create hierarchy and priority.

The width and height of the Button/Card should be flexible (set to `https://developer.android.com/reference/androidx/wear/protolayout/DimensionBuilders#expand()` or `https://developer.android.com/reference/androidx/wear/protolayout/DimensionBuilders#weight(float)`) and their proportion should be either equal or weight based. However the `https://developer.android.com/reference/androidx/wear/protolayout/material3/package-summary#(androidx.wear.protolayout.material3.MaterialScope).buttonGroup(androidx.wear.protolayout.DimensionBuilders.ContainerDimension,androidx.wear.protolayout.DimensionBuilders.ContainerDimension,kotlin.Float,kotlin.Function1)` displays correctly too if the sizes of elements provided are set to a fixed width/height, although it can lead to more empty space on large screen sizes.

A `https://developer.android.com/reference/androidx/wear/protolayout/material3/package-summary#(androidx.wear.protolayout.material3.MaterialScope).buttonGroup(androidx.wear.protolayout.DimensionBuilders.ContainerDimension,androidx.wear.protolayout.DimensionBuilders.ContainerDimension,kotlin.Float,kotlin.Function1)` with more than one row can be created by using multiple `https://developer.android.com/reference/androidx/wear/protolayout/material3/package-summary#(androidx.wear.protolayout.material3.MaterialScope).buttonGroup(androidx.wear.protolayout.DimensionBuilders.ContainerDimension,androidx.wear.protolayout.DimensionBuilders.ContainerDimension,kotlin.Float,kotlin.Function1)` and `https://developer.android.com/reference/androidx/wear/protolayout/LayoutElementBuilders.Spacer`s inside a `https://developer.android.com/reference/androidx/wear/protolayout/LayoutElementBuilders.Column`:

```
Column.Builder()
  .setWidth(expand())
  .setHeight(expand())
  .addContent(buttonGroup {...})
  .addContent(DEFAULT_SPACER_BETWEEN_BUTTON_GROUPS)
  .addContent(buttonGroup {...})
  .build()
}
```

Note that, having more than 2 rows in a Column could lead to too small height of elements that aren't in line with minimum tap target.

See [common-layouts/tiles](https://developer.android.com/design/ui/wear/guides/foundations/common-layouts/tiles) and [bestpractices](https://developer.android.com/design/ui/wear/guides/surfaces/tiles/bestpractices) for more visuals and design recommendations.

```kotlin
import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.DimensionBuilders.weight
import androidx.wear.protolayout.material3.CardDefaults.filledTonalCardColors
import androidx.wear.protolayout.material3.CardDefaults.filledVariantCardColors
import androidx.wear.protolayout.material3.DataCardStyle.Companion.extraLargeDataCardStyle
import androidx.wear.protolayout.material3.DataCardStyle.Companion.largeCompactDataCardStyle
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.buttonGroup
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.iconDataCard
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.material3.textDataCard
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                buttonGroup {
                    buttonGroupItem {
                        textDataCard(
                            onClick = clickable,
                            modifier = LayoutModifier.contentDescription("Data Card with text"),
                            width = weight(1f),
                            height = expand(),
                            colors = filledTonalCardColors(),
                            style = extraLargeDataCardStyle(),
                            title = { this.text("1km".layoutString) },
                            content = { this.text("Run".layoutString) },
                            secondaryText = { this.text("Nice!".layoutString) },
                        )
                    }
                    buttonGroupItem {
                        iconDataCard(
                            onClick = clickable,
                            modifier = LayoutModifier.contentDescription("Data Card with icon"),
                            width = weight(1f),
                            height = expand(),
                            colors = filledTonalCardColors(),
                            style = extraLargeDataCardStyle(),
                            title = { this.text("2km".layoutString) },
                            secondaryIcon = { icon("id") },
                            content = { this.text("Run".layoutString) },
                        )
                    }
                    buttonGroupItem {
                        textDataCard(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Compact Data Card without icon or secondary label"
                                ),
                            width = weight(3f),
                            height = expand(),
                            colors = filledVariantCardColors(),
                            style = largeCompactDataCardStyle(),
                            title = { this.text("10:30".layoutString) },
                            content = { this.text("PM".layoutString) },
                        )
                    }
                }
            }
        )
    }
```

```kotlin
import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.buttonGroup
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.iconButton
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.material3.textButton
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.background
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                buttonGroup {
                    buttonGroupItem {
                        iconButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            iconContent = { icon("id1") },
                        )
                    }
                    buttonGroupItem {
                        iconButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            shape = shapes.large,
                            iconContent = { icon("id2") },
                        )
                    }
                    buttonGroupItem {
                        textButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            shape = shapes.large,
                            labelContent = { text("Dec".layoutString) },
                        )
                    }
                }
            }
        )
    }
```

| Parameters |
|---|---|
| `@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/DimensionBuilders.ContainerDimension width` | The width of this button group |
| `@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/DimensionBuilders.ContainerDimension height` | The height of this button group |
| `@https://developer.android.com/reference/androidx/annotation/Dimension(unit = 0) float spacing` | The amount of spacing between buttons |
| `@https://developer.android.com/reference/androidx/annotation/NonNull Function1<@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonGroupScope, https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html> content` | The content for each child. The UX guidance is to use no more than 3 elements within a this button group. |