{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

PageSize

@ExperimentalFoundationApi
public interface PageSize

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

@ExperimentalFoundationApi
public static class PageSize.Fill implements PageSize

Pages take up the whole Pager size.

@ExperimentalFoundationApi
public final class PageSize.Fixed implements PageSize

Multiple pages in a viewport

Public methods

abstract int
calculateMainAxisPageSize(
    @NonNull Density receiver,
    int availableSpace,
    int pageSpacing
)

Based on availableSpace pick a size for the pages

Public methods

calculateMainAxisPageSize

abstract int calculateMainAxisPageSize(
    @NonNull Density receiver,
    int availableSpace,
    int pageSpacing
)

Based on availableSpace pick a size for the pages

Parameters
int availableSpace

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

int pageSpacing

The amount of space used to separate pages.