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.backbase.android.design.badge.BadgedNotificationIcon
import androidx.core.content.res.ResourcesCompat
Usage
Basic usage
Create a BadgedNotificationIcon to display notification icons with optional badge indicators for unread counts.
val badgedIcon = BadgedNotificationIcon(context)
badgedIcon.badgeCount = 5
XML usage
Use BadgedNotificationIcon in XML layouts with custom attributes for easy configuration.
<com.backbase.android.design.badge.BadgedNotificationIcon
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:badgeCount="3"
app:maxCount="99"
app:notificationIconColor="?colorOnBackground"
app:badgeColor="?colorDanger" />
Configuration
|
Parameter |
Type |
Default |
|---|---|---|
|
badgeBackgroundColor |
Int |
0 |
|
badgeCount |
Int |
0 |
|
badgeTextColor |
Int |
0 |
|
notificationIconColor |
Int |
0 |
|
notificationIconDrawable |
Drawable? |
null |
badgeBackgroundColor
The badgeBackgroundColor parameter sets the background color of the badge in both small dot and large counter modes.
badgedIcon.badgeBackgroundColor = context.getColor(R.color.danger)
badgeCount
The badgeCount parameter sets the number of unread notifications and controls the badge display mode. Use 0 to hide the badge, BadgedNotificationIcon.NO_BADGE for small dot mode, or positive numbers for large counter mode.
// Hide badge
badgedIcon.badgeCount = 0
// Show small dot
badgedIcon.badgeCount = BadgedNotificationIcon.NO_BADGE
// Show counter
badgedIcon.badgeCount = 5
badgeTextColor
The badgeTextColor parameter sets the text color for the counter in large badge mode.
badgedIcon.badgeTextColor = context.getColor(R.color.white)
notificationIconColor
The notificationIconColor parameter sets the color of the notification icon itself.
badgedIcon.notificationIconColor = context.getColor(R.color.foreground_default)
notificationIconDrawable
The notificationIconDrawable parameter sets the drawable resource for the notification icon. If not specified, defaults to the standard notification bell icon.
badgedIcon.notificationIconDrawable = ResourcesCompat.getDrawable(context.resources, R.drawable.ic_custom_notification, context.theme)
Methods
setMaxCount
The setMaxCount method sets the maximum count value for the large badge mode. When the badge count exceeds this value, it displays the max count followed by a plus sign (e.g., "99+").
badgedIcon.setMaxCount(99)
badgedIcon.badgeCount = 150 // Will display "99+"
Styling
Badge modes
The BadgedNotificationIcon supports three display modes based on the badgeCount value:
- Hidden mode: badgeCount = 0 - No badge is shown
- Small dot mode: badgeCount = BadgedNotificationIcon.NO_BADGE - Shows a small colored dot
- Large counter mode: badgeCount > 0 - Shows a counter with the exact number
// Different badge modes
badgedIcon.badgeCount = 0 // Hidden
badgedIcon.badgeCount = BadgedNotificationIcon.NO_BADGE // Small dot
badgedIcon.badgeCount = 7 // Counter showing "7"
Color customization
Customize the appearance by setting colors for different elements:
badgedIcon.notificationIconColor = context.getColor(R.color.icon_color)
badgedIcon.badgeBackgroundColor = context.getColor(R.color.badge_background)
badgedIcon.badgeTextColor = context.getColor(R.color.badge_text)
Design tokens
The BadgedNotificationIcon component uses design tokens for consistent styling:
- Colors: Uses semantic color tokens for notification icon and badge colors
- Icons: Default notification icon from design system icon set
- Layout: Proper positioning and margins for badge overlay
- Typography: Badge text uses appropriate font sizing for readability
// Using design tokens for consistent theming
val typedArray = context.theme.obtainStyledAttributes(intArrayOf(
R.attr.colorOnBackground,
R.attr.colorDanger,
R.attr.colorOnSecondary
))
badgedIcon.notificationIconColor = typedArray.getColor(0, 0)
badgedIcon.badgeBackgroundColor = typedArray.getColor(1, 0)
badgedIcon.badgeTextColor = typedArray.getColor(2, 0)
typedArray.recycle()