I'm looking for a way to synchronise scroll between multiple `LazyColumns`. All columns should rece...

# compose

[joney]

I'm looking for a way to synchronise scroll between multiple LazyColumns. All columns should receive the same scroll delta, regardless of where the user input came from. Is nestedScroll() the right thing to use?

[ste]

Are those LazyColumns nested (I don't think so)? If not, you could try to share a LazyListState (rememberLazyListState)

[joney]

They are not nested. I tried sharing the LazyListState that did not work. Only one list is scrolling then.
Sharing a ScrollState between multiple scrollable Columns works on the other hand. Unfortunately I have to use LazyColumns as the lists contain many items.

[ste]

Ok, I got it working (kind of) like this:

val state = rememberLazyListState()
val state2 = remember(state.firstVisibleItemScrollOffset) { state }

[Adam Powell]

Do you have a visual mock of the UX you're trying to build?

[joney]

Attached you'll find a screenshot + video of my use case.
Basically we're trying to mimic the google android calendar week-view.
FYI: We use HorizontalPager for navigating between weeks.

PS: We already have two apps 100% driven by compose running in production and we love it :)

2021_05_18_16_14_27_trim.mp4

[Adam Powell]

glad you're enjoying it 🙂

[Adam Powell]

the video leaves me with two questions: 1) why is this two separate scrolling containers instead of one? 2) why use LazyColumn here when the data set is so small? (only a single day?)

[joney]

1) The time column should be sticky
2) When using Column instead of LazyColumn I experienced lags when the user selects a day, since the entire selected day column will change its background, which forces the entire page to be recomposed. I assumed that would be the reason for the lag.

Do you suggest I should rather try to find a way to avoid recomposition of the whole page, instead of trying to sync LazyLists?

[Adam Powell]

I'd start there, yes

[joney]

Thank you for your thoughts Adam!

I refactored the composable hierarchy which was quite complex.

Also instead of using a column with multiple rows I now use a row with multiple columns.

The ScrollState is shared, the lists are synced and no lags.