SmoothGauge - Jetpack Compose

SmoothGauge is a highly interactive, animated gauge component built using Jetpack Compose. It allows users to select values by dragging along a semi-circular gauge, with smooth animations and dynamic color transitions.

---

Features

• Fully customizable gauge with configurable minValue, maxValue, and initialValue.
• Smooth animated transitions when the value changes.
• Drag-to-set functionality for interactive value adjustment.
• Dynamic color gradient on ticks based on value.
• Fully built in Jetpack Compose, no XML required.
• Preview-ready composable for quick testing.

---

Preview

Screen.Recording.2025-09-22.at.10.03.31.AM.mov

Installation

1. Clone the repository:

   git clone https://github.com/hariiomp/SmoothGauge.git
   

What I Used to Build This

• Language: Kotlin
• UI Framework: Jetpack Compose
• Animations: Animatable, spring physics-based animation
• Gestures: pointerInput with detectDragGestures
• Canvas Drawing: Custom tick marks & needle rendering
• Color Interpolation: lerpTo for gradient-style effects
• Previewing: @Preview annotations for design-time UI testing

📷 Preview

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun PreviewSmoothGauge() {
    SmoothGauge(
        modifier = Modifier.fillMaxWidth(),
        initialValue = 50
    )
}