android-jetpack-composeandroid-jetpackandroid-scrollable-tabsandroid-jetpack-compose-row

How to add stickyness to fullscreen ScrollableRow elements with Jetpack Compose?

I have a ScrollableRow with lets say 5 fullscreen composables.

ScrollableRow(
    modifier = Modifier.fillMaxSize(),
    scrollState = scrollState) {
        myData.items.forEachIndexed{ index, pageItem ->
            showPage(pageItem)
        }
}

Everything is shown so far, but when I swipe left/right it stops exactly on the position, where I stopped swiping: enter image description here As you can see and imagne, almost everytime it stops between two of these full screen composables.

I'd rather have a kind of stickyness and show full pages for each single left/right swipe as pictured here: enter image description here

So obviously, here in the second picture with third page showing:

I bet there is a mechanism for this?

Solution

  • HorizontalPager will suit you. Check Accompanist Pager layouts