I am setting up a few pages using the `pager` + `pager-indicator` accompanist libraries. The issue i...

# compose

[YASAN]

I am setting up a few pages using the pager + pager-indicator accompanist libraries. The issue is that each page has a different size and it is making the interactions a bit weird.

I have a short (in height) page first but the height matches the largest one which makes the content look out of place. If I put the same page AFTER the largest tab, the size is ok. Video in 🧵

[YASAN]

[YASAN]

As you can see the INFORMATION tab is used two times and it always uses the same composable function. The INSPIRATION tab is the largest one.

[YASAN]

I have two issues:
1 - The initial page does not have a proper size (I played with sizing modifiers and they had no effect)
2 - On the pages that are sized properly, the transition between a large page to small page looks rough.

[Zoltan Demant]

I think there's a parameter on the pager which let's you specify the alignment, that way the smaller content could align towards the top. You could also synchronize the page size by observing each pages size (Modifier.onSizeChanged) and using the largest value across the field.

[YASAN]

I added verticalAlignment = <http://Alignment.Top|Alignment.Top> and it fixed it. Weird, I thought I had tried that before posting.

[YASAN]

Thanks!

[YASAN]

The resize animation is still a bit weird but I guess I can fix that with some tweaks

[Colton Idle]

Pager was re-written sort of recently to use LazyRow/LazyColumn so that prevents the sizes from being known in advance. Chris banes also released the snapper library which could help with scenarios like this where different items are a different size.