Import
View-based framework
If you need to reference the ButtonGroup component in your Kotlin code, make sure to properly import it on top of your file using the path below.
import com.backbase.android.design.button.ButtonGroup
Usage
Basic usage
Create a ButtonGroup in XML and add quick actions programmatically.
<com.backbase.android.design.button.ButtonGroup
android:id="@+id/backbaseButtonGroupView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:prominentButtonCornerRadius="?radiusNone"
app:horizontalProminentButtonSpacing="?sizerXSmall" />
// Basic button group with quick actions
val buttonGroup: ButtonGroup = findViewById(R.id.backbaseButtonGroupView)
val quickAction = ButtonGroup.QuickAction(
text = "Some text",
contentDescription = "Some content",
icon = ContextCompat.getDrawable(context, R.drawable.ic_star),
id = "Some Id"
).apply {
onClick = {
Snackbar.make(buttonGroup, "Click", Snackbar.LENGTH_LONG).show()
}
}
buttonGroup.buildButtonGroup(listOf(quickAction))
Advanced usage
Create a ButtonGroup with different layout options and XML attributes.
<!-- All Round Layout -->
<com.backbase.android.design.button.ButtonGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutOption="allRound" />
<!-- One Prominent Relaxed Layout -->
<com.backbase.android.design.button.ButtonGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutOption="oneProminentRelaxed"
app:prominentButtonCornerRadius="?radiusLarge"
app:horizontalProminentButtonSpacing="?sizerSmall" />
<!-- One Prominent Grouped Layout -->
<com.backbase.android.design.button.ButtonGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutOption="oneProminentGrouped"
app:prominentButtonCornerRadius="?radiusLarge"
app:horizontalProminentButtonSpacing="?sizerSmall"
app:moreLabel="@string/button_more_label"
app:moreIcon="@drawable/button_more_icon" />
// Configure programmatically
val buttonGroup = ButtonGroup(context).apply {
layoutOption = ButtonGroup.LayoutOption.OneProminentGrouped
moreLabel = DeferredText.Constant("More Actions")
moreIcon = DeferredDrawable.Resource(R.drawable.ic_more_horiz)
}
XML attributes
You can configure ButtonGroup properties using XML attributes:
Layout options
|
Attribute |
Description |
|---|---|
|
app:layoutOption="allRound" |
Shows the buttons as fully round icon buttons |
|
app:layoutOption="oneProminentGrouped" |
Similar to oneProminentRelaxed, except corner radius is applied to the container view |
|
app:layoutOption="oneProminentRelaxed" |
Shows the first button as a text button and the rest as icon buttons, with corner radius applied to each button |
Corner radius and spacing
|
Attribute |
Description |
|---|---|
|
app:horizontalProminentButtonSpacing |
Spacing between buttons for grouped and relaxed layouts |
|
app:prominentButtonCornerRadius |
Corner radius for buttons (grouped: applied to container, relaxed: applied to each button) |
More button
|
Attribute |
Description |
|---|---|
|
app:moreContentDescription |
Content description for the "More" button (default: "More") |
|
app:moreIcon |
Icon for the "More" button (default: three vertical dots) |
|
app:moreLabel |
Label for the "More" button (default: "More") |
Configuration
Properties
|
Property |
Type |
Default |
|---|---|---|
|
horizontalProminentButtonSpacing |
Int |
2.dpToPx() |
|
layoutOption |
LayoutOption |
LayoutOption.AllRound |
|
moreContentDescription |
DeferredText |
DeferredText.Resource(R.string.bds_button_group_more_label) |
|
moreIcon |
DeferredDrawable |
DeferredDrawable.Resource(R.drawable.backbase_ic_more_vert) |
|
moreLabel |
DeferredText |
DeferredText.Resource(R.string.bds_button_group_more_label) |
|
prominentButtonCornerRadius |
Int |
16.dpToPx() |
horizontalProminentButtonSpacing
The spacing between prominent buttons (2dp by default).
// Set custom spacing between prominent buttons
buttonGroup.horizontalProminentButtonSpacing = 12.dpToPx()
layoutOption
Returns LayoutOption.AllRound for classic FAB buttons, LayoutOption.OneProminentRelaxed for one prominent button "relaxed", LayoutOption.OneProminentGrouped for one prominent button "grouped".
// Set layout option
buttonGroup.layoutOption = ButtonGroup.LayoutOption.AllRound
buttonGroup.layoutOption = ButtonGroup.LayoutOption.OneProminentRelaxed
buttonGroup.layoutOption = ButtonGroup.LayoutOption.OneProminentGrouped
moreContentDescription
The content description for the "More" label (this label is visible, when there are more than 3 quick actions).
import com.backbase.deferredresources.DeferredText
// Set custom more content description
buttonGroup.moreContentDescription = DeferredText.Constant("More actions available")
moreIcon
The "More" icon (this icon is visible, when there are more than 3 quick actions). By default it has vertical 3 dots icon.
import com.backbase.deferredresources.DeferredDrawable
// Set custom more icon
buttonGroup.moreIcon = DeferredDrawable.Resource(R.drawable.ic_more_horiz)
moreLabel
The text for the "More" label (this label is visible, when there are more than 3 quick actions).
import com.backbase.deferredresources.DeferredText
// Set custom more label
buttonGroup.moreLabel = DeferredText.Constant("More")
prominentButtonCornerRadius
The corner radius for prominent buttons (16dp by default).
// Set custom corner radius for prominent buttons
buttonGroup.prominentButtonCornerRadius = 20.dpToPx()
Methods
addQuickAction(quickAction: QuickAction)
Insert QuickAction into the Button Group view. QuickAction can also be added to the existing button group without reinitialization of the view.
// Add a single quick action to existing button group
val quickAction = ButtonGroup.QuickAction(
text = "New Action",
icon = ContextCompat.getDrawable(context, R.drawable.ic_add)
).apply {
onClick = {
// Handle action
}
}
buttonGroup.addQuickAction(quickAction)
buildButtonGroup(quickActions: List<QuickAction>)
Build the Button Group view based on list of QuickAction.
// Build button group with multiple actions
val quickActions = listOf(
ButtonGroup.QuickAction("Action 1"),
ButtonGroup.QuickAction("Action 2"),
ButtonGroup.QuickAction("Action 3")
)
buttonGroup.buildButtonGroup(quickActions)
QuickAction
QuickAction properties
The ButtonGroup.QuickAction class represents the Quick Action entity for the ButtonGroup view.
|
Property |
Type |
Default |
|---|---|---|
|
contentDescription |
String |
text |
|
icon |
Drawable? |
null |
|
id |
String |
UUID.randomUUID().toString() |
|
onClick |
(() -> Unit)? |
null |
|
text |
String |
Required |
contentDescription
Use text by default.
val quickAction = ButtonGroup.QuickAction(
text = "Save",
contentDescription = "Save document"
)
icon
The icon for the quick action (null by default).
val quickAction = ButtonGroup.QuickAction(
text = "Save",
icon = ContextCompat.getDrawable(context, R.drawable.ic_save)
)
id
Unique identifier.
val quickAction = ButtonGroup.QuickAction(
text = "Save",
id = "save_action_123"
)
onClick
Callback for the action.
val quickAction = ButtonGroup.QuickAction(text = "Save").apply {
onClick = {
// Handle save action
saveDocument()
}
}
text
Text for the quick action.
val quickAction = ButtonGroup.QuickAction(text = "Save Document")
LayoutOption
Layout types
The ButtonGroup.LayoutOption sealed class defines the layout options for a ButtonGroup.
AllRound
Classic FAB buttons layout.
buttonGroup.layoutOption = ButtonGroup.LayoutOption.AllRound
OneProminentGrouped
One prominent button "grouped" layout.
buttonGroup.layoutOption = ButtonGroup.LayoutOption.OneProminentGrouped
OneProminentRelaxed
One prominent button "relaxed" layout.
buttonGroup.layoutOption = ButtonGroup.LayoutOption.OneProminentRelaxed
Events
Quick action events
Each QuickAction can have an onClick callback that is triggered when the action is tapped.
// Set click handlers for quick actions
val quickAction = ButtonGroup.QuickAction("Action").apply {
onClick = {
// Handle action click
performAction()
}
}
// Add to button group
buttonGroup.addQuickAction(quickAction)
Accessibility
Best practices
- Use meaningful text for quick actions as they serve as accessibility labels
- Set appropriate content descriptions for actions when they differ from the text
- Ensure the more button is properly announced when there are additional actions
// Configure for accessibility
val quickAction = ButtonGroup.QuickAction(
text = "Save",
contentDescription = "Save the current document"
)
// Configure more button accessibility
buttonGroup.moreContentDescription = DeferredText.Constant("Show more actions")
Design tokens
Component tokens used by this component for theming:
Token group layoutOptions:
- AllRound: Classic floating action button layout
- OneProminentRelaxed: Single prominent button with relaxed spacing
- OneProminentGrouped: Single prominent button with grouped appearance
Token group spacing:
- horizontalProminentButtonSpacing: Spacing between prominent buttons
- HORIZONTAL_ICON_BUTTON_SPACING_DP: Spacing for icon buttons
Token group sizing:
- prominentButtonCornerRadius: Corner radius for prominent buttons
- PROMINENT_BUTTON_SIZE_DP: Size of prominent buttons
Token group resources:
- moreLabel: Text resource for more button
- moreIcon: Icon resource for more button
- moreContentDescription: Content description for more button