Harish Padmanabh
Harish Padmanabh

Reputation: 577

Jetpack Compose Custom UI - Speedometer with animation

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

Upvotes: 4

Views: 2092

Answers (1)

nglauber
nglauber

Reputation: 23894

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

Upvotes: 6

Related Questions