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.
import com.google.android.material.snackbar.Snackbar
Usage
Basic usage
Apply Snackbar styles through the design system theme to get consistent theming for snackbar notifications.
Snackbar.make(view, "Message text", Snackbar.LENGTH_SHORT).show()
With action button
Use Snackbar with action button to provide interactive notifications with design system styling.
Snackbar.make(view, "Message with action", Snackbar.LENGTH_LONG)
.setAction("Action") {
// Handle action click
}
.show()
Multi-line message
Use Snackbar with multi-line messages for longer notification content.
Snackbar.make(view, "First line message\nSecond line message", Snackbar.LENGTH_LONG)
.setAction("Dismiss") {
// Handle dismiss action
}
.show()
Configuration
|
Style |
Type |
Description |
|---|---|---|
|
snackbarButtonStyle |
Style reference |
Snackbar action button style |
|
snackbarStyle |
Style reference |
Default snackbar container style |
|
snackbarTextViewStyle |
Style reference |
Snackbar message text style |
snackbarButtonStyle
The snackbarButtonStyle provides styling for action buttons within snackbars with consistent corner radius, text appearance, and color theming.
Snackbar.make(view, "Message", Snackbar.LENGTH_SHORT)
.setAction("Button") { /* action */ }
.show()
snackbarStyle
The snackbarStyle provides the default styling for the snackbar container with consistent background color and action text transparency.
Snackbar.make(view, "Styled message", Snackbar.LENGTH_SHORT).show()
snackbarTextViewStyle
The snackbarTextViewStyle provides styling for the message text within snackbars with consistent text color and typography.
Snackbar.make(view, "Styled text message", Snackbar.LENGTH_LONG).show()
Styling
Container styling
The Snackbar container style provides consistent background and action text styling:
- Background: Uses inverted background color for contrast against app content
- Action text: Full opacity for better visibility and accessibility
- Layout: Inherits Material Design snackbar positioning and behavior
// Style automatically applies to snackbar container
Snackbar.make(view, "Container styled message", Snackbar.LENGTH_SHORT).show()
Text styling
The snackbar text style ensures consistent typography and color for message content:
- Typography: Uses medium body text appearance for readability
- Color: Uses inverted text color for proper contrast
- Layout: Supports single and multi-line message content
// Text styling applied automatically
Snackbar.make(view, "Text with consistent styling", Snackbar.LENGTH_LONG).show()
Action button styling
The action button style provides consistent appearance for interactive elements:
- Corner radius: Uses prominent button radius for visual consistency
- Typography: Uses medium subtitle text appearance
- Color: Uses inverted text color for proper contrast
// Action button styling applied automatically
Snackbar.make(view, "Message", Snackbar.LENGTH_LONG)
.setAction("Styled Action") { /* action */ }
.show()
Design tokens
The Snackbar styles use design tokens for consistent theming:
- Background: Uses colorBackgroundInverted semantic token for the snackbar container
- Text color: Uses colorOnBackgroundInverted for message and action button text
- Typography: Action buttons use textAppearanceSubtitle2Medium, message text uses textAppearanceBody2Medium
- Corner radius: Action buttons use radiusProminentButton design token
- Transparency: Action text uses full opacity actionTextColorAlpha: 1) for accessibility
// Styles automatically apply design tokens
Snackbar.make(view, "Design system themed message", Snackbar.LENGTH_SHORT)
.setAction("Themed Action") { /* action */ }
.show()