Use of badge In Compose Part-1

In this era of technology, most people use social apps. To notify users about who has liked their profile picture, developers incorporate notifications with badges. In today’s article, I will show you how to add notifications with badges to your Jetpack Compose application

First you have to create project in Jetpack Compose
After that you have to create composable with name NotificationBadgeCompose and add this code in your app

@Preview
@Composable
fun NotificationBadgeComposable() {
    Box(modifier = Modifier.padding(12.dp)) {
        IconButton(onClick = { /*TODO*/ }) {
            Icon(
                modifier = Modifier.size(42.dp),
                imageVector = Icons.Filled.Notifications,
                contentDescription = "NotificationIcon"
            )
        }
        Badge(
            modifier = Modifier
                .border(1.dp, color = Color.White, shape = CircleShape)
                .align(Alignment.TopEnd)
                .clip(CircleShape)
        ) {
            Text(text = "5")
        }
    }
}

Note : The badge is a Material 3 component. To incorporate a badge into your app, ensure that you have integrated Material 3.

Most commonly, badges are used with bottom navigation. In the next article, I will demonstrate how to add a badge to bottom navigation.

Stay tune for the updates… :)