ScrollIndicator

Component in Wear Material 3 Compose

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 [Modifier.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.

Last updated: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha24")
}

Overloads

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

Parameters

name	description
state	The scrollState to use as the basis for the ScrollIndicatorState.
modifier	The modifier to be applied to the component - usually set to Modifier.align(Alignment.CenterEnd).
reverseDirection	Reverses direction of ScrollIndicator if true
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.

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

Parameters

name	description
state	the [ScalingLazyListState] to use as the basis for the ScrollIndicatorState.
modifier	The modifier to be applied to the component
reverseDirection	Reverses direction of ScrollIndicator if true
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.

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

Parameters

name	description
state	the [LazyListState] to use as the basis for the ScrollIndicatorState.
modifier	The modifier to be applied to the component
reverseDirection	Reverses direction of ScrollIndicator if true
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.

Code Examples

ScrollIndicatorWithColumnSample

@Composable
fun ScrollIndicatorWithColumnSample() {
    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)
    }
}

ScrollIndicatorWithSLCSample

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

ScrollIndicatorWithLCSample

@Composable
fun ScrollIndicatorWithLCSample() {
    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)
    }
}