DEV Community

Cover image for Jetpack Compose: Badge
Farhan Roy -- | 😁
Farhan Roy -- | 😁

Posted on

7

Jetpack Compose: Badge

Badges are widely used on android. Badge gives a display to notify the user when there are notifications or other important things. As in the message app that displays new messages with badges and many others.

Jetpack compose does this well. The new Jetpack Compose UI toolkit for android development has an API for displaying badges. The following is an example of its use on Bottom Navigation Bar Item.

import androidx.compose.material.Badge
import androidx.compose.material.BadgedBox
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
import androidx.compose.material.Icon
import androidx.compose.material.Text

BottomNavigation {
    BottomNavigationItem(
        icon = {
            BadgedBox(badge = { Badge { Text("8") } }) {
                Icon(
                    Icons.Filled.Favorite,
                    contentDescription = "Favorite"
                )
            }
        },
        selected = false,
        onClick = {}
    )
}
Enter fullscreen mode Exit fullscreen mode

BadgeBox gives the child a place to display composable Badge(). This compostable is still in Experimental meaning it is not yet stable. Maybe it will be stable in the next few versions of jetpack compsoe. stay tuned

Reference

https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more