ChromaDial logo

ChromaDial

Build beautiful custom dials in Jetpack Compose effortlessly

2026-02-01

Product Introduction

  1. Overview: ChromaDial is an open-source Kotlin library for creating customizable dial components in Jetpack Compose, Android's modern UI toolkit.
  2. Value: Simplifies complex dial implementation with declarative APIs while enabling pixel-perfect customization for unique app experiences.

Main Features

  1. Degree-Based Control: Intuitive 0°-360° coordinate system starting from 12 o'clock position with clockwise progression. Supports fractional degrees for precision control.
  2. Custom Angular Ranges: Configure non-standard dial arcs using startDegrees and sweepDegrees parameters (e.g., 225° start with 270° sweep).
  3. Multi-Revolution Tracking: Automatically visualizes values beyond 360° through concentric ring indicators when sweepDegrees exceeds full rotation.
  4. Interval Snapping: Implement discrete value steps with interval parameter (e.g., 30° increments) featuring auto-generated tick marks and magnetic thumb snapping.
  5. Optimized Callbacks: Separate onDegreeChanged (real-time updates) and onDegreeChangeFinished (final commit) for efficient resource handling during user interactions.

Problems Solved

  1. Challenge: Native Jetpack Compose lacks dedicated dial components, forcing developers to build complex gesture/rendering logic from scratch.
  2. Audience: Android engineers creating media players, measurement tools, settings panels, and creative apps requiring circular input controls.
  3. Scenario: Audio engineers building equalizer apps need precise frequency adjustment dials with custom ranges and tactile feedback.

Unique Advantages

  1. Vs Competitors: Outperforms generic slider libraries with native Compose integration, circular gesture detection, and automatic multi-rotation visualization.
  2. Innovation: Patent-pending ring indicator system for values >360° and declarative API that mirrors Compose's state-driven philosophy.

Frequently Asked Questions (FAQ)

  1. How to add ChromaDial to an Android project? Add dependency: implementation("com.sinasamaki:chroma-dial:1.0.0-Alpha4") in your module's build.gradle file.

  2. How to prevent performance issues during dial rotation? Use onDegreeChangeFinished callback for heavy operations (like disk I/O) instead of onDegreeChanged which fires continuously.

  3. Can I create dials with non-circular ranges? Yes, configure partial arcs via startDegrees (e.g., 90°) and sweepDegrees (e.g., 180°) for semi-circular controls.

  4. Does ChromaDial support Material Design 3 theming? Yes, it automatically inherits your app's MaterialTheme colors and can be customized via composable parameters.

Subscribe to Our Newsletter

Get weekly curated tool recommendations and stay updated with the latest product news