New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Wear Material Compose

PositionIndicator

Android

Creates an [PositionIndicator] based on the values in a [ScrollState] object. e.g. a [Column] implementing [Modifier.verticalScroll] provides a [ScrollState].

Last updated:

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material:1.4.0-beta03")
}

Overloads

@Composable
fun PositionIndicator(
    scrollState: ScrollState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false,
    fadeInAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    fadeOutAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    positionAnimationSpec: AnimationSpec<Float> =
        PositionIndicatorDefaults.positionAnimationSpec
)

Parameters

namedescription
scrollStateThe scrollState to use as the basis for the PositionIndicatorState.
modifierThe modifier to be applied to the component
reverseDirectionReverses direction of PositionIndicator if true
fadeInAnimationSpec[AnimationSpec] for fade-in animation. Fade-in animation is triggered when the [PositionIndicator] becomes visible - either when state.visibility changes to Show, or state.visibility is AutoHide and state.positionFraction/state.sizeFraction are changed. To disable this animation [snap] AnimationSpec should be passed instead.
fadeOutAnimationSpec[AnimationSpec] for fade-out animation. The Fade-out animation is used for hiding the [PositionIndicator] and making it invisible. [PositionIndicator] will be hidden after a specified delay if no changes in state.positionFraction or state.sizeFraction were detected. If [fadeOutAnimationSpec] is [snap], then after a delay it will be instantly hidden.
positionAnimationSpec[AnimationSpec] for position animation. The Position animation is used for animating changes between state.positionFraction and state.sizeFraction of [PositionIndicatorState]. To disable this animation [snap] AnimationSpec should be passed instead.
@Composable
@Deprecated(
    "This overload is provided for backwards compatibility with " +
        "Compose for Wear OS 1.2." +
        "A newer overload is available with additional fadeInAnimationSpec, " +
        "fadeOutAnimationSpec and positionAnimationSpec parameters.",
    level = DeprecationLevel.HIDDEN

fun PositionIndicator(
    scrollState: ScrollState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false
)

Parameters

namedescription
scrollStateThe scrollState to use as the basis for the PositionIndicatorState.
modifierThe modifier to be applied to the component
reverseDirectionReverses direction of PositionIndicator if true
@Composable
fun PositionIndicator(
    scalingLazyListState: ScalingLazyListState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false,
    fadeInAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    fadeOutAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    positionAnimationSpec: AnimationSpec<Float> =
        PositionIndicatorDefaults.positionAnimationSpec
)

Parameters

namedescription
scalingLazyListStatethe [ScalingLazyListState] to use as the basis for the PositionIndicatorState.
modifierThe modifier to be applied to the component
reverseDirectionReverses direction of PositionIndicator if true
fadeInAnimationSpec[AnimationSpec] for fade-in animation. Fade-in animation is triggered when the [PositionIndicator] becomes visible - either when state.visibility changes to Show, or state.visibility is AutoHide and state.positionFraction/state.sizeFraction are changed. To disable this animation [snap] AnimationSpec should be passed instead.
fadeOutAnimationSpec[AnimationSpec] for fade-out animation. The Fade-out animation is used for hiding the [PositionIndicator] and making it invisible. [PositionIndicator] will be hidden after a specified delay if no changes in state.positionFraction or state.sizeFraction were detected. If [fadeOutAnimationSpec] is [snap], then after a delay it will be instantly hidden.
positionAnimationSpec[AnimationSpec] for position animation. The Position animation is used for animating changes between state.positionFraction and state.sizeFraction of [PositionIndicatorState]. To disable this animation [snap] AnimationSpec should be passed instead.
@Composable
@Deprecated(
    "This overload is provided for backwards compatibility with " +
        "Compose for Wear OS 1.2." +
        "A newer overload is available with additional fadeInAnimationSpec, " +
        "fadeOutAnimationSpec and positionAnimationSpec parameters.",
    level = DeprecationLevel.HIDDEN

fun PositionIndicator(
    scalingLazyListState: ScalingLazyListState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false
)

Parameters

namedescription
scalingLazyListStatethe [ScalingLazyListState] to use as the basis for the PositionIndicatorState.
modifierThe modifier to be applied to the component
reverseDirectionReverses direction of PositionIndicator if true
@Composable
@Deprecated(
    "This overload is provided for backwards compatibility with Compose for Wear OS 1.1." +
        "A newer overload is available which uses ScalingLazyListState from " +
        "androidx.wear.compose.foundation.lazy package", level = DeprecationLevel.WARNING

@Suppress("DEPRECATION"
fun PositionIndicator(
    scalingLazyListState: androidx.wear.compose.material.ScalingLazyListState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false
)

Parameters

namedescription
scalingLazyListStatethe [ScalingLazyListState] to use as the basis for the PositionIndicatorState.
modifierThe modifier to be applied to the component
reverseDirectionReverses direction of PositionIndicator if true
@Composable
fun PositionIndicator(
    lazyListState: LazyListState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false,
    fadeInAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    fadeOutAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    positionAnimationSpec: AnimationSpec<Float> =
        PositionIndicatorDefaults.positionAnimationSpec
)

Parameters

namedescription
lazyListStatethe [LazyListState] to use as the basis for the PositionIndicatorState.
modifierThe modifier to be applied to the component
reverseDirectionReverses direction of PositionIndicator if true
fadeInAnimationSpec[AnimationSpec] for fade-in animation. Fade-in animation is triggered when the [PositionIndicator] becomes visible - either when state.visibility changes to Show, or state.visibility is AutoHide and state.positionFraction/state.sizeFraction are changed. To disable this animation [snap] AnimationSpec should be passed instead.
fadeOutAnimationSpec[AnimationSpec] for fade-out animation. The Fade-out animation is used for hiding the [PositionIndicator] and making it invisible. [PositionIndicator] will be hidden after a specified delay if no changes in state.positionFraction or state.sizeFraction were detected. If [fadeOutAnimationSpec] is [snap], then after a delay it will be instantly hidden.
positionAnimationSpec[AnimationSpec] for position animation. The Position animation is used for animating changes between state.positionFraction and state.sizeFraction of [PositionIndicatorState]. To disable this animation [snap] AnimationSpec should be passed instead.
@Composable
@Deprecated(
    "This overload is provided for backwards compatibility with " +
        "Compose for Wear OS 1.2." +
        "A newer overload is available with additional fadeInAnimationSpec, " +
        "fadeOutAnimationSpec and positionAnimationSpec parameters.",
    level = DeprecationLevel.HIDDEN

fun PositionIndicator(
    lazyListState: LazyListState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false
)

Parameters

namedescription
lazyListStatethe [LazyListState] to use as the basis for the PositionIndicatorState.
modifierThe modifier to be applied to the component
reverseDirectionReverses direction of PositionIndicator if true
@Composable
fun PositionIndicator(
    value: () -> Float,
    modifier: Modifier = Modifier,
    range: ClosedFloatingPointRange<Float> = 0f..1f,
    color: Color = MaterialTheme.colors.onBackground,
    reverseDirection: Boolean = false,
    position: PositionIndicatorAlignment = PositionIndicatorAlignment.OppositeRsb,
    fadeInAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    fadeOutAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    positionAnimationSpec: AnimationSpec<Float> =
        PositionIndicatorDefaults.positionAnimationSpec
)

Parameters

namedescription
valueValue of the indicator in the [range] where 1 represents the maximum value. E.g. If displaying a volume value from 0..11 then the [value] will be volume/11.
rangerange of values that [value] can take
modifierModifier to be applied to the component
colorColor to draw the indicator on.
reverseDirectionReverses direction of PositionIndicator if true
positionindicates where to put the PositionIndicator in the screen, default is [PositionIndicatorPosition#OppositeRsb]
fadeInAnimationSpec[AnimationSpec] for fade-in animation. Fade-in animation is triggered when the [PositionIndicator] becomes visible - either when state.visibility changes to Show, or state.visibility is AutoHide and state.positionFraction/state.sizeFraction are changed. To disable this animation [snap] AnimationSpec should be passed instead.
fadeOutAnimationSpec[AnimationSpec] for fade-out animation. The Fade-out animation is used for hiding the [PositionIndicator] and making it invisible. [PositionIndicator] will be hidden after a specified delay if no changes in state.positionFraction or state.sizeFraction were detected. If [fadeOutAnimationSpec] is [snap], then after a delay it will be instantly hidden.
positionAnimationSpec[AnimationSpec] for position animation. The Position animation is used for animating changes between state.positionFraction and state.sizeFraction of [PositionIndicatorState]. To disable this animation [snap] AnimationSpec should be passed instead.
@Composable
@Deprecated(
    "This overload is provided for backwards compatibility with " +
        "Compose for Wear OS 1.2." +
        "A newer overload is available with additional fadeInAnimationSpec, " +
        "fadeOutAnimationSpec and positionAnimationSpec parameters.",
    level = DeprecationLevel.HIDDEN

fun PositionIndicator(
    value: () -> Float,
    modifier: Modifier = Modifier,
    range: ClosedFloatingPointRange<Float> = 0f..1f,
    color: Color = MaterialTheme.colors.onBackground,
    reverseDirection: Boolean = false,
    position: PositionIndicatorAlignment = PositionIndicatorAlignment.OppositeRsb
)

Parameters

namedescription
valueValue of the indicator in the [range] where 1 represents the maximum value. E.g. If displaying a volume value from 0..11 then the [value] will be volume/11.
rangerange of values that [value] can take
modifierModifier to be applied to the component
colorColor to draw the indicator on.
reverseDirectionReverses direction of PositionIndicator if true
positionindicates where to put the PositionIndicator in the screen, default is [PositionIndicatorPosition#OppositeRsb]
@Composable
fun PositionIndicator(
    state: PositionIndicatorState,
    indicatorHeight: Dp,
    indicatorWidth: Dp,
    paddingHorizontal: Dp,
    modifier: Modifier = Modifier,
    background: Color = MaterialTheme.colors.onBackground.copy(alpha = 0.3f),
    color: Color = MaterialTheme.colors.onBackground,
    reverseDirection: Boolean = false,
    position: PositionIndicatorAlignment = PositionIndicatorAlignment.End,
    fadeInAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    fadeOutAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    positionAnimationSpec: AnimationSpec<Float> =
        PositionIndicatorDefaults.positionAnimationSpec
)

Parameters

namedescription
statethe [PositionIndicatorState] of the state we are displaying.
indicatorHeightthe height of the position indicator in Dp.
indicatorWidththe width of the position indicator in Dp.
paddingHorizontalthe padding to apply between the indicator and the border of the screen.
modifierThe modifier to be applied to the component.
backgroundthe color to draw the non-active part of the position indicator.
colorthe color to draw the active part of the indicator in.
reverseDirectionReverses direction of PositionIndicator if true.
positionindicates where to put the PositionIndicator on the screen, default is [PositionIndicatorPosition#End]
fadeInAnimationSpec[AnimationSpec] for fade-in animation. Fade-in animation is triggered when the [PositionIndicator] becomes visible - either when state.visibility changes to Show, or state.visibility is AutoHide and state.positionFraction/state.sizeFraction are changed. To disable this animation [snap] AnimationSpec should be passed instead.
fadeOutAnimationSpec[AnimationSpec] for fade-out animation. The Fade-out animation is used for hiding the [PositionIndicator] and making it invisible. [PositionIndicator] will be hidden after a specified delay if no changes in state.positionFraction or state.sizeFraction were detected. If [fadeOutAnimationSpec] is [snap], then after a delay it will be instantly hidden.
positionAnimationSpec[AnimationSpec] for position animation. The Position animation is used for animating changes between state.positionFraction and state.sizeFraction of [PositionIndicatorState]. To disable animation [snap] should be passed.
@Composable
@Deprecated(
    "This overload is provided for backwards compatibility with " +
        "Compose for Wear OS 1.2." +
        "A newer overload is available with additional fadeInAnimationSpec, " +
        "fadeOutAnimationSpec and positionAnimationSpec parameters.",
    level = DeprecationLevel.HIDDEN

fun PositionIndicator(
    state: PositionIndicatorState,
    indicatorHeight: Dp,
    indicatorWidth: Dp,
    paddingHorizontal: Dp,
    modifier: Modifier = Modifier,
    background: Color = MaterialTheme.colors.onBackground.copy(alpha = 0.3f),
    color: Color = MaterialTheme.colors.onBackground,
    reverseDirection: Boolean = false,
    position: PositionIndicatorAlignment = PositionIndicatorAlignment.End
)

Parameters

namedescription
statethe [PositionIndicatorState] of the state we are displaying.
indicatorHeightthe height of the position indicator in Dp.
indicatorWidththe width of the position indicator in Dp.
paddingHorizontalthe padding to apply between the indicator and the border of the screen.
modifierThe modifier to be applied to the component.
backgroundthe color to draw the non-active part of the position indicator.
colorthe color to draw the active part of the indicator in.
reverseDirectionReverses direction of PositionIndicator if true.
positionindicates where to put the PositionIndicator on the screen, default is [PositionIndicatorPosition#End]