Is there way to customize LazyRow drag or scroll behavior in android Jetpack Compose?

Question

Below Image explains specification I want to implements

I want to make Lazy Row scroll item if user drag previous (or next) item to some X_SCROLL_THRESHOLD.

I considered to try Pager in Jetpack compose Sample app Jet Caster, but I want to show quite many items (1788 items) so, I'm not sure Pager approach is proper than using LazyRow.

Is there way to customize LazyRow drag or scroll behavior in android Jetpack Compose?

Answer 1

You can try out Pager Layouts. It's an experimental API currently. Hope Google Devs make it part of the general compose library soon.

Use rememberPagerState to manage initialOffscreenLimit(the no. of pages to retain on either side of the current page).

https://google.github.io/accompanist/pager/

Google Github Samples link - https://github.com/google/accompanist/tree/main/sample/src/main/java/com/google/accompanist/sample/pager

You would need to include this dependency in your app gradle

//Pager
implementation "com.google.accompanist:accompanist-pager:0.18.0"

A simple example

// Display 10 items
    val pagerState = rememberPagerState(
        pageCount = 10,
        initialOffscreenLimit = 2
    )

    HorizontalPager(state = pagerState) { page ->
        // Our page content
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxSize()
        ) {
            Text(
                text = "Item: $page",
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )
            Text(
                text = "Something Else",
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )
            //Your other composable
        }
    }

Layout Inspector showcasing the offscreenLimit of 2 items on either side of current page