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?

[HorizontalViewPager](https://google.github.io/accompanist/pager/#horizontalpager). — Jay, Jul 29 '21 at 06:54
@Jay the the library you gave is a normal viewpager which is clearly mentioned that is not what I'm looking for... I also need the list to scroll freely several items — Syed Zeeshan, Jul 31 '21 at 11:59

score 7 · Answer 1 · answered Apr 11 '22 at 08:14

7

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
}

answered Apr 11 '22 at 08:14

Sepideh Vatankhah

597
5
17

This does not work with scrolling on Desktop. – John Glen Aug 03 '23 at 13:51

score 6 · Accepted Answer · answered Nov 21 '22 at 15:44

6

If you use Compose 1.3 you can check the SnapFlingBehavior here

answered Nov 21 '22 at 15:44

AouledIssa

2,528
2
22
39

score 5 · Answer 3 · answered Dec 20 '22 at 17:37

Starting with compose 1.3.0 you can use the FlingBehavior that performs snapping of items to a given position:

val state = rememberLazyListState()

LazyRow(
    modifier = Modifier.fillMaxSize(),
    verticalAlignment = Alignment.CenterVertically,
    state = state,
    flingBehavior = rememberSnapFlingBehavior(lazyListState = state)
) {
  //item content
}

score 4 · Answer 4 · answered Aug 22 '21 at 05:55

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?

4 Answers4

Linked