Jetpack Compose Custom UI - Speedometer with animation

Question

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.

score 6 · Accepted Answer · answered Apr 13 '22 at 14:24

6

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:

answered Apr 13 '22 at 14:24

nglauber

18,674
6
70
75

Perfect implementation. I am having a small question how to change color of the arc on running like till 35 red,till 50 orange,100 to green. – Harish Padmanabh Apr 14 '22 at 18:50
1

Before the part commented as "Drawing Center Arc progress" you should replace the `mainColor` by the color in according to your logic. – nglauber Apr 14 '22 at 22:54
1

I updated the code. Please, check it out. – nglauber Apr 14 '22 at 23:13
Can i take a screen shot of this composable programatically and share to other apps? – Harish Padmanabh Apr 15 '22 at 01:27
Yes. Check this article: https://labs.testbook.com/how-to-share-composable-as-bitmap-e207c2f299d4 – nglauber Apr 15 '22 at 10:34
How can i reduce the height of the marker lines @nglauber – Harish Padmanabh Apr 18 '22 at 18:19
How can i rotate the upper line markers. so that the exact 50 will come to centre of the view. In the gif you attached we can see that the centre of view is a short line..logically it should be 50 and it should be a long as u set %5==0 in if condition. So how to fix this please help – Harish Padmanabh Apr 18 '22 at 18:50
can you please add comments in your implementation please – Harish Padmanabh May 17 '22 at 08:27

Jetpack Compose Custom UI - Speedometer with animation

1 Answers1