---
title: "PositionIndicator"
description: "Creates an `PositionIndicator` based on the values in a `ScrollState` object. e.g. a `Column`
implementing `androidx.compose.foundation.verticalScroll` provides a `ScrollState`."
type: "component"
---

<div class='type'>Composable Component</div>



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

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public 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,
): Unit
```


#### Parameters

| | |
| --- | --- |
| scrollState | The scrollState to use as the basis for the PositionIndicatorState. |
| modifier | The modifier to be applied to the component |
| reverseDirection | Reverses 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. |




<div class='sourceset sourceset-android'>Android</div>


> **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.

```kotlin
@Composable
public fun PositionIndicator(
    scrollState: ScrollState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false,
): Unit
```


#### Parameters

| | |
| --- | --- |
| scrollState | The scrollState to use as the basis for the PositionIndicatorState. |
| modifier | The modifier to be applied to the component |
| reverseDirection | Reverses direction of PositionIndicator if true |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public 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,
): Unit
```


#### Parameters

| | |
| --- | --- |
| scalingLazyListState | the `ScalingLazyListState` to use as the basis for the PositionIndicatorState. |
| modifier | The modifier to be applied to the component |
| reverseDirection | Reverses 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. |




<div class='sourceset sourceset-android'>Android</div>


> **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.

```kotlin
@Composable
public fun PositionIndicator(
    scalingLazyListState: ScalingLazyListState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false,
): Unit
```


#### Parameters

| | |
| --- | --- |
| scalingLazyListState | the `ScalingLazyListState` to use as the basis for the PositionIndicatorState. |
| modifier | The modifier to be applied to the component |
| reverseDirection | Reverses direction of PositionIndicator if true |




<div class='sourceset sourceset-android'>Android</div>


> **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

```kotlin
@Composable
public fun PositionIndicator(
    scalingLazyListState: androidx.wear.compose.material.ScalingLazyListState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false,
): Unit
```


#### Parameters

| | |
| --- | --- |
| scalingLazyListState | the `ScalingLazyListState` to use as the basis for the PositionIndicatorState. |
| modifier | The modifier to be applied to the component |
| reverseDirection | Reverses direction of PositionIndicator if true |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public 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,
): Unit
```


#### Parameters

| | |
| --- | --- |
| lazyListState | the `LazyListState` to use as the basis for the PositionIndicatorState. |
| modifier | The modifier to be applied to the component |
| reverseDirection | Reverses 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. |




<div class='sourceset sourceset-android'>Android</div>


> **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.

```kotlin
@Composable
public fun PositionIndicator(
    lazyListState: LazyListState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false,
): Unit
```


#### Parameters

| | |
| --- | --- |
| lazyListState | the `LazyListState` to use as the basis for the PositionIndicatorState. |
| modifier | The modifier to be applied to the component |
| reverseDirection | Reverses direction of PositionIndicator if true |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public 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,
): Unit
```


#### Parameters

| | |
| --- | --- |
| value | Value 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. |
| range | range of values that `value` can take |
| modifier | Modifier to be applied to the component |
| color | Color to draw the indicator on. |
| reverseDirection | Reverses direction of PositionIndicator if true |
| position | indicates 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. |




<div class='sourceset sourceset-android'>Android</div>


> **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.

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


#### Parameters

| | |
| --- | --- |
| value | Value 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. |
| range | range of values that `value` can take |
| modifier | Modifier to be applied to the component |
| color | Color to draw the indicator on. |
| reverseDirection | Reverses direction of PositionIndicator if true |
| position | indicates where to put the PositionIndicator in the screen, default is `PositionIndicatorPosition#OppositeRsb` |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public 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

| | |
| --- | --- |
| state | the `PositionIndicatorState` of the state we are displaying. |
| indicatorHeight | the height of the position indicator in Dp. |
| indicatorWidth | the width of the position indicator in Dp. |
| paddingHorizontal | the padding to apply between the indicator and the border of the screen. |
| modifier | The modifier to be applied to the component. |
| background | the color to draw the non-active part of the position indicator. |
| color | the color to draw the active part of the indicator in. |
| reverseDirection | Reverses direction of PositionIndicator if true. |
| position | indicates 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. |




<div class='sourceset sourceset-android'>Android</div>


> **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.

```kotlin
@Composable
public 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

| | |
| --- | --- |
| state | the `PositionIndicatorState` of the state we are displaying. |
| indicatorHeight | the height of the position indicator in Dp. |
| indicatorWidth | the width of the position indicator in Dp. |
| paddingHorizontal | the padding to apply between the indicator and the border of the screen. |
| modifier | The modifier to be applied to the component. |
| background | the color to draw the non-active part of the position indicator. |
| color | the color to draw the active part of the indicator in. |
| reverseDirection | Reverses direction of PositionIndicator if true. |
| position | indicates where to put the PositionIndicator on the screen, default is `PositionIndicatorPosition#End` |