Use of Badge In Compose Part-2

Ina previous part we briefly learn about the use of badge in our Jetpack Compose Application. Today we will learn a bit more but with advance implementation.

Most of the apps use bottom navigation for better navigation among the app screens and it’s very impotent to notify people about whom like their profile or posts.

Today we will learn how we can do that in our Jetpack Compose Application with the help of BottomAppBar and Badge (BadgeBox)

Note: If you are not familiar with Badge you can check my previous Article
https://medium.com/@waheedkhan6446/use-of-badge-in-compose-part-1-3aaef8bbde52

First you have to create composable with name BadgeWithBottomNavBar

@Preview
@Composable
fun BadgeWithBottomNavBar() {}

To add the BottomBar first you have to add Scaffold.

@Preview
@Composable
fun BadgeWithBottomNavBar() {
  Scaffold(){}
}

“Scaffold is a basic material visual layout structure that put all the other material components together like BottomBar, TopAppBar ,FloatingActionButton and more.”

Now Add the BottomAppBar with NavigationBarItem in it

@Preview
@Composable
fun BadgeWithBottomNavBar() {
    val notificationCount = remember {
        mutableIntStateOf(0)
    }
    Scaffold(
        bottomBar = {
            BottomAppBar {
                NavigationBarItem(
                    selected = true,
                    onClick = { /*TODO*/ },
                    icon = { Icon(Icons.Filled.Home, contentDescription = "HomeIcon") })
                NavigationBarItem(
                    selected = true,
                    onClick = { /*TODO*/ },
                    icon = { Icon(Icons.Filled.Search, contentDescription = "SearchIcon") })
                NavigationBarItem(
                    selected = true,
                    onClick = { /*TODO*/ },
                    icon = { Icon(Icons.Filled.Email, contentDescription = "EmailIcon") })
                NavigationBarItem(
                    selected = true,
                    onClick = { /*TODO*/ },
                    icon = { Icon(Icons.Filled.AccountCircle, contentDescription = "AccountCircleIcon") })
            }
        }
    ) {
        Column(
            modifier = Modifier
                .padding(it)
                .fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Productive Android", style = TextStyle(fontSize = 22.sp))
        }
    }
}

Now it’s time to add the badge in bottom nav. We are adding badge in the email NavigationBarItem

 NavigationBarItem(
            selected = true,
            onClick = {},
            icon = {
                BadgedBox(badge = {
                    Badge {
                        Text(text = notificationCount.intValue.toString())
                    }
                }) {
                    Icon(Icons.Filled.Email, contentDescription = null)
                } 
            }
        )

To handle the badge visibility in bottom bar we are using notificationCount to remember the state of count.

If you think that you have learn something new Today just Clap 👏

My GitHub Profile

https://github.com/waheedkhan-dev