Import
View-based framework
import com.backbase.android.design.inlinealert.InlineAlert
Usage
Basic usage
Create an InlineAlert with title and apply a style.
<com.backbase.android.design.inlinealert.InlineAlert
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="This is the alert title"
app:showDismissAction="true" />
// Apply info style programmatically
inlineAlert.info()
Advanced usage
Create an InlineAlert with title, subtitle, and action buttons.
<com.backbase.android.design.inlinealert.InlineAlert
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="Update Available"
app:subtitle="There's an update waiting for you in the Play Store"
app:primaryActionText="Update Now"
app:secondaryActionText="Later"
app:showDismissAction="true" />
// Set up click listeners
inlineAlert.setOnPrimaryActionClickListener {
// Handle primary action
}
inlineAlert.setOnSecondaryActionClickListener {
// Handle secondary action
}
inlineAlert.setOnDismissClickListener {
// Handle dismiss action
}
Configuration
XML attributes
|
Attribute |
Type |
Default |
|---|---|---|
|
app:dismissIconContentDescription |
string |
Empty string |
|
app:isIconVisible |
boolean |
true |
|
app:primaryActionText |
string |
Empty string |
|
app:secondaryActionText |
string |
Empty string |
|
app:showDismissAction |
boolean |
false |
|
app:subtitle |
string |
Empty string |
|
app:title |
string |
Empty string |
app:dismissIconContentDescription
Content description for the dismiss icon for accessibility.
<com.backbase.android.design.inlinealert.InlineAlert
app:dismissIconContentDescription="Close alert" />
app:isIconVisible
Controls the visibility of the left icon.
<com.backbase.android.design.inlinealert.InlineAlert
app:isIconVisible="false" />
app:primaryActionText
Text for the primary action button.
<com.backbase.android.design.inlinealert.InlineAlert
app:primaryActionText="Confirm" />
app:secondaryActionText
Text for the secondary action button.
<com.backbase.android.design.inlinealert.InlineAlert
app:secondaryActionText="Cancel" />
app:showDismissAction
Controls the visibility of the dismiss icon.
<com.backbase.android.design.inlinealert.InlineAlert
app:showDismissAction="true" />
app:subtitle
The subtitle text of the alert.
<com.backbase.android.design.inlinealert.InlineAlert
app:subtitle="Additional information about the alert" />
app:title
The main title text of the alert.
<com.backbase.android.design.inlinealert.InlineAlert
app:title="Alert Title" />
Properties
|
Property |
Type |
Default |
|---|---|---|
|
dismissActionContentDescription |
String |
Empty string |
|
isIconVisible |
Boolean |
true |
|
primaryActionText |
CharSequence |
Empty string |
|
secondaryActionText |
CharSequence |
Empty string |
|
showDismissAction |
Boolean |
true |
|
subtitle |
CharSequence |
Empty string |
|
title |
CharSequence |
Empty string |
dismissActionContentDescription
Sets the content description of the dismiss view for accessibility.
inlineAlert.dismissActionContentDescription = "Close notification"
isIconVisible
Controls the visibility of the left icon.
inlineAlert.isIconVisible = false
primaryActionText
Sets the primary action text and controls visibility of the primary button.
inlineAlert.primaryActionText = "Confirm Action"
secondaryActionText
Sets the secondary action text and controls visibility of the secondary button.
inlineAlert.secondaryActionText = "Cancel"
showDismissAction
Controls the visibility of the dismiss icon.
inlineAlert.showDismissAction = true
subtitle
Sets the subtitle text and controls visibility of the subtitle view.
inlineAlert.subtitle = "This is additional information"
title
Sets the title text and controls visibility of the title view.
inlineAlert.title = "Important Alert"
Methods
|
Method |
Parameters |
Description |
|---|---|---|
|
danger() |
None |
Applies danger style |
|
info() |
None |
Applies info style |
|
setOnDismissClickListener |
() -> Unit |
Sets dismiss click listener |
|
setOnPrimaryActionClickListener |
() -> Unit |
Sets primary action click listener |
|
setOnSecondaryActionClickListener |
() -> Unit |
Sets secondary action click listener |
|
setStyle(attrId) |
@AttrRes attrId: Int |
Applies custom style |
|
success() |
None |
Applies success style |
|
warning() |
None |
Applies warning style |
danger()
Updates the style of the InlineAlert to danger theme.
inlineAlert.danger()
info()
Updates the style of the InlineAlert to info theme.
inlineAlert.info()
setOnDismissClickListener
Sets a listener for dismiss icon click events.
inlineAlert.setOnDismissClickListener {
// Handle dismiss action
}
setOnPrimaryActionClickListener
Sets a listener for primary action button click events.
inlineAlert.setOnPrimaryActionClickListener {
// Handle primary action
}
setOnSecondaryActionClickListener
Sets a listener for secondary action button click events.
inlineAlert.setOnSecondaryActionClickListener {
// Handle secondary action
}
setStyle(attrId)
Applies a custom style using the specified attribute resource.
inlineAlert.setStyle(R.attr.customInlineAlertStyle)
success()
Updates the style of the InlineAlert to success theme.
inlineAlert.success()
warning()
Updates the style of the InlineAlert to warning theme.
inlineAlert.warning()
Styling
Predefined styles
|
Style |
Description |
|---|---|
|
danger() |
Danger alert with red theme |
|
info() |
Information alert with blue theme |
|
success() |
Success alert with green theme |
|
warning() |
Warning alert with yellow theme |
// Apply different styles
inlineAlert.info()
inlineAlert.success()
inlineAlert.warning()
inlineAlert.danger()
Custom styling
<!-- Define custom style in styles.xml -->
<style name="CustomInlineAlert" parent="Widget.Backbase.InlineAlert">
<item name="backgroundTint">@color/custom_background</item>
<item name="titleColor">@color/custom_title_color</item>
<item name="iconColor">@color/custom_icon_color</item>
</style>
// Apply custom style
inlineAlert.setStyle(R.attr.customInlineAlertStyle)
Events
|
Method |
Parameters |
Description |
|---|---|---|
|
setOnDismissClickListener |
() -> Unit |
Handle dismiss icon click events |
|
setOnPrimaryActionClickListener |
() -> Unit |
Handle primary action click events |
|
setOnSecondaryActionClickListener |
() -> Unit |
Handle secondary action click events |
// Set up click listeners for action buttons
inlineAlert.setOnPrimaryActionClickListener {
// Handle primary action click
}
inlineAlert.setOnSecondaryActionClickListener {
// Handle secondary action click
}
inlineAlert.setOnDismissClickListener {
// Handle dismiss action click
}
Accessibility
The InlineAlert automatically supports accessibility features.
Best practices
- The component returns ImageButton::class.java.name as accessibility class name
- Title and subtitle text are automatically used for content description
- Use dismissIconContentDescription to provide clear dismiss action description
- Ensure action buttons have descriptive text for screen readers
// Accessibility configuration example
inlineAlert.title = "Update Available"
inlineAlert.subtitle = "A new version is ready to install"
inlineAlert.dismissActionContentDescription = "Dismiss update notification"
inlineAlert.primaryActionText = "Install Update"
inlineAlert.secondaryActionText = "Remind Me Later"
Design tokens
This component uses design tokens for consistent theming:
Typography tokens:
- Title text appearance: ?textAppearanceSubtitle1Medium
- Subtitle text appearance: ?textAppearanceBody2
- Primary button text appearance: ?textAppearanceBody1Medium
- Secondary button text appearance: ?textAppearanceBody1
Color tokens:
- Background colors: Theme-specific subtle colors (info, success, warning, danger)
- Title color: ?colorForegroundDefault
- Subtitle color: ?colorForegroundDefault
- Button text color: ?colorForegroundBrand
- Icon colors: Theme-specific on-background colors
Spacing tokens:
- Container padding: ?spacerMedium
- Icon size: ?sizerLarge
- Button padding: ?spacerSmall (vertical), ?spacerLarge (horizontal)
- Content spacing: ?spacerSmall and ?spacerXSmall
Elevation tokens:
- Card elevation: ?elevationSmall