Badge & Counter in Compose: Notification Badges with BadgedBox

#android #kotlin #jetpackcompose #material3

Badge & Counter in Compose: Notification Badges with BadgedBox

Master notification badges in Jetpack Compose using BadgedBox, Badge, and custom animations.

BadgedBox Basics

BadgedBox wraps content and displays a badge (Circle or custom):

BadgedBox(
    badge = { Badge() }
) {
    Icon(Icons.Default.ShoppingCart, contentDescription = "Cart")
}

Badge Styles

Number Badge

Badge(
    modifier = Modifier.offset(x = 8.dp, y = (-8).dp),
    containerColor = Color.Red,
    contentColor = Color.White
) {
    Text("3")
}

Dot Badge

BadgedBox(badge = { Badge() }) {
    Icon(Icons.Default.Notifications, "Notifications")
}

BottomNavigation with Badges

BottomAppBar {
    NavigationBarItem(
        icon = {
            BadgedBox(
                badge = {
                    Badge {
                        Text(
                            (notificationCount.coerceAtMost(99) + if (notificationCount > 99) "+" else "").toString(),
                            fontSize = 10.sp
                        )
                    }
                }
            ) {
                Icon(Icons.Default.Mail, "Messages")
            }
        },
        selected = selectedTab == 0,
        onClick = { selectedTab = 0 }
    )
}

Custom Badge with Box + Offset

Create custom badges with absolute positioning:

Box(modifier = Modifier.size(48.dp)) {
    Icon(Icons.Default.ShoppingCart, "Cart", Modifier.align(Alignment.Center))
    Badge(
        modifier = Modifier
            .align(Alignment.TopEnd)
            .offset(x = 6.dp, y = (-6).dp),
        containerColor = Color.Red
    ) {
        Text("5", fontSize = 10.sp, color = Color.White)
    }
}

Animated Badge with Spring Bounce

val scale by animateFloatAsState(
    targetValue = if (isNew) 1.2f else 1f,
    animationSpec = spring(dampingRatio = 0.5f, stiffness = Spring.StiffnessHigh),
    label = "badge_scale"
)

BadgedBox(
    badge = {
        Badge(
            modifier = Modifier.scale(scale),
            containerColor = Color.Red
        ) {
            Text("!")
        }
    }
) {
    Icon(Icons.Default.Notifications, "Alert")
}