Here’s a gist for an animated page indicator that ...

# compose

[Denis Ismailaj]

Here’s a gist for an animated page indicator that may come in handy:

https://gist.github.com/denis-ismailaj/521417c3e519032c6b4e5f49e8f3d5c8

Screen Recording 2021-04-26 at 5.27.09 PM.mov

[Olivier Patry]

Am I tired or there is an issue in your index vs page count use?

[Denis Ismailaj]

Yes, there was. Just changed it 😅

[Olivier Patry]

totalPages is a number of page I guess, but you do

assert(
        value = currentPage in 0..totalPages,

[Olivier Patry]

and for (in in 0..totalPages)

[Denis Ismailaj]

i replaced it with until in the gist

[Olivier Patry]

Yes

[Olivier Patry]

I don't understand the link between width and height val width: Dp by animateDpAsState(if (selected) height * selectedMultiplier else height)

[Olivier Patry]

seems odd 🤔

[Olivier Patry]

I would rename it I would rename height to something like indicatorSize

[Denis Ismailaj]

Well, when it’s not selected it’s a circle, so height = width. When it’s selected I used a multiplier for the width only.

[Olivier Patry]

Yes I got it but it would be clearer with a size name rather than a height used as width IMO 🙂

[Denis Ismailaj]

Yeah true, that’d be less confusing

[Olivier Patry]

That being said, I do not understand how the animation works 😄

[Olivier Patry]

1. how does width reduces to size "at some point"
2. how the animation works when coming from left or right

[Olivier Patry]

(might be dummy question)

[Denis Ismailaj]

1. When you use the composable, you put a parameter for the current page. When that changes, it recomposes and the animatedDpAsState inside changes the value used for the width with intermediary values that are between the shrinked width and the expanded width, so it doesn’t just skip to the new size immediately, but gradually changes size.

[Denis Ismailaj]

2. Each of the dots is represented by a Canvas composable inside the Row. The row is set to a fixed width that is the maximum it can be, and uses a SpaceBetween arrangement so it always spreads the available spacing between the dots. So, it looks the same in both directions.

[Olivier Patry]

1. Yes, that's my understanding but how does it come back to reduced size once transition is done?

[Olivier Patry]

1. -> Oh, it doesn't in fact 😅 I checked your video too quickly. I was expecting the same behavior as we see sometimes, when the transition expands the bullets and then shrinks to its initial width

[miqbaldc]

cc @adeyds