Import
View-based framework
Add the NotificationBadge to your layout file or create it programmatically in your Activity or Fragment.
<!-- Add to your layout file -->
<com.backbase.android.design.badge.NotificationBadge
android:id="@+id/notificationBadge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Usage
Basic usage
Create a NotificationBadge instance and set its content.
<!-- Basic notification badge in layout -->
<com.backbase.android.design.badge.NotificationBadge
android:id="@+id/notificationBadge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
// Set counter content
notificationBadge.counter = 5
// Set text content
notificationBadge.text = "New"
// Clear content (hide badge)
notificationBadge.counter = null
notificationBadge.text = null
Advanced usage
class NotificationActivity : AppCompatActivity() {
private lateinit var notificationBadge: NotificationBadge
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_notification)
notificationBadge = findViewById(R.id.notificationBadge)
setupNotificationBadge()
}
private fun setupNotificationBadge() {
// Set maximum count limit
notificationBadge.maxCount = 99
// Update counter
updateNotificationCount(150) // Will display "99+"
}
private fun updateNotificationCount(count: Int) {
if (count > 0) {
notificationBadge.counter = count
} else {
notificationBadge.counter = null // Hide badge
}
}
private fun showTextNotification(message: String) {
notificationBadge.text = message
}
}
Programmatic creation
// Create notification badge programmatically
val notificationBadge = NotificationBadge(context).apply {
counter = 10
maxCount = 99
}
// Add to parent view
parentLayout.addView(notificationBadge)
Configuration
Constructors
|
Constructor |
Description |
|---|---|
|
NotificationBadge(context: Context, attributeSet: AttributeSet?, defStyle: Int) |
Creates a notification badge with optional XML attributes and custom default style |
NotificationBadge(context: Context, attributeSet: AttributeSet?, defStyle: Int)
Creates a notification badge with the specified context, optional XML attributes, and default style. This constructor uses @JvmOverloads to provide multiple calling options.
// Programmatic creation with default styling
val badge = NotificationBadge(context)
badge.counter = 5
// Creation from XML attributes
// <com.backbase.android.design.badge.NotificationBadge ... />
// Creation with custom default style
val customBadge = NotificationBadge(context, null, R.attr.customNotificationBadgeStyle)
Properties
|
Property |
Type |
Default |
|---|---|---|
|
counter |
Int? |
null |
|
maxCount |
Int? |
null |
|
text |
String? |
null |
counter
The counter value to be displayed in the notification badge. Setting this property automatically switches the badge to counter mode.
// Set counter
notificationBadge.counter = 42
// Clear counter (hide badge)
notificationBadge.counter = null
// Counter with max limit
notificationBadge.maxCount = 99
notificationBadge.counter = 150 // Displays "99+"
maxCount
Maximum number of the counter. If maxCount is defined, a + sign will be shown when counter exceeds this number.
// Set maximum count
notificationBadge.maxCount = 99
notificationBadge.counter = 150 // Will display "99+"
// Remove maximum count limit
notificationBadge.maxCount = null
notificationBadge.counter = 150 // Will display "150"
text
The text content to be displayed in the notification badge. Setting this property automatically switches the badge to text mode.
// Set text content
notificationBadge.text = "New"
// Clear text (hide badge)
notificationBadge.text = null
// Different text examples
notificationBadge.text = "Alert"
notificationBadge.text = "!"
Methods
|
Method |
Description |
|---|---|
|
setContentDescription(contentDescription: CharSequence?) |
Sets the content description for accessibility |
setContentDescription(contentDescription: CharSequence?)
Sets the content description for accessibility purposes.
// Set custom accessibility description
notificationBadge.setContentDescription("5 unread notifications")
// Clear custom description (uses automatic description)
notificationBadge.setContentDescription(null)
Accessibility
NotificationBadge automatically configures accessibility features based on its content mode.
Accessibility configuration
NotificationBadge automatically manages accessibility properties:
|
Property |
Description |
Type |
|---|---|---|
|
contentDescription |
Automatically generated based on content |
CharSequence? |
|
textDirection |
Automatically set based on content type |
Int |
Best practices
- Counter mode automatically uses left-to-right text direction to ensure proper "+" placement.
- Text mode inherits the system text direction for proper localization.
- Content descriptions are automatically generated using pluralized strings for counters.
- When maxCount is exceeded, accessibility announces the formatted count with "+".
// Accessibility is automatically handled
notificationBadge.counter = 5
// Automatically generates appropriate content description
notificationBadge.text = "New"
// Uses text as content description
// Override automatic accessibility if needed
notificationBadge.setContentDescription("Custom accessibility description")
Design tokens
This component uses design system tokens for consistent theming:
- Minimum height: 18dp (chipMinHeight).
- Minimum touch target: 0dp (chipMinTouchTargetSize).
- Padding: Start padding 2dp, end padding 0dp.
- Text appearance: ?textAppearanceCaptionMedium.
- Text direction: Automatic based on content type.
- Background color: ?colorBackgroundDanger.
- Text color: ?colorOnBackgroundDanger.
- Checked state: Always true.
- Clickable: false.
- Checkable: false.