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 = {}
    )
}

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