PagerScaffoldDefaults

Artifact: androidx.wear.compose:compose-material3

Added in 1.5.0

object PagerScaffoldDefaults

Contains default values used for HorizontalPagerScaffold and VerticalPagerScaffold.

Summary

Public functions
`TargetedFlingBehavior`	`@Composable snapWithSpringFlingBehavior(state: PagerState)` Recommended fling behavior for pagers on Wear when using Material3, snaps at most one page at a time.

Public properties
`AnimationSpec<Float>`	`FadeOutAnimationSpec` The default value for the indicator fade out animation spec.
`Float`	`HighSnapPositionalThreshold` High `SnapPositionalThreshold` value, recommended for contexts where even a light or minimal gesture should trigger movement, such as navigating a long list (e.g. at least 10 items) where quick scrolling is desired.
`Float`	`SnapPositionalThreshold` Recommended `SnapPositionalThreshold` value for screens used when the user is moving or there are a low number of screens (i.e., fewer than 10).

Public functions

Added in 1.5.0

@Composable
fun snapWithSpringFlingBehavior(state: PagerState): TargetedFlingBehavior

Recommended fling behavior for pagers on Wear when using Material3, snaps at most one page at a time. This behavior is tailored for a smooth, spring-like snapping effect, enhancing the user experience with a more fluid transition between pages.

Example of using HorizontalPager and snapWithSpringFlingBehavior:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.PagerDefaults
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    HorizontalPagerScaffold(pagerState = pagerState) {
        HorizontalPager(
            state = pagerState,
            flingBehavior =
                PagerDefaults.snapFlingBehavior(
                    state = pagerState,
                    maxFlingPages = 1,
                    snapPositionalThreshold = PagerScaffoldDefaults.HighSnapPositionalThreshold,
                    snapAnimationSpec = MaterialTheme.motionScheme.defaultSpatialSpec(),
                ),
            rotaryScrollableBehavior = null,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center,
                    ) {
                        Text(text = "Page #$page")
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "Swipe left and right")
                        if (page == 0) {
                            Spacer(modifier = Modifier.height(16.dp))
                            Button(onClick = navigateBack) { Text("Exit") }
                        }
                    }
                }
            }
        }
    }
}

Example of using VerticalPager and snapWithSpringFlingBehavior:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.PagerDefaults
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPagerScaffold

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    VerticalPagerScaffold(pagerState = pagerState) {
        VerticalPager(
            state = pagerState,
            flingBehavior =
                PagerDefaults.snapFlingBehavior(
                    state = pagerState,
                    maxFlingPages = 1,
                    snapPositionalThreshold = PagerScaffoldDefaults.HighSnapPositionalThreshold,
                    snapAnimationSpec = MaterialTheme.motionScheme.defaultSpatialSpec(),
                ),
            rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(pagerState),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center,
                    ) {
                        Text(text = "Page #$page")
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "Swipe up and down")
                    }
                }
            }
        }
    }
}

Parameters
`state: PagerState`	The `PagerState` that controls the Pager to which this FlingBehavior will be applied to.

Public properties

FadeOutAnimationSpec

Added in 1.5.0

val FadeOutAnimationSpec: AnimationSpec<Float>

The default value for the indicator fade out animation spec. Use this to fade out the page indicator when paging has stopped.

HighSnapPositionalThreshold

Added in 1.6.0-alpha08

val HighSnapPositionalThreshold: Float

High SnapPositionalThreshold value, recommended for contexts where even a light or minimal gesture should trigger movement, such as navigating a long list (e.g. at least 10 items) where quick scrolling is desired.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.PagerDefaults
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPagerScaffold

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    VerticalPagerScaffold(pagerState = pagerState) {
        VerticalPager(
            state = pagerState,
            flingBehavior =
                PagerDefaults.snapFlingBehavior(
                    state = pagerState,
                    maxFlingPages = 1,
                    snapPositionalThreshold = PagerScaffoldDefaults.HighSnapPositionalThreshold,
                    snapAnimationSpec = MaterialTheme.motionScheme.defaultSpatialSpec(),
                ),
            rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(pagerState),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center,
                    ) {
                        Text(text = "Page #$page")
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "Swipe up and down")
                    }
                }
            }
        }
    }
}

SnapPositionalThreshold

Added in 1.6.0-alpha08

val SnapPositionalThreshold: Float

Recommended SnapPositionalThreshold value for screens used when the user is moving or there are a low number of screens (i.e., fewer than 10).

Example of a VerticalPager with a small number of pages and low sensitivity:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.PagerDefaults
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPagerScaffold

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 3 })

    VerticalPagerScaffold(pagerState = pagerState) {
        VerticalPager(
            state = pagerState,
            flingBehavior =
                PagerDefaults.snapFlingBehavior(
                    state = pagerState,
                    maxFlingPages = 0,
                    snapPositionalThreshold = PagerScaffoldDefaults.SnapPositionalThreshold,
                    snapAnimationSpec = PagerDefaults.SnapAnimationSpec,
                ),
            rotaryScrollableBehavior =
                RotaryScrollableDefaults.snapBehavior(
                    pagerState = pagerState,
                    snapSensitivity = RotaryScrollableDefaults.SnapSensitivity,
                ),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center,
                    ) {
                        Text(text = "Page #$page")
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "Swipe up and down")
                    }
                }
            }
        }
    }
}

Example of a HorizontalPager with a small number of pages and low sensitivity:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.PagerDefaults
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 3 })

    HorizontalPagerScaffold(pagerState = pagerState) {
        HorizontalPager(
            state = pagerState,
            flingBehavior =
                PagerDefaults.snapFlingBehavior(
                    state = pagerState,
                    maxFlingPages = 0,
                    snapPositionalThreshold = PagerScaffoldDefaults.SnapPositionalThreshold,
                    snapAnimationSpec = PagerDefaults.SnapAnimationSpec,
                ),
            rotaryScrollableBehavior =
                RotaryScrollableDefaults.snapBehavior(
                    pagerState = pagerState,
                    snapSensitivity = RotaryScrollableDefaults.SnapSensitivity,
                ),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center,
                    ) {
                        Text(text = "Page #$page")
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "Swipe left and right")
                        if (page == 0) {
                            Spacer(modifier = Modifier.height(16.dp))
                            Button(onClick = navigateBack) { Text("Exit") }
                        }
                    }
                }
            }
        }
    }
}