Cardsanimated

Temperature Gauge

Semicircular gauge needle animates to the current outdoor temperature reading.

21°C

Feels like 19°

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 TempGaugeCard() {
  val angle by animateFloatAsState(
    targetValue = 38f,
    animationSpec = tween(1100), label = "needle"
  )
  ElevatedCard(Modifier.fillMaxWidth()) {
    Column(
      Modifier.padding(20.dp),
      horizontalAlignment = Alignment.CenterHorizontally
    ) {
      Canvas(Modifier.size(150.dp, 80.dp)) {
        val sweep = 180f
        drawArc(
          Brush.horizontalGradient(
            listOf(Color(0xFF32ADE6), Color(0xFFFF3B30))
          ),
          180f, sweep, false,
          style = Stroke(16f, cap = StrokeCap.Round)
        )
        rotate(180f + angle, Offset(size.width / 2,
          size.height)) {
          drawLine(
            MaterialTheme.colorScheme.onSurface,
            Offset(size.width / 2, size.height),
            Offset(size.width / 2, 10f),
            strokeWidth = 4f, cap = StrokeCap.Round
          )
        }
      }
      Text(
        "21°C",
        style = MaterialTheme.typography.headlineMedium
      )
      Text(
        "Feels like 19°",
        style = MaterialTheme.typography.labelMedium
      )
    }
  }
}