CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-jetpack-compose-material3lazycolumn
glllobys
glllobys

Reputation: 13

Custom Scroll Behavior for Overlapping. LazyColumn Jetpack Compose

I need to implement custom scrolling behavior involving a LazyColumn on a page. I'll break down the explanation into three stages for clarity. Simplified, it looks like this:

1) Initial Position: The Header Content is a static block that remains unchanged regardless of what happens on the screen. Gestures over this area should not affect the LazyColumn. Since there are clickable elements within this header, the list should not overlap with it in its initial state. Here the picture Initial Position

2) Scroll Up: When the user starts scrolling the list upwards, the LazyColumn container moves to the coordinates x = 0, y = 0, overlaying the Header Content. Once we reach x = 0, y = 0, the content inside the list starts scrolling. Here the picture Scroll up

3) Scroll Down: When the user scrolls the list downwards, it is crucial that the entire content of the LazyColumn is displayed first. Only after the entire content of the LazyColumn is visible does the LazyColumn itself return to its initial position below the Header Content. Here the picture Scroll down

In developing this, I was inspired by BottomSheetScaffold and TopAppBar with its scrollBehavior, and I concluded that I need to implement my own logic using NestedScrollConnection.

I almost managed to use BottomSheetScaffold to achieve my goal without implementing NestedScrollConnection. Below, I'll attach the code and a video. I couldn't find a way to ignore anchors, so when the scroll is released in an intermediate state, the sheet snaps to the nearest anchor. Moreover, during a quick scroll from top to bottom, when some content of the LazyColumn is already hidden, we also stop at the anchor. Is there a way to ignore anchors so it behaves like a regular list? Video: Video MVP. Gist: CodeGist

When trying to implement my own NestedScrollConnection, I encountered several issues:

  1. Simultaneous scrolling of both the LazyColumn and its internal content.
  2. The LazyColumn itself scrolls (not content inside) even if there is only one visible item on the screen.
  3. Other problems that require a deep understanding of the underlying mechanics.

I would appreciate it if you could share some code or provide practical recommendations on how to best implement such functionality.

Upvotes: 1

Views: 141

Answers (0)

Related Questions