Jetpack Compose UI — How to use BadgeBox using Jetpack Compose Kotlin

In this article, we will see how to use BadgeBox in compose

BadgeBox Example in Jetpack Compose Kotlin

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 -

badgebox in bottom menu

So let’s see how to use the badgebox

Badgebox has two properties

1. 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

Dheeraj Singh Bhadoria | Linktree