androidx.wear.compose.foundation.pager

Classes

PagerState

The state that can be used to control Wear Pagers.

Objects

PagerDefaults

Contains the default values used by Pager.

Top-level functions summary

`Unit`	@Composable HorizontalPager( state: PagerState, modifier: Modifier, contentPadding: PaddingValues, beyondViewportPageCount: Int, flingBehavior: TargetedFlingBehavior, userScrollEnabled: Boolean, reverseLayout: Boolean, key: ((index: Int) -> Any)?, swipeToDismissEdgeZoneFraction: @FloatRange(from = 0.0, to = 1.0) Float, rotaryScrollableBehavior: RotaryScrollableBehavior?, content: @Composable PagerScope.(page: Int) -> Unit ) A full-screen horizontally scrolling Pager optimized for Wear OS devices.
`PagerState`	`PagerState( currentPage: @IntRange(from = 0) Int, currentPageOffsetFraction: @FloatRange(from = -0.5, to = 0.5) Float, pageCount: @IntRange(from = 1) () -> Int )` Creates a default `PagerState` to be used with a Wear Pager
`Unit`	`@Composable VerticalPager( state: PagerState, modifier: Modifier, contentPadding: PaddingValues, beyondViewportPageCount: Int, flingBehavior: TargetedFlingBehavior, userScrollEnabled: Boolean, reverseLayout: Boolean, key: ((index: Int) -> Any)?, rotaryScrollableBehavior: RotaryScrollableBehavior?, content: @Composable PagerScope.(page: Int) -> Unit )` A full-screen vertically scrolling Pager optimized for Wear OS devices.
`PagerState`	`@Composable rememberPagerState( initialPage: @IntRange(from = 0) Int, initialPageOffsetFraction: @FloatRange(from = -0.5, to = 0.5) Float, pageCount: @IntRange(from = 1) () -> Int )` Creates and remember a `PagerState` to be used with a Wear Pager

Top-level functions

Artifact: androidx.wear.compose:compose-foundation

View Source

Added in 1.5.0-alpha07

@Composable
fun HorizontalPager(
    state: PagerState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = PaddingValues(0.dp),
    beyondViewportPageCount: Int = PagerDefaults.BeyondViewportPageCount,
    flingBehavior: TargetedFlingBehavior = PagerDefaults.snapFlingBehavior(state = state),
    userScrollEnabled: Boolean = true,
    reverseLayout: Boolean = false,
    key: ((index: Int) -> Any)? = null,
    swipeToDismissEdgeZoneFraction: @FloatRange(from = 0.0, to = 1.0) Float = PagerDefaults.SwipeToDismissEdgeZoneFraction,
    rotaryScrollableBehavior: RotaryScrollableBehavior? = null,
    content: @Composable PagerScope.(page: Int) -> Unit
): Unit

A full-screen horizontally scrolling Pager optimized for Wear OS devices. This component wraps the standard Compose Foundation HorizontalPager and provides Wear-specific enhancements to improve performance, usability, and adherence to Wear OS design guidelines.

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

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.text.BasicText
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

// Creates a horizontal pager with 10 elements
val state = rememberPagerState { 10 }
HorizontalPager(
    state = state,
) { page ->
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        BasicText(text = "Page $page", style = TextStyle(color = Color.White))
    }
}

Parameters
`state: PagerState`	The state to control this pager
`modifier: Modifier = Modifier`	A modifier instance to be applied to this Pager outer layout
`contentPadding: PaddingValues = PaddingValues(0.dp)`	a padding around the whole content. This will add padding for the content after it has been clipped, which is not possible via `modifier` param. You can use it to add a padding before the first page or after the last one.
`beyondViewportPageCount: Int = PagerDefaults.BeyondViewportPageCount`	Pages to compose and layout before and after the list of visible pages. Note: Be aware that using a large value for `beyondViewportPageCount` will cause a lot of pages to be composed, measured and placed which will defeat the purpose of using lazy loading. This should be used as an optimization to pre-load a couple of pages before and after the visible ones. This does not include the pages automatically composed and laid out by the pre-fetcher in the direction of the scroll during scroll events.
`flingBehavior: TargetedFlingBehavior = PagerDefaults.snapFlingBehavior(state = state)`	The `TargetedFlingBehavior` to be used for post scroll gestures.
`userScrollEnabled: Boolean = true`	whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using `PagerState.scroll` even when it is disabled.
`reverseLayout: Boolean = false`	reverse the direction of scrolling and layout.
`key: ((index: Int) -> Any)? = null`	a stable and unique key representing the item. When you specify the key the scroll position will be maintained based on the key, which means if you add/remove items before the current visible item the item with the given key will be kept as the first visible one. If null is passed the position in the list will represent the key.
`swipeToDismissEdgeZoneFraction: @FloatRange(from = 0.0, to = 1.0) Float = PagerDefaults.SwipeToDismissEdgeZoneFraction`	A float which controls the size of the screen edge area used for the Wear system's swipe to dismiss gesture. This value, between 0 and 1, represents the fraction of the screen width that will be sensitive to the gesture. For example, 0.25 means the leftmost 25% of the screen will trigger the gesture. Even when RTL mode is enabled, this parameter only ever applies to the left edge of the screen. Setting this to 0 will disable the gesture.
`rotaryScrollableBehavior: RotaryScrollableBehavior? = null`	Parameter for changing rotary behavior. By default rotary support is disabled for `HorizontalPager`. It can be enabled by passing `RotaryScrollableDefaults.snapBehavior` with pagerState parameter.
`content: @Composable PagerScope.(page: Int) -> Unit`	A composable function that defines the content of each page displayed by the Pager. This is where the UI elements that should appear within each page should be placed.

