Hello team, Please I am trying to achieve this progress animation in jetpack compose screen. Any poi...

# android

[Gideon Oyediran]

Hello team, Please I am trying to achieve this progress animation in jetpack compose screen. Any pointer will be appreciated. Thanks

RPReplay_Final1689010589.mov

[Colton Idle]

Just use lottie?

[Gideon Oyediran]

but can i control lottie animation for each state of scan because I need to change image color and circular color based on the result of the scan?

[Daniel Weidensdörfer]

Well depending on how many state combinations you have, you can use multiple lotties

[ephemient]

https://rive.app/ is built to handle such multiple-state animations afaik

[ephemient]

but if this is all, it doesn't look hard to achieve just with custom animation in Compose

[Gideon Oyediran]

I just need to animate to each image based on scan stages and change color of the image based on state ON or OFF

[Julius Hinze]

You can use a ViewPager and keep track of the state (currentPage). For the animation, center a CircularProgressIndicator and an Icon inside of it. It will not look exactly as in your image, but it will conform with Material Design guidelines.

You should define a list of steps, in which each step has a "status" state, e.g. by using StateFlow or `mutableStateOf.`S each step corresponds to one page of the pager.

[ephemient]

this is not necessarily the most efficient way to handle it, but if you divide up the responsibilities into different components, each becomes clearer. e.g. one for managing the state of each item, another for managing the transitions as the items move, and another for laying everything out

ProgressFlow_kt.ktProgressFlowPreview.mp4

[Gideon Oyediran]

@ephemient thank you so much for your help and this mean alot to me and to everyone who has given me idea on how to go about this animation....thanks alot

[Julius Hinze]

Thank you, for the clarification 🙂