How to implement 'Snap to center' feature for lists in Jetpack Compose?

Question

In EpoxyRecyclerView with Horizontal LinearLayout there is a Snap to center feature which works like, If i scroll the list with good speed, it keeps on scrolling until it slows down and rests with an item at center. And if I scroll slowly and lift up the finger, then the next item spans/moves to center of screen. One thing you have to understand that, this is not a Pager. Pager automatically snaps the next item only. But I cannot scroll like a free rolling...

You can see this gif as an example

So, I'm looking for such snapping feature in Jetpack Compose. Is this possible yet? If yes, how to achieve this?

You can see this gif as an example

So, I'm looking for such snapping feature in Jetpack Compose. Is this possible yet? If yes, how to achieve this?

user_6907865 · Answer

You can use this library as well https://github.com/chrisbanes/snapper

https://chrisbanes.github.io/snapper/

val lazyListState = rememberLazyListState()

LazyRow(
    state = lazyListState,
    flingBehavior = rememberSnapperFlingBehavior(lazyListState),
) {
    // content
}

user_4284706 · Answer

You can try out this library: https://github.com/aakarshrestha/compose-pager-snap-helper The code will look as follows (using LazyRow for listing the items)

ComposePagerSnapHelper(
        width = 320.dp, //required
        content = { listState -> //this param is provided by the method itself, add this param below.
            LazyRow(
                state = listState, //add listState param
            ) {
                items(count = count) { item ->
                    //Put your Items Composable here
                }
            }
        }
    )

How to implement 'Snap to center' feature for lists in Jetpack Compose?

2 Answers