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.switchmaterial.SwitchMaterial
android:id="@+id/switch_control"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enable notifications" />
Usage
Basic usage
Use SwitchMaterial in XML layouts with automatic design system theming applied through the switchStyle attribute.
<!-- Basic switch with text label -->
<com.google.android.material.switchmaterial.SwitchMaterial
android:id="@+id/switch_control"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Enable feature" />
// Basic usage with state handling
val switchControl = findViewById<SwitchMaterial>(R.id.switch_control)
switchControl.setOnCheckedChangeListener { _, isChecked ->
// Handle switch state change
println("Feature state: $isChecked")
}
Advanced usage
// Advanced usage with programmatic configuration
val switchControl = findViewById<SwitchMaterial>(R.id.switch_control)
switchControl.apply {
isChecked = false
text = "Advanced setting"
setOnCheckedChangeListener { _, isChecked ->
if (isChecked) {
println("Advanced features enabled")
} else {
println("Advanced features disabled")
}
}
}
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
android:checked |
boolean |
false |
|
android:enabled |
boolean |
true |
|
android:text |
String |
null |
android:checked
The android:checked property controls the initial state of the switch.
<!-- Switch initially checked -->
<com.google.android.material.switchmaterial.SwitchMaterial
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Initially enabled" />
android:enabled
The android:enabled property controls whether the switch can be interacted with.
<!-- Disabled switch -->
<com.google.android.material.switchmaterial.SwitchMaterial
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:enabled="false"
android:text="Disabled switch" />
android:text
The android:text property sets the label text displayed alongside the switch.
<!-- Switch with descriptive text -->
<com.google.android.material.switchmaterial.SwitchMaterial
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enable push notifications" />
Styling
Predefined styles
The Switch uses the design system's predefined style for consistent theming across the application.
|
Style |
Usage |
Description |
|---|---|---|
|
?switchStyle |
Default |
Design system switch styling with custom colors and spacing |
<!-- Switch with default design system styling -->
<com.google.android.material.switchmaterial.SwitchMaterial
style="?switchStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Styled switch" />
Custom attributes
The switch styling can be customized through various Material Design attributes while maintaining design system consistency.
<!-- Switch with custom layout attributes -->
<com.google.android.material.switchmaterial.SwitchMaterial
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="?sizerMedium"
android:layout_marginEnd="?sizerMedium"
android:text="Custom spacing switch" />
States
Switch states
The Switch supports checked and unchecked states with automatic visual feedback and accessibility support.
<!-- Switch in different states -->
<com.google.android.material.switchmaterial.SwitchMaterial
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Checked switch" />
<com.google.android.material.switchmaterial.SwitchMaterial
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:text="Unchecked switch" />
Disabled states
Switches can be disabled while maintaining their checked or unchecked state.
// Programmatically control switch state
val switchControl = findViewById<SwitchMaterial>(R.id.switch_control)
switchControl.isChecked = true
switchControl.isEnabled = false
// Toggle switch state
switchControl.toggle()
// Check current state
if (switchControl.isChecked) {
println("Switch is enabled")
}
Events
|
Event |
Type |
Description |
|---|---|---|
|
setOnCheckedChangeListener |
OnCheckedChangeListener |
Listener for switch state changes |
// Handle switch state changes
val switchControl = findViewById<SwitchMaterial>(R.id.switch_control)
switchControl.setOnCheckedChangeListener { compoundButton, isChecked ->
// Update application state based on switch
when (isChecked) {
true -> println("Feature enabled")
false -> println("Feature disabled")
}
}
Accessibility
Accessibility configuration
|
Property |
Description |
Type |
|---|---|---|
|
android:contentDescription |
Descriptive text for screen readers |
String |
Best practices
- SwitchMaterial provides standard Material Design accessibility behavior
- Switch text is automatically accessible to screen readers
- State changes are communicated through accessibility announcements
- Use meaningful text labels to describe the switch purpose
- Content descriptions should supplement, not replace, the switch text
<!-- Switch with accessibility support -->
<com.google.android.material.switchmaterial.SwitchMaterial
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enable notifications"
android:contentDescription="Toggle push notification settings" />
Design tokens
The Switch uses Material Design theming through styled attributes and can be customized via the global theme.
Token group Colors:
- Thumb: Custom drawable @drawable/backbase_component_switch_thumb for switch thumb styling
- Track: @color/backbase_switch_track_selector for track color states
- Text: ?colorForegroundDefault for switch label text
Token group Layout:
- Padding: ?sizerXSmall for switch internal padding
- Dimensions: wrap_content for width and height with Material Design touch targets
Token group Typography:
- Text appearance: ?textAppearanceBody1 for switch label text
- Text color: ?colorForegroundDefault for consistent text styling