Chartsanimated

Activity rings

Three concentric goal rings that sweep to their progress, fitness-tracker style.

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

@Composable
fun ActivityRings(
    move: Float = 0.82f,
    exercise: Float = 0.66f,
    stand: Float = 0.5f,
    modifier: Modifier = Modifier,
) {
    val p by animateFloatAsState(1f, tween(1200, easing = EaseOutCubic), label = "rings")
    val track = MaterialTheme.colorScheme.surfaceVariant
    val specs = listOf(
        20.dp to (Color(0xFFFB1D5B) to move),
        14.dp to (Color(0xFFA3E635) to exercise),
        8.dp to (Color(0xFF22D3EE) to stand),
    )
    Canvas(modifier.size(120.dp)) {
        val w = 9.dp.toPx()
        specs.forEach { (r, pair) ->
            val (color, value) = pair
            val d = r.toPx() * 2
            val tl = Offset(center.x - r.toPx(), center.y - r.toPx())
            drawArc(track, 0f, 360f, false, tl, Size(d, d), style = Stroke(w, cap = StrokeCap.Round))
            drawArc(
                color, -90f, 360f * value * p, false, tl, Size(d, d),
                style = Stroke(w, cap = StrokeCap.Round),
            )
        }
    }
}