Jetpack Compose: How to connect 2 LazyColumns

Viewed 677

What my goal is

I want to connect a LazyColumn that has reversed Layout enabled with a 'usual' LazyColumn, so that it seems for the user like it was one List and not two.

reversed LazyColumn: https://i.stack.imgur.com/2PGuF.gif
usual LazyColumn: https://i.stack.imgur.com/o5gB1.gif
(Cannot attach more than 3 links I think)

connected: [https://i.stack.imgur.com/ayfZP.gif][3]

What is the purpose of two lazyColumns

I want to achieve infinite scrolling in both direction with pagination. If I wanted to achieve infinite pagination in both directions with one lazyColumn/List I would have to put elements at the front and also at the end. Putting items at the end isn't a problem but at the front you get this jumping behavior (the lazyColumn always directly jumps to index 0 of the list).
To avoid this, one lazyColumn that is reversed handles the elements which were previously added at the front (since the layout is reversed, you can add elements at the end of the list as usual), and the second lazyColumn that is not reversed handles the elements which were previously added at the end.

What my approach is

The lazyColumns are collapsible and expandable. That means when the reversed lazyColumn is at Index 0 and you scroll further it collapses on your scroll, meanwhile the other lazyColumns takes up the free space (expands). So the user shouldn't be aware of this collapsing/expanding process, it seems like the list scrolls fluently.

What is the problem

I think, this could be done with NestedScrolling. But it's a bit hard to think of, because both elements are scrollable. That's why both elements are able to trigger the expanding/collapsing process.
Has someone a tip how I could connect these 2 lazyColums?
Thank you for all answers!

0 Answers
Related