ScrollIndicator

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

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

Parameters
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).
colors ScrollIndicatorColors that will be used to resolve the indicator and track colors for this ScrollIndicator.
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.
Android
@Composable
public fun ScrollIndicator(
    state: ScalingLazyListState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = state.layoutInfo.reverseLayout,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec,
)

Parameters
state the ScalingLazyListState to use as the basis for the ScrollIndicatorState.
modifier The modifier to be applied to the component
colors ScrollIndicatorColors that will be used to resolve the indicator and track colors for this ScrollIndicator.
reverseDirection 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 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.
Android
@Composable
public fun ScrollIndicator(
    state: TransformingLazyColumnState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = state.layoutInfo.reverseLayout,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec,
)

Parameters
state the TransformingLazyColumnState to use as the basis for the ScrollIndicatorState.
modifier The modifier to be applied to the component
colors ScrollIndicatorColors that will be used to resolve the indicator and track colors for this ScrollIndicator.
reverseDirection 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 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.
Android
@Composable
public fun ScrollIndicator(
    state: LazyListState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = state.layoutInfo.reverseLayout,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec,
)

Parameters
state the LazyListState to use as the basis for the ScrollIndicatorState.
modifier The modifier to be applied to the component
colors ScrollIndicatorColors that will be used to resolve the indicator and track colors for this ScrollIndicator.
reverseDirection 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 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

@Preview
@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)
    }
}

ScrollIndicatorWithLCSample

@Preview
@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)
    }
}

ScrollIndicatorWithSLCSample

@Preview
@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)
    }
}

ScrollIndicatorWithTLCSample

@Preview
@Composable
fun ScrollIndicatorWithTLCSample() {
    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)
    }
}
View all →