Checksanimated

Draw check

A checkbox whose tick strokes in as the box fills with color.

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 DrawCheckbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
    val p by animateFloatAsState(
        targetValue = if (checked) 1f else 0f,
        animationSpec = tween(280, easing = EaseOutCubic),
        label = "check",
    )
    val accent = MaterialTheme.colorScheme.primary
    Box(
        modifier = Modifier
            .size(24.dp)
            .clip(RoundedCornerShape(6.dp))
            .border(2.dp, accent, RoundedCornerShape(6.dp))
            .clickable { onCheckedChange(!checked) },
    ) {
        Canvas(Modifier.fillMaxSize()) {
            drawRoundRect(accent.copy(alpha = p), cornerRadius = CornerRadius(6.dp.toPx()))
            val tick = Path().apply {
                moveTo(size.width * 0.24f, size.height * 0.52f)
                lineTo(size.width * 0.43f, size.height * 0.70f)
                lineTo(size.width * 0.76f, size.height * 0.30f)
            }
            val measure = PathMeasure().apply { setPath(tick, false) }
            val drawn = Path().also { measure.getSegment(0f, measure.length * p, it, true) }
            drawPath(
                path = drawn,
                color = Color.White,
                style = Stroke(2.5.dp.toPx(), cap = StrokeCap.Round, join = StrokeJoin.Round),
            )
        }
    }
}