---
title: "PageSize"
description: "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."
type: "interface"
---

<div class='type'>Interface</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>



```kotlin
interface PageSize
```


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.


## Functions

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


Based on `availableSpace` pick a size for the pages

#### Parameters

| | |
| --- | --- |
| availableSpace | The amount of space in pixels the pages in this Pager can use. |
| pageSpacing | The amount of space in pixels used to separate pages. |




## Code Examples

### CustomPageSizeSample
```kotlin
@Composable
fun CustomPageSizeSample() {
    // [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)
        }
    }
}
```