Notification Center - Badge

A notification badge is capable of displaying a badged number, indicating the number of notifications or action items requiring user attention.

Usage

Users do not want to be inundated with things demanding immediate attention, so the number of notification buttons should kept to a minimum (e.g., a single notification button on the home screen).

If there are no notifications, the badge will not display. If the number of notifications exceeds 999, the badge icon will display 999+.

Android Specific Behavior

The Notification Center Badge component behaves the same on all platforms currently.

Availability

Available as part of the notificationcenter-android module maintained by Customer Technology Front-end Platform Engineering

Technical Details

Class and Module

NotificationButton.kt — located in core module ui/american (note: this is an example)

Example Code

Kotlin:

var layout = findViewById(R.id.myViewLayout)

var notificationButton = NotificationButton(this)
notificationButton.layoutParams = LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
notificationButton.unreadCount = 3
notificationButton.drawableResource = R.drawable.ic_alert_bell

layout.addView(notificationButton)

XML:

<NotificationButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_alert_bell"
    app:unreadCount="3" />
<h3>Default State:</h3>
<img src="../../app-component-images/android/notification-button.png" alt="Default State" />
<p></p>
<h3>Active State (Unread Notifications):</h3>
<img src="../../app-component-images/android/notification-button.png" alt="Active State" />
  • Handle: @notificationbadge-android
  • Preview:
  • Filesystem Path: components/app/android/notificationcenter-android/notificationbadge-android/notificationbadge-android.hbs