Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package.
Kotlin
If you need to reference the BackbaseCheckBox component in your Kotlin code, import it at the top of your file.
import com.backbase.android.design.button.BackbaseCheckBox
XML
Components work automatically in XML files if the component path matches the installed package.
<com.backbase.android.design.button.BackbaseCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
Usage
Basic usage
Use BackbaseCheckBox in XML layouts with Material Design styling. The component extends MaterialCheckBox providing full access to the MaterialCheckBox API.
<!-- Basic checkbox with default styling -->
<com.backbase.android.design.button.BackbaseCheckBox
style="?checkBoxStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I agree to the terms" />
Advanced usage
<!-- Checkbox with custom configuration and error state -->
<com.backbase.android.design.button.BackbaseCheckBox
style="?checkBoxStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enable notifications"
android:checked="false"
app:state_error="false" />
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
android:checked |
Boolean |
false |
|
android:enabled |
Boolean |
true |
|
android:text |
String |
"" |
|
app:state_error |
Boolean |
false |
|
error |
Boolean |
false |
|
stateDescription |
StateDescription |
StateDescription(context) |
android:checked
The android:checked attribute controls the selection state of the checkbox.
<!-- Checked checkbox -->
<com.backbase.android.design.button.BackbaseCheckBox
android:checked="true"
android:text="Checked option" />
android:enabled
The android:enabled attribute controls the interactivity of the checkbox.
<!-- Disabled checkbox -->
<com.backbase.android.design.button.BackbaseCheckBox
android:enabled="false"
android:text="Disabled option" />
android:text
The android:text attribute sets the text label displayed next to the checkbox.
<!-- Checkbox with text label -->
<com.backbase.android.design.button.BackbaseCheckBox
android:text="Accept terms and conditions" />
app:state_error
The app:state_error attribute sets the checkbox to error state in XML, which prevents checking and applies error styling.
<!-- Checkbox with error state -->
<com.backbase.android.design.button.BackbaseCheckBox
android:text="Required field"
app:state_error="true" />
error
The error property programmatically controls the error state of the checkbox.
// Set error state in Kotlin
val checkbox: BackbaseCheckBox = findViewById(R.id.checkbox)
checkbox.error = true
// Clear error state
checkbox.error = false
stateDescription
The stateDescription property manages accessibility state descriptions for error states.
// Custom state description
val customDescription = BackbaseCheckBox.StateDescription("Custom error message")
checkbox.stateDescription = customDescription
Styling
Predefined styles
The BackbaseCheckBox uses Material Design styling through the style attribute. Always use predefined styles to ensure consistency.
<!-- Checkbox with default style -->
<com.backbase.android.design.button.BackbaseCheckBox
style="?checkBoxStyle"
android:text="Styled checkbox" />
Material Design integration
The component extends MaterialCheckBox, providing full Material Design theming support.
<!-- Checkbox with Material theming -->
<com.backbase.android.design.button.BackbaseCheckBox
style="?attr/materialCheckBoxStyle"
android:text="Material styled checkbox" />
States
Selection states
The BackbaseCheckBox supports standard checked and unchecked states.
// Different selection states
val checkbox: BackbaseCheckBox = findViewById(R.id.checkbox)
// Check the checkbox
checkbox.isChecked = true
// Uncheck the checkbox
checkbox.isChecked = false
Error state
The BackbaseCheckBox provides an additional error state that prevents checking and applies error styling.
// Set error state
checkbox.error = true // Automatically unchecks the checkbox
// Clear error state
checkbox.error = false
Disabled state
Control checkbox interactivity using the enabled property.
// Disable checkbox
checkbox.isEnabled = false
// Enable checkbox
checkbox.isEnabled = true
Events
BackbaseCheckBox uses standard Android listeners for handling state changes.
// Set checked change listener
val checkbox: BackbaseCheckBox = findViewById(R.id.checkbox)
checkbox.setOnCheckedChangeListener { _, isChecked ->
// Handle checked state change
if (isChecked) {
println("Checkbox was checked")
} else {
println("Checkbox was unchecked")
}
}
// Set click listener
checkbox.setOnClickListener {
// Handle checkbox click
handleCheckboxClick()
}
Accessibility
Enhanced accessibility support
BackbaseCheckBox extends MaterialCheckBox accessibility with error state descriptions.
Best practices
- BackbaseCheckBox extends MaterialCheckBox which provides standard Android accessibility behavior
- Error states are automatically communicated through state descriptions
- State changes are properly announced to accessibility services
// Configure accessibility
checkbox.contentDescription = "Accept terms and conditions checkbox"
// Error state accessibility is handled automatically
checkbox.error = true // Automatically adds error description
StateDescription class
The StateDescription class manages error-related accessibility announcements.
// Access default state description
val defaultDescription = BackbaseCheckBox.StateDescription(context)
println(defaultDescription.error) // Prints localized error message
// Set custom state description
val customDescription = BackbaseCheckBox.StateDescription("Custom error text")
checkbox.stateDescription = customDescription
Design tokens
The BackbaseCheckBox uses Material Design theming through styled attributes and can be customized via the global theme.
Theming elements:
- Style: ?checkBoxStyle attribute for default styling
- Colors: Material Design color theming with error state support
- Layout: Material Design spacing and sizing
- Typography: Material Design text styling for labels
- States: Additional error drawable state beyond standard Material states