Ultimate Guide to Material 3 BadgeDrawable in Android XML (2025 Tutorial + Examples)
Ultimate Guide to Material 3 BadgeDrawable in Android: Tutorial & Examples for 2025 🚀
Overview 📖
Material 3 BadgeDrawable displays dynamic information, such as unread counts or status indicators, on components like BottomNavigationView or TabLayout. This guide covers badge types (icon-only, with number, with text), their implementation, and theming for 2025. 🔔
Design and API Documentation 🔗
Using BadgeDrawable 🤖
Add the Material Components for Android library dependency to use BadgeDrawable. See the Get Started guide. Create badges with BadgeDrawable.create(Context) and attach them to anchor views using BadgeUtils.attachBadgeDrawable. Supports API 18+ (ViewOverlay) and pre-API 18 (FrameLayout). Use a Theme.Material3.* theme for proper styling. 🛠️
Making Badges Accessible ♿
Set content descriptions using methods like setContentDescriptionForText or setContentDescriptionQuantityStringsResource for screen readers like TalkBack. See the Android accessibility guide. 🗣️
Configuration and Behavior 🎬
Configure badge gravity (TOP_END, TOP_START), offsets, or number/text display using methods like setBadgeGravity or setNumber. Example:
badgeDrawable.setBadgeGravity(BadgeDrawable.TOP_END)
badgeDrawable.setNumber(99)
badgeDrawable.setContentDescriptionQuantityStringsResource(R.plurals.badge_count)
Badge Types 🔔
Material 3 BadgeDrawable supports three types: Icon-only (dot), With Number (numeric count), and With Text (limited characters). Each suits specific notification needs. 📊
- Icon-only Badge: Small dot for subtle alerts.
- Badge with Number: Displays counts like unread messages.
- Badge with Text: Shows short text or capped numbers (e.g., "999+").
Icon-only Badge 🔴
Icon-only Badges are small dots indicating status, ideal for minimal notifications. 🟢
Icon-only Badge Example 💻
API and source code:
BadgeDrawableBadgeUtils
The following example shows an icon-only badge on a BottomNavigationView item.
val badgeDrawable = BadgeDrawable.create(context)
val anchorView = bottomNavigation.findViewById(R.id.nav_item)
BadgeUtils.attachBadgeDrawable(badgeDrawable, anchorView)
badgeDrawable.setContentDescriptionNumberless("New notification")
Anatomy and Key Properties 📏
An icon-only badge is a small, circular dot. 🔴
- Container: Circular, no text or number.
- Position: Aligned to anchor view’s top/end by default. 📍
Badge with Number 🔢
Badges with Numbers display numeric counts, like unread messages, up to a maximum value. 📈
Badge with Number Example 💻
The following example shows a badge with a number on a BottomNavigationView item.
val badgeDrawable = BadgeDrawable.create(context)
badgeDrawable.setNumber(99)
badgeDrawable.setMaxNumber(999)
val anchorView = bottomNavigation.findViewById(R.id.nav_item)
BadgeUtils.attachBadgeDrawable(badgeDrawable, anchorView)
badgeDrawable.setContentDescriptionQuantityStringsResource(R.plurals.badge_count)
Anatomy and Key Properties 📏
A badge with a number has a rounded container with numeric text. 🔢
- Container: Rounded, with text/number.
- Label: Numeric, capped by
maxNumber. 📊
Badge with Text ✍️
Badges with Text display short text or capped numbers (e.g., "999+"), ideal for custom labels. 📝
Badge with Text Example 💻
The following example shows a badge with text on a BottomNavigationView item.
val badgeDrawable = BadgeDrawable.create(context)
badgeDrawable.setBadgeText("999+")
badgeDrawable.setMaxCharacterCount(4)
val anchorView = bottomNavigation.findViewById(R.id.nav_item)
BadgeUtils.attachBadgeDrawable(badgeDrawable, anchorView)
badgeDrawable.setContentDescriptionForText("Over 999 notifications")
Anatomy and Key Properties 📏
A badge with text has a rounded container with short text. 📝
- Container: Rounded, with text.
- Label: Text, capped by
maxCharacterCount. ✍️
Attributes (All Badges) 📋
| Element | Attribute | Related method(s) | Default value |
|---|---|---|---|
| Container | app:backgroundColor |
setBackgroundColor, getBackgroundColor |
@android:color/red |
app:badgeWidth |
setBadgeWidth, getBadgeWidth |
Dynamic (based on content) | |
app:badgeHeight |
setBadgeHeight, getBadgeHeight |
Dynamic (based on content) | |
app:badgeShapeAppearance |
setShapeAppearanceModel, getShapeAppearanceModel |
Rounded rectangle | |
| Label | app:badgeText |
setBadgeText, getBadgeText |
null |
app:number |
setNumber, getNumber |
0 |
|
app:badgeTextColor |
setTextColor, getTextColor |
@android:color/white |
|
| Position | app:badgeGravity |
setBadgeGravity, getBadgeGravity |
TOP_END |
app:horizontalOffset |
setHorizontalOffset, getHorizontalOffset |
0 |
Styles 🎨
- Default style: None (created programmatically)
- Default style theme attribute: None
See the full list of attrs. 🔗
Theming BadgeDrawable 🖌️
Material Theming allows limited customization of badge color and shape, as themed attributes are not fully supported. 🎨
Theming Example 💻
Theming example for badges (programmatic):
val badgeDrawable = BadgeDrawable.create(context)
badgeDrawable.backgroundColor = ContextCompat.getColor(context, R.color.shrine_pink_900)
badgeDrawable.badgeTextColor = ContextCompat.getColor(context, R.color.white)
Specific XML attributes for badges:
FAQ ❓
What is a Material 3 BadgeDrawable? 🤔
A dynamic indicator for notifications, like unread counts, on UI components. ✅
How many badge types are there? 🔢
Three types: Icon-only, With Number, and With Text. 🔔
When to use an Icon-only Badge? 🖋️
Use for subtle alerts, like new content, without specific counts. 🔴
How to make badges accessible? ♿
Set content descriptions with setContentDescriptionForText for screen readers. 🗣️
Can I customize badge appearance? 🎨
Yes, adjust color and shape programmatically; limited theme attribute support. 🖌️
How to add the Material 3 library? 📦
Include the Material Components for Android library. See the Get Started guide. 🛠️
Are there updates for badges in 2025? 🗓️
This guide reflects 2025 Material 3 standards for BadgeDrawable. 🚀
Comments
Post a Comment