Badgesanimated

Count roll

A notification count that rolls the old digit out and the new one in.

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

var count by remember { mutableIntStateOf(8) }
LaunchedEffect(Unit) {
    while (true) {
        delay(1500)
        count = count % 12 + 1
    }
}
Badge(containerColor = Color(0xFFEF4444), contentColor = Color.White) {
    AnimatedContent(
        targetState = count,
        transitionSpec = {
            (slideInVertically { it } + fadeIn()) togetherWith
                (slideOutVertically { -it } + fadeOut())
        },
        label = "count",
    ) { value ->
        Text("$value", fontSize = 11.sp)
    }
}