androidandroid-jetpack-composehorizontal-pager

Jetpack Compose HorizontalPager offer by current page


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

enter image description here

enter image description here


Solution

  • 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.