Known direct subclasses
PageSize.Fill

Pages take up the whole Pager size.

PageSize.Fixed

Multiple pages in a viewport


This is used to determine how Pages are laid out in Pager. By changing the size of the pages one can change how many pages are shown.

Please refer to the sample to learn how to use this API.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PageSize
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// [PageSize] should be defined as a top level constant in order to avoid unnecessary re-
// creations.
val CustomPageSize =
    object : PageSize {
        override fun Density.calculateMainAxisPageSize(
            availableSpace: Int,
            pageSpacing: Int
        ): Int {
            // [availableSpace] represents the whole Pager width (in this case), we'd like to
            // have
            // 3 pages per viewport, so we divide it by 3, taking into consideration the start
            // and end spacings.
            return (availableSpace - 2 * pageSpacing) / 3
        }
    }

val state = rememberPagerState { 10 }
HorizontalPager(state = state, modifier = Modifier.fillMaxSize(), pageSize = CustomPageSize) {
    page ->
    Box(
        modifier =
            Modifier.padding(10.dp).background(Color.Blue).fillMaxWidth().aspectRatio(1f),
        contentAlignment = Alignment.Center
    ) {
        Text(text = page.toString(), fontSize = 32.sp)
    }
}

Summary

Nested types

Pages take up the whole Pager size.

Multiple pages in a viewport

Public functions

Int
Density.calculateMainAxisPageSize(availableSpace: Int, pageSpacing: Int)

Based on availableSpace pick a size for the pages

Cmn

Public functions

calculateMainAxisPageSize

fun Density.calculateMainAxisPageSize(availableSpace: Int, pageSpacing: Int): Int

Based on availableSpace pick a size for the pages

Parameters
availableSpace: Int

The amount of space in pixels the pages in this Pager can use.

pageSpacing: Int

The amount of space in pixels used to separate pages.