Slider Dial in Jetpack Compose

Added: 2026-05-09

[00:00:00]With a center point and a given radius, you could calculate a user's touch in degrees using the arc tangent of the current offset. With this, you can build a dial that can slide around a track.

[00:00:13]Or you could use chroma dial.

[00:00:26]Chrommaile is my compos multiplatform library that makes creating delightful dials easy.

[00:00:33]We add it into our project in our build.gradal file and then render it like any other composible.

[00:00:41]Its function signature is inspired by material slider. So it takes in a degree state and a callback function.

[00:00:51]This gives us the default dial which has a thumb that we can move around the track a full 360° starting from the 12:00 position.

[00:01:01]If we want a different range, we can first change the starting point with start degrees. Then we can define the total amount possible with sweep degrees.

[00:01:12]The default dial also has support for a sweep larger than 360°.

[00:01:18]In addition to the range, we can also pass an interval which will provide snapping points after every 10°. With the default dial, we can customize the colors using dial colors.

[00:01:30]But if you want something fancier, we can fully customize the thumb and track by passing in composables for them.

[00:01:38]For both of these, the dial state is very crucial since it will give us information that we will use to draw the thumb and track. Inside the thumb composible, we can add any design we can think of. Keep in mind that the thumb directly affects the size of the touch target that the user can drag on the dial.

[00:02:01]This means if you want to go for a minimal look without any thumb, you would still need to define a box with a specified size.

[00:02:10]When you add text on the thumb, you will notice that it rotates as it moves around the track and can end up upside down.

[00:02:19]We can use the dial state to rotate the text to be always right side up.

[00:02:25]To add some user feedback, we can use the interaction source to know when the thumb is being dragged and add some animation to it.

[00:02:35]Next we have the track which we can indicate with a canvas draw arc function. We just use the degrees in dial state to know how far the ark should extend. But the default function is too verbose. First we have to subtract 90° since the 0° point of the canvas function is at 3:00 rather than 12:00.

[00:03:00]Second, we have to define the layout with XY offset plus width and height.

[00:03:06]Chromodile provides its own convenient draw arc function that takes in center and radius and offsets the starting point to 12:00. So, we do not need to subtract 90. Finally, Chromadile provides an easy API for us to draw arbitrary elements around the dial like numbers on a gauge or a clock face. Draw every interval takes in some interval plus a radius, center, start, and sweep degrees. It then invokes a callback for each iteration.

[00:03:39]It gives rotation and position data which we can use to place the items.

[00:03:45]This function is useful for various additions like adding numbers, icons or graduations which give your dial extra detail.

[00:03:56]For more delightful UI, go to sasamaki.com.

[00:04:00]Thanks for watching and see you next time.