Import
View-based framework
Add the Badge to your layout file or create it programmatically in your Activity or Fragment.
<!-- Add to your layout file -->
<com.backbase.android.design.badge.Badge
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Usage
Basic usage
<!-- Basic badge with default neutral style -->
<com.backbase.android.design.badge.Badge
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New" />
Advanced usage
<!-- Badge with custom styling -->
<com.backbase.android.design.badge.Badge
style="?badgeWarningStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Warning"
android:textColor="?colorOnWarning" />
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
android:text |
String |
"" |
|
android:textColor |
Color |
Theme-dependent |
|
style |
Style |
?badgeNeutralStyle |
android:text
The android:text property sets the text content to be displayed in the badge.
<!-- Badge with text content -->
<com.backbase.android.design.badge.Badge
android:text="Status" />
android:textColor
The android:textColor property sets the color of the text displayed in the badge.
<!-- Badge with custom text color -->
<com.backbase.android.design.badge.Badge
android:text="Custom"
android:textColor="?colorOnSurface" />
style
The style property applies predefined styling attributes for different badge appearances.
<!-- Badge with danger style -->
<com.backbase.android.design.badge.Badge
style="?badgeDangerStyle"
android:text="Error" />
Methods
setStyle
The setStyle method programmatically changes the badge's appearance style.
// Change badge style programmatically
val badge: Badge = findViewById(R.id.status_badge)
badge.setStyle(R.attr.badgeSuccessStyle)
Styling
Predefined styles
The Badge provides five predefined styles for different semantic meanings.
|
Description |
Style |
Usage |
|---|---|---|
Neutral style |
?badgeNeutralStyle |
Standard neutral styling |
Informational content |
?badgeInfoStyle |
Info-themed styling |
Positive feedback |
?badgeSuccessStyle |
Success-themed styling |
Caution alerts |
?badgeWarningStyle |
Warning-themed styling |
Error states |
?badgeDangerStyle |
Red-themed styling |
<!-- Different badge styles -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.backbase.android.design.badge.Badge
style="?badgeNeutralStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Neutral" />
<com.backbase.android.design.badge.Badge
style="?badgeInfoStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Info" />
<com.backbase.android.design.badge.Badge
style="?badgeSuccessStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Success" />
<com.backbase.android.design.badge.Badge
style="?badgeWarningStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Warning" />
<com.backbase.android.design.badge.Badge
style="?badgeDangerStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Danger" />
</LinearLayout>
Programmatic styling
// Apply different styles programmatically
val badge: Badge = findViewById(R.id.dynamic_badge)
// Set different styles based on conditions
when (status) {
Status.SUCCESS -> badge.setStyle(R.attr.badgeSuccessStyle)
Status.WARNING -> badge.setStyle(R.attr.badgeWarningStyle)
Status.ERROR -> badge.setStyle(R.attr.badgeDangerStyle)
else -> badge.setStyle(R.attr.badgeNeutralStyle)
}
Accessibility
Best practices
- Badge extends MaterialTextView which provides standard Android accessibility behavior
- Text content is automatically accessible to screen readers
- Consider using meaningful text that describes the badge's purpose
<!-- Badge with descriptive content for accessibility -->
<com.backbase.android.design.badge.Badge
android:text="3 new notifications"
android:contentDescription="You have 3 new notifications" />
Design tokens
The Badge uses Material Design theming through styled attributes and can be customized via the global theme.
Theming elements:
- Styles: Predefined badge styles for different semantic states
- Colors: Configurable through theme attributes like android:textColor and android:backgroundTint
- Typography: Material Design text styling from MaterialTextView
- Layout: Material Design spacing and padding through styled attributes