Change scroll distance before going to next page for HorizontalPager in Jetpack Compose

Question

I have a HorizontalPager with a TabRow with two items. Currently you need to swipe almost the entire screen before it snaps to the next page. I'd like it to snap to the other page on a smaller scroll. This is my current code:

val pagerState = rememberPagerState()
val coroutineScope = rememberCoroutineScope()

Column(modifier = Modifier.fillMaxSize()) {
    TabRow(
        selectedTabIndex = pagerState.currentPage
    ) {
        Tab(
            selected = pagerState.currentPage == 0,
            onClick = { component.changeChild(0) },
            modifier = Modifier.height(53.dp)
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Text(
                    text = "First page"
                )
            }
        }

        Tab(
            selected = pagerState.currentPage == 1,
            onClick = { component.changeChild(1) },
            modifier = Modifier.height(53.dp)
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Text(
                    text = "Second page"
                )
            }
        }
    }


    HorizontalPager(
        pageCount = 2,
        state = pagerState,
        beyondBoundsPageCount = 1,
        modifier = Modifier.fillMaxSize()
    ) { page ->
        when (page) {
            0 -> FirstPage()
            1 -> SecondPage()
        }
    }

I've tried to modify the flingBehavior in HorizontalPager, but nothing I've tried actually modifies the distance needed to swipe. I've also looked online, but all the questions are either for the old HorizontalPager from the Accompanist library, or the Snapper library.

Does this https://stackoverflow.com/questions/72444556/swipe-sensitivity-for-horizontalpager-in-compose help? — Raghunandan, May 14 '23 at 10:54
@Raghunandan that question is for the Accompanist/Snapper library, and sadly doesn't apply to the Jetpack Compose implementation. — Tiebe Groosman, May 14 '23 at 11:33
there is no direct way to do this i guess. you need to copy the pager source the state and modify it accordingly. — Raghunandan, May 15 '23 at 05:20

score 1 · Accepted Answer · answered Jun 28 '23 at 11:13

Looks like there is something called positionThresholdFraction in the PagerState class file, but unfortunately it's not changeable for now. I have created an issue, you can find it right here. Feel free to click +1 right under the link so google will react faster.

Change scroll distance before going to next page for HorizontalPager in Jetpack Compose

1 Answers1