PagerState

Artifact: androidx.wear.compose:compose-foundation

View Source

Added in 1.5.0-alpha07

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

Creates a default PagerState to be used with a Wear Pager

Parameters
`currentPage: @IntRange(from = 0) Int = 0`	The page that should be shown first.
`currentPageOffsetFraction: @FloatRange(from = -0.5, to = 0.5) Float = 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: @IntRange(from = 1) () -> Int`	The number of pages this Pager will have.

Artifact: androidx.wear.compose:compose-foundation

View Source

Added in 1.5.0-alpha07

@Composable
fun VerticalPager(
    state: PagerState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = PaddingValues(0.dp),
    beyondViewportPageCount: Int = PagerDefaults.BeyondViewportPageCount,
    flingBehavior: TargetedFlingBehavior = PagerDefaults.snapFlingBehavior(state = state),
    userScrollEnabled: Boolean = true,
    reverseLayout: Boolean = false,
    key: ((index: Int) -> Any)? = null,
    rotaryScrollableBehavior: RotaryScrollableBehavior? = RotaryScrollableDefaults.snapBehavior(state),
    content: @Composable PagerScope.(page: Int) -> Unit
): Unit

A full-screen vertically scrolling Pager optimized for Wear OS devices. This component wraps the standard Compose Foundation VerticalPager and provides Wear-specific enhancements to improve performance, usability, and adherence to Wear OS design guidelines.

VerticalPager supports rotary input by default. Rotary input allows users to scroll through the pager's content - by using a crown or a rotating bezel on their Wear OS device. It can be modified or turned off using the rotaryScrollableBehavior parameter.

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

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.text.BasicText
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

// Creates a vertical pager with 10 elements
val state = rememberPagerState { 10 }
VerticalPager(
    state = state,
) { page ->
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        BasicText(text = "Page $page", style = TextStyle(color = Color.White))
    }
}

Parameters
`state: PagerState`	The state to control this pager
`modifier: Modifier = Modifier`	A modifier instance to be apply to this Pager outer layout
`contentPadding: PaddingValues = PaddingValues(0.dp)`	a padding around the whole content. This will add padding for the content after it has been clipped, which is not possible via `modifier` param. You can use it to add a padding before the first page or after the last one.
`beyondViewportPageCount: Int = PagerDefaults.BeyondViewportPageCount`	Pages to compose and layout before and after the list of visible pages. Note: Be aware that using a large value for `beyondViewportPageCount` will cause a lot of pages to be composed, measured and placed which will defeat the purpose of using lazy loading. This should be used as an optimization to pre-load a couple of pages before and after the visible ones. This does not include the pages automatically composed and laid out by the pre-fetcher in the direction of the scroll during scroll events.
`flingBehavior: TargetedFlingBehavior = PagerDefaults.snapFlingBehavior(state = state)`	The `TargetedFlingBehavior` to be used for post scroll gestures.
`userScrollEnabled: Boolean = true`	whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using `PagerState.scroll` even when it is disabled.
`reverseLayout: Boolean = false`	reverse the direction of scrolling and layout.
`key: ((index: Int) -> Any)? = null`	a stable and unique key representing the item. When you specify the key the scroll position will be maintained based on the key, which means if you add/remove items before the current visible item the item with the given key will be kept as the first visible one. If null is passed the position in the list will represent the key.
`rotaryScrollableBehavior: RotaryScrollableBehavior? = RotaryScrollableDefaults.snapBehavior(state)`	Parameter for changing rotary behavior. We recommend to use `RotaryScrollableDefaults.snapBehavior` with pagerState parameter. Passing null turns off the rotary handling if it is not required.
`content: @Composable PagerScope.(page: Int) -> Unit`	A composable function that defines the content of each page displayed by the Pager. This is where the UI elements that should appear within each page should be placed.

rememberPagerState

Artifact: androidx.wear.compose:compose-foundation

View Source

Added in 1.5.0-alpha07

@Composable
fun rememberPagerState(
    initialPage: @IntRange(from = 0) Int = 0,
    initialPageOffsetFraction: @FloatRange(from = -0.5, to = 0.5) Float = 0.0f,
    pageCount: @IntRange(from = 1) () -> Int
): PagerState

Creates and remember a PagerState to be used with a Wear Pager

Parameters
`initialPage: @IntRange(from = 0) Int = 0`	The page that should be shown first.
`initialPageOffsetFraction: @FloatRange(from = -0.5, to = 0.5) Float = 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: @IntRange(from = 1) () -> Int`	The number of pages this Pager will have.