ScrollIndicator

Functions summary

Unit	@Composable ScrollIndicator(     state: LazyListState,     modifier: Modifier,     colors: ScrollIndicatorColors,     reverseDirection: Boolean,     positionAnimationSpec: AnimationSpec<Float> ) A composable that displays a visual indicator of scrolling progress within a scrollable container.
Unit	@Composable ScrollIndicator(     state: ScalingLazyListState,     modifier: Modifier,     colors: ScrollIndicatorColors,     reverseDirection: Boolean,     positionAnimationSpec: AnimationSpec<Float> ) A composable that displays a visual indicator of scrolling progress within a scrollable container.
Unit	@Composable ScrollIndicator(     state: ScrollState,     modifier: Modifier,     colors: ScrollIndicatorColors,     reverseDirection: Boolean,     positionAnimationSpec: AnimationSpec<Float> ) A composable that displays a visual indicator of scrolling progress within a scrollable container.
Unit	@Composable ScrollIndicator(     state: TransformingLazyColumnState,     modifier: Modifier,     colors: ScrollIndicatorColors,     reverseDirection: Boolean,     positionAnimationSpec: AnimationSpec<Float> ) A composable that displays a visual indicator of scrolling progress within a scrollable container.

Functions

ScrollIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScrollIndicator(
    state: LazyListState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = state.layoutInfo.reverseLayout,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec
): Unit

A composable that displays a visual indicator of scrolling progress within a scrollable container.

Creates an ScrollIndicator based on the values in a LazyListState object that a LazyColumn uses.

To comply with Wear Material Design guidelines, this composable should be aligned to the center end of the screen using Alignment.CenterEnd. It will appear on the right in Ltr orientation and on the left in Rtl orientation.

It detects if the screen is round or square and draws itself as a curve or line.

For more information, see the Scroll indicators guide.

Example of a sample ScrollIndicator with LazyColumn:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ScrollIndicator
import androidx.wear.compose.material3.Text

val scrollState = rememberLazyListState()
Box {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        state = scrollState,
    ) {
        items(100) { Text(text = "Item $it") }
    }
    ScrollIndicator(modifier = Modifier.align(Alignment.CenterEnd), state = scrollState)
}

Parameters
state: LazyListState	the LazyListState to use as the basis for the ScrollIndicatorState.
modifier: Modifier = Modifier	The modifier to be applied to the component
colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors()	ScrollIndicatorColors that will be used to resolve the indicator and track colors for this ScrollIndicator.
reverseDirection: Boolean = state.layoutInfo.reverseLayout	Reverses direction of ScrollIndicator if true. The default value is inferred from the reverseLayout property of the provided LazyListState, ensuring the indicator automatically matches the list's layout direction.
positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec	AnimationSpec for position animation. The Position animation is used for animating changes to the scroll size and position. To disable this animation snap AnimationSpec should be passed instead.

ScrollIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScrollIndicator(
    state: ScalingLazyListState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = state.layoutInfo.reverseLayout,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec
): Unit

A composable that displays a visual indicator of scrolling progress within a scrollable container.

Creates an ScrollIndicator based on the values in a ScalingLazyListState object that a ScalingLazyColumn uses.

Typically used with the ScreenScaffold but can be used to decorate any full screen situation.

To comply with Wear Material Design guidelines, this composable should be aligned to the center end of the screen using Alignment.CenterEnd. It will appear on the right in Ltr orientation and on the left in Rtl orientation.

It detects if the screen is round or square and draws itself as a curve or line.

For more information, see the Scroll indicators guide.

Example of a sample ScrollIndicator with ScalingLazyColumn:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.ScrollIndicator
import androidx.wear.compose.material3.Text

val scrollState = rememberScalingLazyListState()
Box {
    ScalingLazyColumn(modifier = Modifier.fillMaxSize(), state = scrollState) {
        items(100) { Text(text = "Item $it") }
    }
    ScrollIndicator(modifier = Modifier.align(Alignment.CenterEnd), state = scrollState)
}

