Jetpack Compose Custom UI - Speedometer with animation

1.6k Views Asked by At

I want to build a custom ui to show the score in a custom view like a speedometer with an animation. Implementation would be like passing a score to the view and the needle in the view is going to animate from 0 to the score passed. The background will change according to the score passed if less than 50 its red and above 50 its red.Can anyone help me achieving this.I am attaching the ui given for reference. It could shared to social media in any format also.

enter image description here

1

There are 1 best solutions below

8
On BEST ANSWER

In summary will need to implement this component using Canvas.

I did an initial implementation which can give you a kick-off.

Here's the repository: https://github.com/nglauber/JetpackComposePlayground/blob/master/app/src/main/java/br/com/nglauber/jetpackcomposeplayground/screens/SpeedometerScreen.kt

Here is the result:

enter image description here