Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package and import it at the top of your file.
Kotlin
If you need to reference the State View 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.state.StateView
XML
As long as you've properly installed and set up Backbase Design System in your project, you don't need to import components from those packages in your XML files anymore—they'll work automatically if the component path matches the installed package.
<com.backbase.android.design.state.StateView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Usage
Basic usage
Create a state view using XML with predefined templates.
<com.backbase.android.design.state.StateView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:template="loading_failed"
app:title="Couldn't load page"
app:message="Something went wrong"
app:primaryAction="Try again" />
Advanced usage
<com.backbase.android.design.state.StateView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:template="custom"
app:icon="?iconPets"
app:iconBackground="?colorPrimary"
app:iconColor="?colorOnPrimary"
app:title="Custom State"
app:message="This is a custom state with multiple actions"
app:primaryAction="Primary Action"
app:secondaryAction="Secondary Action"
app:tertiaryAction="Tertiary Action"
app:primaryActionExpanded="false"
app:secondaryActionExpanded="false"
app:tertiaryActionExpanded="false"
app:titleAppearance="?textAppearanceHeadline6"
app:messageAppearance="@style/TextAppearance.Backbase.Subtitle1.StateViewMessage" />
Configuration
XML attributes
|
Attribute |
Type |
Default |
|---|---|---|
|
icon |
drawable |
Template-specific |
|
iconBackground |
color |
?stateViewIconBackground |
|
iconColor |
color |
?stateViewIconColor |
|
message |
string |
Template-specific |
|
messageAppearance |
style |
?textAppearanceBody1 |
|
messageTextColor |
color |
?colorForegroundSupport |
|
primaryAction |
string |
Template-specific |
|
primaryActionExpanded |
boolean |
false |
|
secondaryAction |
string |
null |
|
secondaryActionExpanded |
boolean |
false |
|
template |
enum |
no_result_found |
|
tertiaryAction |
string |
null |
|
tertiaryActionExpanded |
boolean |
false |
|
title |
string |
Template-specific |
|
titleAppearance |
style |
?textAppearanceHeadline6 |
Kotlin properties
|
Property |
Type |
Default |
|---|---|---|
|
template |
Template |
NoResultFound |
|
primaryActionExpanded |
Boolean |
false |
|
secondaryActionExpanded |
Boolean |
false |
|
tertiaryActionExpanded |
Boolean |
false |
template
Sets the predefined template for the state view.
// Set template programmatically
stateView.template = LoadingFailed
stateView.template = NoInternetConnection
stateView.template = NoResultFound
<!-- Set template in XML -->
<com.backbase.android.design.state.StateView
app:template="loading_failed" />
primaryActionExpanded
Controls whether the primary action button expands to full width.
// Expand primary button to full width
stateView.primaryActionExpanded = true
<com.backbase.android.design.state.StateView
app:primaryActionExpanded="true" />
secondaryActionExpanded
Controls whether the secondary action button expands to full width.
// Expand secondary button to full width
stateView.secondaryActionExpanded = true
<com.backbase.android.design.state.StateView
app:secondaryActionExpanded="true" />
tertiaryActionExpanded
Controls whether the tertiary action button expands to full width.
// Expand tertiary button to full width
stateView.tertiaryActionExpanded = true
<com.backbase.android.design.state.StateView
app:tertiaryActionExpanded="true" />
Programmatic configuration
Accessing child views
// Access child views directly
val iconView: IconView = stateView.iconView
val titleView: TextView = stateView.titleView
val messageView: TextView = stateView.messageView
val primaryActionView: MaterialButton = stateView.primaryActionView
val secondaryActionView: MaterialButton = stateView.secondaryActionView
val tertiaryActionView: MaterialButton = stateView.tertiaryActionView
Custom template configuration
// Create custom state with code
stateView.template = Custom(
icon = Custom.Icon(
drawable = DeferredDrawable.Attribute(R.attr.iconPets).resolve(requireContext()),
background = DeferredColor.Attribute(R.attr.colorPrimary).resolveToStateList(requireContext()),
color = DeferredColor.Attribute(R.attr.colorOnPrimary).resolve(requireContext())
),
title = "Custom Title",
message = "This is a custom message",
primaryAction = Custom.Action(
text = "Primary Action",
visibility = true
) {
Toast.makeText(context, "Primary action clicked!", Toast.LENGTH_LONG).show()
},
secondaryAction = Custom.Action(
text = "Secondary Action",
visibility = true
) {
Toast.makeText(context, "Secondary action clicked!", Toast.LENGTH_LONG).show()
}
)
Predefined templates
Loading failed template
<com.backbase.android.design.state.StateView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:template="loading_failed" />
stateView.template = LoadingFailed
No internet connection template
<com.backbase.android.design.state.StateView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:template="no_internet_connection" />
stateView.template = NoInternetConnection
No result found template
<com.backbase.android.design.state.StateView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:template="no_result_found" />
stateView.template = NoResultFound
Custom template
<com.backbase.android.design.state.StateView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:template="custom"
app:icon="?iconPets"
app:title="Custom Title"
app:message="Custom message" />
Styling
Predefined styles
The StateView provides several predefined styles to maintain consistent appearance.
|
Style |
Description |
|---|---|
|
Widget.Backbase.StateView |
Base state view style |
|
Widget.Backbase.StateView.LoadingFailed |
Loading failed state style |
|
Widget.Backbase.StateView.NoInternetConnection |
No internet connection state style |
|
Widget.Backbase.StateView.NoResultFound |
No result found state style |
Widget.Backbase.StateView
<style name="Widget.Backbase.StateView" parent="">
<item name="iconBackground">?stateViewIconBackground</item>
<item name="iconColor">?stateViewIconColor</item>
<item name="template">custom</item>
<item name="primaryActionExpanded">false</item>
<item name="secondaryActionExpanded">false</item>
<item name="titleAppearance">?textAppearanceHeadline6</item>
<item name="messageAppearance">?textAppearanceBody1</item>
<item name="messageTextColor">?colorForegroundSupport</item>
</style>
Widget.Backbase.StateView.LoadingFailed
<style name="Widget.Backbase.StateView.LoadingFailed">
<item name="template">loading_failed</item>
</style>
Widget.Backbase.StateView.NoInternetConnection
<style name="Widget.Backbase.StateView.NoInternetConnection">
<item name="template">no_internet_connection</item>
</style>
Widget.Backbase.StateView.NoResultFound
<style name="Widget.Backbase.StateView.NoResultFound">
<item name="template">no_result_found</item>
</style>
Events
Button click listeners
// Set click listeners for action buttons
stateView.primaryActionView.setOnClickListener {
// Handle primary action
}
stateView.secondaryActionView.setOnClickListener {
// Handle secondary action
}
stateView.tertiaryActionView.setOnClickListener {
// Handle tertiary action
}
Accessibility
Accessibility configuration
The StateView automatically provides accessibility support for its child components.
// Configure accessibility labels
stateView.titleView.contentDescription = "State title"
stateView.messageView.contentDescription = "State message"
stateView.primaryActionView.contentDescription = "Primary action button"
Best practices
- Provide meaningful content descriptions for all interactive elements
- Ensure button text clearly describes the action that will be performed
- Use appropriate text appearances for title and message content
- Consider providing accessibility hints for complex interactions
Design tokens
The component uses Backbase design tokens for consistent theming:
Token group stateView:
- stateViewIconBackground: Icon background color
- stateViewIconColor: Icon foreground color
- textAppearanceHeadline6: Title text appearance
- textAppearanceBody1: Message text appearance
- colorForegroundSupport: Message text color
- colorPrimary: Primary color for custom icons
- colorOnPrimary: Text color on primary background