# androidx.compose.foundation.pager

Common/All

## Interfaces

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageInfo` | This represents a single measured page in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` layout. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize` | This is used to determine how Pages are laid out in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerLayoutInfo` | Contains useful information about the currently displayed layout state of a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerScope` | Receiver scope for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerSnapDistance` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerSnapDistance` defines the way the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` will treat the distance between the current page and the page where it will settle. | Cmn |

## Classes

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize.Fixed` | Multiple pages in a viewport | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerState` | The state that can be used to control `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/VerticalPager.composable#VerticalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/HorizontalPager.composable#HorizontalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` | Cmn |

## Objects

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize.Fill` | Pages take up the whole Pager size. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerDefaults` | Contains the default values used by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)`. | Cmn |

## Composables

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/HorizontalPager.composable` | A Pager that scrolls horizontally. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/VerticalPager.composable` | A Pager that scrolls vertically. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/rememberPagerState.composable` | Creates and remember a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerState` to be used with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` | Cmn |

## Top-level functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/layout/LazyLayoutScrollScope` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#LazyLayoutScrollScope(androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.gestures.ScrollScope)(state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerState, scrollScope: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollScope)` A `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#LazyLayoutScrollScope(androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.gestures.ScrollScope)` that allows customization of animated scroll in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerState` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#PagerState(kotlin.Int,kotlin.Float,kotlin.Function0)( currentPage: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, currentPageOffsetFraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = -0.5, to = 0.5) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, pageCount: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html )` Creates a default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#PagerState(kotlin.Int,kotlin.Float,kotlin.Function0)` to be used with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` | Cmn |

## Top-level functions

### LazyLayoutScrollScope

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/pager/PagerScrollScope.kt+function:LazyLayoutScrollScope) Added in [1.8.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.8.0)

```
fun LazyLayoutScrollScope(state: PagerState, scrollScope: ScrollScope): LazyLayoutScrollScope
```

A `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#LazyLayoutScrollScope(androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.gestures.ScrollScope)` that allows customization of animated scroll in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)`. The scope contains information about the layout where animated scroll can be performed as well as the necessary tools to do that respecting the scroll mutation priority.

```kotlin
import androidx.compose.animation.core.animate
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.layout.LazyLayoutScrollScope
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.LazyLayoutScrollScope
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

suspend fun PagerState.customScroll(block: suspend LazyLayoutScrollScope.() -> Unit) = scroll {
    block.invoke(LazyLayoutScrollScope(this@customScroll, this))
}

val itemsList = (0..100).toList()
val state = rememberPagerState { itemsList.size }
val scope = rememberCoroutineScope()

Column(Modifier.verticalScroll(rememberScrollState())) {
    Button(
        onClick = {
            scope.launch {
                state.customScroll {
                    snapToItem(40, 0) // teleport to item 40
                    val distance = calculateDistanceTo(50).toFloat()
                    var previousValue = 0f
                    androidx.compose.animation.core.animate(
                        0f,
                        distance,
                        animationSpec = tween(5_000),
                    ) { currentValue, _ ->
                        previousValue += scrollBy(currentValue - previousValue)
                    }
                }
            }
        }
    ) {
        Text("Scroll To Item 50")
    }

    HorizontalPager(state) {
        Box(Modifier.padding(2.dp).background(Color.Red).height(600.dp).fillMaxWidth()) {
            Text(itemsList[it].toString())
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerState` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerState` associated with the layout where this animated scroll should be performed. |
| `scrollScope: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollScope` | The base `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollScope` where the scroll session was created. |

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/layout/LazyLayoutScrollScope` | An implementation of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#LazyLayoutScrollScope(androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.gestures.ScrollScope)` that works with `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/HorizontalPager.composable#HorizontalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/VerticalPager.composable#VerticalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)`. |

### PagerState

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/pager/PagerState.kt+function:PagerState) Added in [1.7.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.7.0)

```
fun PagerState(
    currentPage: Int = 0,
    currentPageOffsetFraction: @FloatRange(from = -0.5, to = 0.5) Float = 0.0f,
    pageCount: () -> Int
): PagerState
```

Creates a default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#PagerState(kotlin.Int,kotlin.Float,kotlin.Function0)` to be used with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)`

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

```kotlin
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.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.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.dp
import androidx.compose.ui.unit.sp

// You can use PagerState to define an initial page
val state = rememberPagerState(initialPage = 5) { 10 }
HorizontalPager(modifier = Modifier.fillMaxSize(), state = state) { page ->
    Box(
        modifier =
            Modifier.padding(10.dp).background(Color.Blue).fillMaxWidth().aspectRatio(1f),
        contentAlignment = Alignment.Center,
    ) {
        Text(text = page.toString(), fontSize = 32.sp)
    }
}
```

| Parameters |
|---|---|
| `currentPage: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 0` | The pager that should be shown first. |
| `currentPageOffsetFraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = -0.5, to = 0.5) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | The offset of the initial page as a fraction of the page size. This should vary between -0.5 and 0.5 and indicates how to offset the initial page from the snapped position. |
| `pageCount: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | The amount of pages this Pager will have. |