Cardsanimated

Activity Rings

Three concentric move, exercise and stand rings animate to today's totals.

Move 480/600

Exercise 18/30

Stand 11/12

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 ActivityRingsCard() {
  val move by animateFloatAsState(0.8f, tween(1000),
    label = "m")
  val exer by animateFloatAsState(0.6f, tween(1000),
    label = "e")
  val stand by animateFloatAsState(0.9f, tween(1000),
    label = "s")
  ElevatedCard(Modifier.fillMaxWidth()) {
    Row(
      Modifier.padding(20.dp),
      verticalAlignment = Alignment.CenterVertically
    ) {
      Canvas(Modifier.size(100.dp)) {
        val stroke = 12f
        val rings = listOf(
          Triple(Color(0xFFFF2D55), move, 0f),
          Triple(Color(0xFFA8E063), exer, 16f),
          Triple(Color(0xFF50E3C2), stand, 32f)
        )
        rings.forEach { (c, p, inset) ->
          drawArc(
            c.copy(alpha = 0.2f), 0f, 360f, false,
            topLeft = Offset(inset, inset),
            size = Size(
              size.width - inset * 2,
              size.height - inset * 2
            ),
            style = Stroke(stroke, cap = StrokeCap.Round)
          )
          drawArc(
            c, -90f, p * 360f, false,
            topLeft = Offset(inset, inset),
            size = Size(
              size.width - inset * 2,
              size.height - inset * 2
            ),
            style = Stroke(stroke, cap = StrokeCap.Round)
          )
        }
      }
      Spacer(Modifier.width(20.dp))
      Column {
        Text("Move 480/600",
          color = Color(0xFFFF2D55))
        Text("Exercise 18/30",
          color = Color(0xFF7AC943))
        Text("Stand 11/12",
          color = Color(0xFF50E3C2))
      }
    }
  }
}