ScrollIndicator

Composable Component

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

stateThe scrollState to use as the basis for the ScrollIndicatorState.
modifierThe modifier to be applied to the component - usually set to Modifier.align(Alignment.CenterEnd).
colorsScrollIndicatorColors that will be used to resolve the indicator and track colors for this ScrollIndicator.
reverseDirectionReverses direction of ScrollIndicator if true
positionAnimationSpecAnimationSpec 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

statethe ScalingLazyListState to use as the basis for the ScrollIndicatorState.
modifierThe modifier to be applied to the component
colorsScrollIndicatorColors that will be used to resolve the indicator and track colors for this ScrollIndicator.
reverseDirectionReverses 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.
positionAnimationSpecAnimationSpec 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

statethe TransformingLazyColumnState to use as the basis for the ScrollIndicatorState.
modifierThe modifier to be applied to the component
colorsScrollIndicatorColors that will be used to resolve the indicator and track colors for this ScrollIndicator.
reverseDirectionReverses 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.
positionAnimationSpecAnimationSpec 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

statethe LazyListState to use as the basis for the ScrollIndicatorState.
modifierThe modifier to be applied to the component
colorsScrollIndicatorColors that will be used to resolve the indicator and track colors for this ScrollIndicator.
reverseDirectionReverses 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.
positionAnimationSpecAnimationSpec 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)
    }
}