PagerScaffoldDefaults

object PagerScaffoldDefaults


Contains default values used for HorizontalPagerScaffold and VerticalPagerScaffold.

Summary

Public functions

TargetedFlingBehavior
@Composable
snapWithSpringFlingBehavior(
    state: PagerState,
    sensitivity: PagerSensitivity
)

Recommended fling behavior for pagers on Wear when using Material3, providing a smooth, spring-like snapping effect.

Public properties

AnimationSpec<Float>

The default value for the indicator fade out animation spec.

Public functions

snapWithSpringFlingBehavior

Added in 1.6.0-alpha06
@Composable
fun snapWithSpringFlingBehavior(
    state: PagerState,
    sensitivity: PagerSensitivity = PagerSensitivity.High
): TargetedFlingBehavior

Recommended fling behavior for pagers on Wear when using Material3, providing a smooth, spring-like snapping effect.

PagerSensitivity.Low: Provides high-stiffness for better control during exercise or other gross-motor activities

PagerSensitivity.Medium: Intended for use when the user is moving but less vigorously.

PagerSensitivity.High (default value): Recommended for screens with at least 10 pages, where the user is expected to scroll quickly through many pages.

Example of using HorizontalPager with snapWithSpringFlingBehavior and PagerSensitivity.Low:

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.rememberPagerState
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.foundation.rotary.RotarySnapSensitivity
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.PagerSensitivity
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

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

    HorizontalPagerScaffold(pagerState = pagerState) {
        HorizontalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(
                    state = pagerState,
                    sensitivity = PagerSensitivity.Low,
                ),
            rotaryScrollableBehavior =
                RotaryScrollableDefaults.snapBehavior(
                    pagerState = pagerState,
                    snapSensitivity = RotarySnapSensitivity.Default,
                ),
        ) { 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 with snapWithSpringFlingBehavior and PagerSensitivity.Low:

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.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.foundation.rotary.RotarySnapSensitivity
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.PagerSensitivity
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPagerScaffold

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

    VerticalPagerScaffold(pagerState = pagerState) {
        VerticalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(
                    state = pagerState,
                    sensitivity = PagerSensitivity.Low,
                ),
            rotaryScrollableBehavior =
                RotaryScrollableDefaults.snapBehavior(
                    pagerState = pagerState,
                    snapSensitivity = RotarySnapSensitivity.Default,
                ),
        ) { 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.

sensitivity: PagerSensitivity = PagerSensitivity.High

Configures the snap sensitivity. Defaults to PagerSensitivity.High.

Public properties

FadeOutAnimationSpec

Added in 1.5.0
val FadeOutAnimationSpecAnimationSpec<Float>

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