Parameters
state: ScalingLazyListState	the ScalingLazyListState to use as the basis for the ScrollIndicatorState.
modifier: Modifier = Modifier	The modifier to be applied to the component
colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors()	ScrollIndicatorColors that will be used to resolve the indicator and track colors for this ScrollIndicator.
reverseDirection: Boolean = state.layoutInfo.reverseLayout	Reverses direction of ScrollIndicator if true. The default value is inferred from the reverseLayout property of the provided ScalingLazyListState, ensuring the indicator automatically matches the list's layout direction.
positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec	AnimationSpec for position animation. The Position animation is used for animating changes to the scroll size and position. To disable this animation snap AnimationSpec should be passed instead.

ScrollIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScrollIndicator(
    state: ScrollState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = false,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec
): Unit

A composable that displays a visual indicator of scrolling progress within a scrollable container.

Creates a ScrollIndicator based on the values in a ScrollState object. e.g. a Column implementing androidx.compose.foundation.verticalScroll provides a ScrollState.

To comply with Wear Material Design guidelines, this composable should be aligned to the center end of the screen using Alignment.CenterEnd, such as by setting modifier = Modifier.align(Alignment.CenterEnd). This way, the ScrollIndicator will appear on the right in Ltr orientation and on the left in Rtl orientation.

It detects if the screen is round or square and draws itself as a curve or line.

For more information, see the Scroll indicators guide.

Example of a sample ScrollIndicator with Column:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ScrollIndicator
import androidx.wear.compose.material3.Text

val scrollState = rememberScrollState()
Box {
    Column(
        modifier = Modifier.fillMaxSize().verticalScroll(scrollState),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        repeat(100) { Text(text = "Item $it") }
    }
    ScrollIndicator(modifier = Modifier.align(Alignment.CenterEnd), state = scrollState)
}

Parameters
state: ScrollState	The scrollState to use as the basis for the ScrollIndicatorState.
modifier: Modifier = Modifier	The modifier to be applied to the component - usually set to Modifier.align(Alignment.CenterEnd).
colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors()	ScrollIndicatorColors that will be used to resolve the indicator and track colors for this ScrollIndicator.
reverseDirection: Boolean = false	Reverses direction of ScrollIndicator if true
positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec	AnimationSpec for position animation. The Position animation is used for animating changes to the scroll size and position. To disable this animation snap AnimationSpec should be passed instead.

ScrollIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScrollIndicator(
    state: TransformingLazyColumnState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = state.layoutInfo.reverseLayout,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec
): Unit

A composable that displays a visual indicator of scrolling progress within a scrollable container.

Creates an ScrollIndicator based on the values in a TransformingLazyColumnState object that a androidx.wear.compose.foundation.lazy.TransformingLazyColumn uses.

Typically used with the ScreenScaffold but can be used to decorate any full screen situation.

To comply with Wear Material Design guidelines, this composable should be aligned to the center end of the screen using Alignment.CenterEnd. It will appear on the right in Ltr orientation and on the left in Rtl orientation.

It detects if the screen is round or square and draws itself as a curve or line.

For more information, see the Scroll indicators guide.

Example of a sample ScrollIndicator with TransformingLazyColumn:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.ScrollIndicator
import androidx.wear.compose.material3.Text

val scrollState = rememberTransformingLazyColumnState()
Box {
    TransformingLazyColumn(modifier = Modifier.background(Color.Black), state = scrollState) {
        items(100) { Text(text = "Item $it") }
    }
    ScrollIndicator(modifier = Modifier.align(Alignment.CenterEnd), state = scrollState)
}

Parameters
state: TransformingLazyColumnState	the TransformingLazyColumnState to use as the basis for the ScrollIndicatorState.
modifier: Modifier = Modifier	The modifier to be applied to the component
colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors()	ScrollIndicatorColors that will be used to resolve the indicator and track colors for this ScrollIndicator.
reverseDirection: Boolean = state.layoutInfo.reverseLayout	Reverses direction of ScrollIndicator if true. The default value is inferred from the reverseLayout property of the provided TransformingLazyColumnState, ensuring the indicator automatically matches the list's layout direction.
positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec	AnimationSpec for position animation. The Position animation is used for animating changes to the scroll size and position. To disable this animation snap AnimationSpec should be passed instead.