BadgedBox: Notification Badges and Count Indicators

#android #kotlin #compose #tutorial

BadgedBox: Notification Badges and Count Indicators

BadgedBox displays notification indicators on UI elements, essential for showing unread counts or status.

Simple Badge

BadgedBox(badge = { Badge() }) {
    Icon(Icons.Default.Mail, contentDescription = "Messages")
}

Badge with Count

BadgedBox(
    badge = {
        Badge(
            containerColor = Color.Red,
            contentColor = Color.White
        ) {
            Text("5", fontSize = 10.sp)
        }
    }
) {
    Icon(Icons.Default.ShoppingCart, contentDescription = "Cart")
}

Animated Badge

var unreadCount by remember { mutableStateOf(0) }

BadgedBox(
    badge = {
        if (unreadCount > 0) {
            Badge {
                Text(unreadCount.toString())
            }
        }
    }
) {
    Icon(Icons.Default.Notifications, contentDescription = "Notifications")
}

Custom Badge Position

Box(
    modifier = Modifier.fillMaxSize()
) {
    Icon(Icons.Default.Favorite, contentDescription = "Like")
    Badge(
        modifier = Modifier.align(Alignment.TopEnd),
        containerColor = Color.Green
    )
}