Jetpack Compose UI — How to use BadgeBox using Jetpack Compose Kotlin
2 min readDec 26, 2022
In this article, we will see how to use BadgeBox in compose
Hello friends, today in this article we will see how we can use BadgeBox in our application.
First of all, we know that what is a BadgeBox?
Many times we must have seen some number in the small circle above the menu icon, like the number above the notification icon tells how many pending notifications are there, similarly the number above the call icon tells how many calls are pending or unread.
We can see this in the image below -
So let’s see how to use the badgebox
Badgebox has two properties
- Badge
badge = { Badge { Text("4") } }
badge show the number by using above code
2. Icon
icon will display by following code —
Icon(
Icons.Filled.Call,
contentDescription = "CALL"
)
Complete Widget -
BadgedBox(badge = { Badge { Text("8") } k}) {
Icon(
Icons.Filled.Favorite,
contentDescription = "Favorite"
)
}
Complete Example —
@Composable
fun BadgeBoxDemo() {
BottomNavigation {
BottomNavigationItem(
icon = {
BadgedBox(badge = { Badge { Text("8") } }) {
Icon(
Icons.Filled.Home,
contentDescription = "Home"
)
}
},
selected = false,
onClick = {})
BottomNavigationItem(
icon = {
BadgedBox(badge = { Badge { Text("4") } }) {
Icon(
Icons.Filled.Call,
contentDescription = "CALL"
)
}
},
selected = false,
onClick = {})
BottomNavigationItem(
icon = {
BadgedBox(badge = { Badge { Text("8") } }) {
Icon(
Icons.Filled.Favorite,
contentDescription = "Favorite"
)
}
},
selected = false,
onClick = {})
}
}
The code above will display us three badgebox