Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package.
XML
Components work automatically in XML files if the component path matches the installed package.
<com.google.android.material.button.MaterialButtonToggleGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:singleSelection="true">
<Button
style="?buttonStyleToggleDefault"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 1" />
</com.google.android.material.button.MaterialButtonToggleGroup>
Usage
Basic usage
Use MaterialButtonToggleGroup in XML layouts with Button children styled using predefined toggle button styles.
<!-- Basic toggle button group with text buttons -->
<com.google.android.material.button.MaterialButtonToggleGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:singleSelection="true">
<Button
style="?buttonStyleToggleDefault"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Now" />
<Button
style="?buttonStyleToggleDefault"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Later" />
<Button
style="?buttonStyleToggleDefault"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recurring" />
</com.google.android.material.button.MaterialButtonToggleGroup>
Advanced usage
<!-- Toggle button group with icons and multi-selection -->
<com.google.android.material.button.MaterialButtonToggleGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
app:singleSelection="false">
<Button
style="?buttonStyleToggleIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="?iconPermIdentity" />
<Button
style="?buttonStyleToggleIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="?iconPets" />
<Button
style="?buttonStyleToggleIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="?iconMonetizationOn" />
</com.google.android.material.button.MaterialButtonToggleGroup>
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
android:gravity |
enum |
start |
|
android:orientation |
enum |
horizontal |
|
app:singleSelection |
boolean |
false |
android:gravity
The android:gravity property controls the alignment of buttons within the toggle group container.
<!-- Center-aligned toggle buttons -->
<com.google.android.material.button.MaterialButtonToggleGroup
android:gravity="center"
app:singleSelection="true">
<!-- Button children -->
</com.google.android.material.button.MaterialButtonToggleGroup>
android:orientation
The android:orientation property sets the layout direction of the toggle buttons.
<!-- Vertical toggle button layout -->
<com.google.android.material.button.MaterialButtonToggleGroup
android:orientation="vertical"
app:singleSelection="true">
<!-- Button children -->
</com.google.android.material.button.MaterialButtonToggleGroup>
app:singleSelection
The app:singleSelection property controls whether only one button can be selected at a time or multiple buttons can be selected.
<!-- Single selection mode (radio button behavior) -->
<com.google.android.material.button.MaterialButtonToggleGroup
app:singleSelection="true">
<!-- Only one button can be selected -->
</com.google.android.material.button.MaterialButtonToggleGroup>
<!-- Multi-selection mode (checkbox behavior) -->
<com.google.android.material.button.MaterialButtonToggleGroup
app:singleSelection="false">
<!-- Multiple buttons can be selected -->
</com.google.android.material.button.MaterialButtonToggleGroup>
Styling
Predefined styles
The ToggleButton provides predefined styles for consistent theming with the design system.
|
Style |
Usage |
Description |
|---|---|---|
|
?buttonStyleToggleDefault |
Text buttons |
Standard toggle button with text content |
|
?buttonStyleToggleIcon |
Icon buttons |
Toggle button optimized for icon-only content |
<!-- Text toggle button -->
<Button
style="?buttonStyleToggleDefault"
android:text="Toggle Text" />
<!-- Icon toggle button -->
<Button
style="?buttonStyleToggleIcon"
app:icon="?iconStar" />
Button layout options
Control button sizing using standard Android layout attributes.
<!-- Equal width buttons using layout_weight -->
<com.google.android.material.button.MaterialButtonToggleGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:singleSelection="true">
<Button
style="?buttonStyleToggleDefault"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Equal" />
<Button
style="?buttonStyleToggleDefault"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Width" />
</com.google.android.material.button.MaterialButtonToggleGroup>
States
Selection states
Toggle buttons support checked and unchecked states with automatic visual feedback.
<!-- Button with initial checked state -->
<Button
style="?buttonStyleToggleDefault"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Initially Selected" />
Content types
Toggle buttons support text content, icons, or both.
<!-- Text-only toggle button -->
<Button
style="?buttonStyleToggleDefault"
android:text="Text Only" />
<!-- Icon-only toggle button -->
<Button
style="?buttonStyleToggleIcon"
app:icon="?iconSettings" />
<!-- Text and icon toggle button -->
<Button
style="?buttonStyleToggleDefault"
android:text="With Icon"
app:icon="?iconAdd" />
Events
|
Event |
Type |
Description |
|---|---|---|
|
addOnButtonCheckedListener |
(MaterialButtonToggleGroup, Int, Boolean) -> Unit |
Listener for button selection changes |
// Handle toggle group selection changes
val toggleGroup: MaterialButtonToggleGroup = findViewById(R.id.toggle_group)
toggleGroup.addOnButtonCheckedListener { group, checkedId, isChecked ->
// Handle selection change in the group
if (isChecked) {
println("Button $checkedId was selected")
} else {
println("Button $checkedId was deselected")
}
}
Accessibility
Accessibility configuration
|
Property |
Description |
Type |
|---|---|---|
|
android:contentDescription |
Descriptive text for screen readers |
String |
Best practices
- MaterialButtonToggleGroup and Button components provide standard Android accessibility behavior
- Button text content is automatically accessible to screen readers
- Selection state changes are communicated through accessibility announcements
- Use meaningful text content or content descriptions for icon-only buttons
<!-- Toggle button with accessibility support -->
<Button
style="?buttonStyleToggleIcon"
android:contentDescription="@string/toggle_favorites"
app:icon="?iconFavorite" />
Design tokens
The ToggleButton uses Material Design theming through styled attributes and can be customized via the global theme.
Token group Colors:
- Background: ?colorBackgroundBrandSubtle for checked background, transparent for unchecked
- Stroke: ?colorOnBackgroundBrandSubtle for checked border, ?colorBorderSubtle for unchecked
- Text: ?colorForegroundSupport for button text
- Icons: ?colorForegroundSupport for icon tinting
Token group Typography:
- Text styling: ?textAppearanceBody2Medium
Token group Layout:
- Dimensions: Material Design button dimensions with 48dp minimum touch target