Jetpack Compose HorizontalPager offer by current page

Question

I wanna implement this design: I have 2 pages, the second page's left side part visible on the first page, and the first page's right side on the second.

I played with contentPadding, pageSpacing, modifier.graphicsLayer and so on, but nothing worked. What is the correct setup? Thank you

Answer 1

You can make use of custom PageSize. For example, we use this FillPageSize, where you can specify the fraction of available space that each page takes:

class FillPageSize(
    private val fraction: Float = 1F,
): PageSize {

    override fun Density.calculateMainAxisPageSize(availableSpace: Int, pageSpacing: Int): Int {
        return (availableSpace * fraction).roundToInt()
    }
}

Usage is simple:

HorizontalPager(
    pageSize = FillPageSize(.8F)
) { ... }

You can easily modify that to subtract specified amount of pixels from available space or something.

Answer 2

You can change contentPadding for this.

val pagerState = rememberPagerState(0) { 2 }
var contentPaddingValues by remember { mutableStateOf(PaddingValues(end = 70.dp)) }

LaunchedEffect(pagerState.currentPage) {
    contentPaddingValues = if (pagerState.currentPage == 0) PaddingValues(end = 70.dp) else PaddingValues(start = 70.dp)
}

HorizontalPager(
    state = pagerState,
    contentPadding = contentPaddingValues,
) {
    // your content
}