---
title: "ScalingLazyColumn"
description: "A scrolling scaling/fisheye list component that forms a key part of the Wear Material Design
language. Provides scaling and transparency effects to the content items.
[ScalingLazyColumn] is designed to be able to handle potentially large numbers of content items.
Content items are only materialized and composed when needed.
If scaling/fisheye functionality is not required then a [LazyColumn] should be considered instead
to avoid any overhead of measuring and calculating scaling and transparency effects for the
content items.
This overload supports rotary input. Rotary input allows users to scroll the content of the
[ScalingLazyColumn] - by using a crown or a rotating bezel on their Wear OS device. If you want
to modify its behavior please use another ScalingLazyColumn overload with rotaryBehavior
parameter.
Example of a [ScalingLazyColumn] with default parameters:
Example of a [ScalingLazyColumn] using [ScalingLazyListAnchorType.ItemStart] anchoring, in this
configuration the edge of list items is aligned to the center of the screen. Also this example
shows scrolling to a clicked list item with [ScalingLazyListState.animateScrollToItem]:
Example of a [ScalingLazyColumn] with snap of items to the viewport center:
Example of a [ScalingLazyColumn] where [autoCentering] has been disabled and explicit
[contentPadding] provided to ensure there is space above the first and below the last list item
to allow them to be scrolled into view on circular screens:
For more information, see the
[Lists](https://developer.android.com/training/wearables/components/lists) guide."
type: "composable"
---
Composable Function
Android
> **Deprecated** Please use the new overload with additional rotaryBehavior parameter
```kotlin
@Composable
public fun ScalingLazyColumn(
modifier: Modifier = Modifier,
state: ScalingLazyListState = rememberScalingLazyListState(),
contentPadding: PaddingValues = PaddingValues(horizontal = 10.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical =
Arrangement.spacedBy(
space = 4.dp,
alignment = if (!reverseLayout) Alignment.Top else Alignment.Bottom,
),
horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
scalingParams: ScalingParams = ScalingLazyColumnDefaults.scalingParams(),
anchorType: ScalingLazyListAnchorType = ScalingLazyListAnchorType.ItemCenter,
autoCentering: AutoCenteringParams? = AutoCenteringParams(),
content: ScalingLazyListScope.() -> Unit,
)
```
A scrolling scaling/fisheye list component that forms a key part of the Wear Material Design
language. Provides scaling and transparency effects to the content items.
`ScalingLazyColumn` is designed to be able to handle potentially large numbers of content items.
Content items are only materialized and composed when needed.
If scaling/fisheye functionality is not required then a `LazyColumn` should be considered instead
to avoid any overhead of measuring and calculating scaling and transparency effects for the
content items.
This overload supports rotary input. Rotary input allows users to scroll the content of the
`ScalingLazyColumn` - by using a crown or a rotating bezel on their Wear OS device. If you want
to modify its behavior please use another ScalingLazyColumn overload with rotaryBehavior
parameter.
Example of a `ScalingLazyColumn` with default parameters:
Example of a `ScalingLazyColumn` using `ScalingLazyListAnchorType.ItemStart` anchoring, in this
configuration the edge of list items is aligned to the center of the screen. Also this example
shows scrolling to a clicked list item with `ScalingLazyListState.animateScrollToItem`:
Example of a `ScalingLazyColumn` with snap of items to the viewport center:
Example of a `ScalingLazyColumn` where `autoCentering` has been disabled and explicit
`contentPadding` provided to ensure there is space above the first and below the last list item
to allow them to be scrolled into view on circular screens:
For more information, see the
`Lists`(https://developer.android.com/training/wearables/components/lists) guide.
#### Parameters
| | |
| --- | --- |
| modifier | The modifier to be applied to the component |
| state | The state of the component |
| contentPadding | The padding to apply around the contents |
| reverseLayout | reverse the direction of scrolling and layout, when `true` items will be composed from the bottom to the top |
| verticalArrangement | The vertical arrangement of the layout's children. This allows us to add spacing between items and specify the arrangement of the items when we have not enough of them to fill the whole minimum size |
| horizontalAlignment | the horizontal alignment applied to the items |
| flingBehavior | Logic describing fling behavior. If snapping is required use `ScalingLazyColumnDefaults.snapFlingBehavior`. |
| userScrollEnabled | whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using the state even when it is disabled. |
| scalingParams | The parameters to configure the scaling and transparency effects for the component |
| anchorType | How to anchor list items to the center-line of the viewport |
| autoCentering | AutoCenteringParams parameter to control whether space/padding should be automatically added to make sure that list items can be scrolled into the center of the viewport (based on their `anchorType`). If non-null then space will be added before the first list item, if needed, to ensure that items with indexes greater than or equal to the itemIndex (offset by itemOffset pixels) will be able to be scrolled to the center of the viewport. Similarly space will be added at the end of the list to ensure that items can be scrolled up to the center. If null no automatic space will be added and instead the developer can use `contentPadding` to manually arrange the items. |
| content | The content of the `ScalingLazyColumn` |
Android
> **Deprecated** Please use the new overload with additional overscrollEffect parameter
```kotlin
@Composable
public fun ScalingLazyColumn(
modifier: Modifier = Modifier,
state: ScalingLazyListState = rememberScalingLazyListState(),
contentPadding: PaddingValues = PaddingValues(horizontal = 10.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical =
Arrangement.spacedBy(
space = 4.dp,
alignment = if (!reverseLayout) Alignment.Top else Alignment.Bottom,
),
horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
scalingParams: ScalingParams = ScalingLazyColumnDefaults.scalingParams(),
anchorType: ScalingLazyListAnchorType = ScalingLazyListAnchorType.ItemCenter,
autoCentering: AutoCenteringParams? = AutoCenteringParams(),
rotaryScrollableBehavior: RotaryScrollableBehavior? = RotaryScrollableDefaults.behavior(state),
content: ScalingLazyListScope.() -> Unit,
): Unit
```
A scrolling scaling/fisheye list component that forms a key part of the Wear Material Design
language. Provides scaling and transparency effects to the content items.
`ScalingLazyColumn` is designed to be able to handle potentially large numbers of content items.
Content items are only materialized and composed when needed.
If scaling/fisheye functionality is not required then a `LazyColumn` should be considered instead
to avoid any overhead of measuring and calculating scaling and transparency effects for the
content items.
This overload supports rotary input. Rotary input allows users to scroll the content of the
`ScalingLazyColumn` - by using a crown or a rotating bezel on their Wear OS device. It can be
modified with `rotaryScrollableBehavior` param. If scroll with fling is required use
`RotaryScrollableDefaults.behavior`. If snapping is required use
`RotaryScrollableDefaults.snapBehavior`. Note that rotary scroll and touch scroll should be
aligned. If `rotaryScrollableBehavior` is set for snap (using
`RotaryScrollableDefaults.snapBehavior`), `flingBehavior` should be set for snap as well (using
`ScalingLazyColumnDefaults.snapFlingBehavior`). This composable uses
`requestFocusOnHierarchyActive` to request focus for rotary support. It requires that this
`ScalingLazyColumn` this can be configured by adding `hierarchicalFocusGroup` to the `modifier`
parameter or on an ancestor composable. `hierarchicalFocusGroup` is already used in
`BasicSwipeToDismissBox` (and other components), which is a part of material Scaffold - meaning
that, in most cases, rotary will be able to request focus without any additional changes.
Example of a `ScalingLazyColumn` with default parameters:
Example of a `ScalingLazyColumn` using `ScalingLazyListAnchorType.ItemStart` anchoring, in this
configuration the edge of list items is aligned to the center of the screen. Also this example
shows scrolling to a clicked list item with `ScalingLazyListState.animateScrollToItem`:
Example of a `ScalingLazyColumn` with snap of items to the viewport center:
Example of a `ScalingLazyColumn` where `autoCentering` has been disabled and explicit
`contentPadding` provided to ensure there is space above the first and below the last list item
to allow them to be scrolled into view on circular screens:
For more information, see the
`Lists`(https://developer.android.com/training/wearables/components/lists) guide.
#### Parameters
| | |
| --- | --- |
| modifier | The modifier to be applied to the component |
| state | The state of the component |
| contentPadding | The padding to apply around the contents |
| reverseLayout | reverse the direction of scrolling and layout, when `true` items will be composed from the bottom to the top |
| verticalArrangement | The vertical arrangement of the layout's children. This allows us to add spacing between items and specify the arrangement of the items when we have not enough of them to fill the whole minimum size |
| horizontalAlignment | the horizontal alignment applied to the items |
| flingBehavior | Logic describing fling behavior for touch scroll. If snapping is required use `ScalingLazyColumnDefaults.snapFlingBehavior`. Note that when configuring fling or snap behavior, this flingBehavior parameter and the `rotaryScrollableBehavior` parameter that controls rotary scroll are expected to produce similar list scrolling. For example, if `rotaryScrollableBehavior` is set for snap (using `RotaryScrollableDefaults.snapBehavior`), `flingBehavior` should be set for snap as well (using `ScalingLazyColumnDefaults.snapFlingBehavior`) |
| userScrollEnabled | whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using the state even when it is disabled. |
| scalingParams | The parameters to configure the scaling and transparency effects for the component |
| anchorType | How to anchor list items to the center-line of the viewport |
| autoCentering | AutoCenteringParams parameter to control whether space/padding should be automatically added to make sure that list items can be scrolled into the center of the viewport (based on their `anchorType`). If non-null then space will be added before the first list item, if needed, to ensure that items with indexes greater than or equal to the itemIndex (offset by itemOffset pixels) will be able to be scrolled to the center of the viewport. Similarly space will be added at the end of the list to ensure that items can be scrolled up to the center. If null no automatic space will be added and instead the developer can use `contentPadding` to manually arrange the items. |
| rotaryScrollableBehavior | Parameter for changing rotary scrollable behavior. Supports scroll `RotaryScrollableDefaults.behavior` and snap `RotaryScrollableDefaults.snapBehavior`. Note that when configuring fling or snap behavior, this rotaryBehavior parameter and the `flingBehavior` parameter that controls touch scroll are expected to produce similar list scrolling. For example, if `rotaryScrollableBehavior` is set for snap (using `RotaryScrollableDefaults.snapBehavior`), `flingBehavior` should be set for snap as well (using `ScalingLazyColumnDefaults.snapFlingBehavior`). Can be null if rotary support is not required or when it should be handled externally - with a separate `Modifier.rotaryScrollable` modifier. |
| content | The content of the `ScalingLazyColumn` |
Android
```kotlin
@Composable
public fun ScalingLazyColumn(
modifier: Modifier = Modifier,
state: ScalingLazyListState = rememberScalingLazyListState(),
contentPadding: PaddingValues = PaddingValues(horizontal = 10.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical =
Arrangement.spacedBy(
space = 4.dp,
alignment = if (!reverseLayout) Alignment.Top else Alignment.Bottom,
),
horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
scalingParams: ScalingParams = ScalingLazyColumnDefaults.scalingParams(),
anchorType: ScalingLazyListAnchorType = ScalingLazyListAnchorType.ItemCenter,
autoCentering: AutoCenteringParams? = AutoCenteringParams(),
rotaryScrollableBehavior: RotaryScrollableBehavior? = RotaryScrollableDefaults.behavior(state),
overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
content: ScalingLazyListScope.() -> Unit,
)
```
A scrolling scaling/fisheye list component that forms a key part of the Wear Material Design
language. Provides scaling and transparency effects to the content items.
`ScalingLazyColumn` is designed to be able to handle potentially large numbers of content items.
Content items are only materialized and composed when needed.
If scaling/fisheye functionality is not required then a `LazyColumn` should be considered instead
to avoid any overhead of measuring and calculating scaling and transparency effects for the
content items.
This overload supports rotary input. Rotary input allows users to scroll the content of the
`ScalingLazyColumn` - by using a crown or a rotating bezel on their Wear OS device. It can be
modified with `rotaryScrollableBehavior` param. If scroll with fling is required use
`RotaryScrollableDefaults.behavior`. If snapping is required use
`RotaryScrollableDefaults.snapBehavior`. Note that rotary scroll and touch scroll should be
aligned. If `rotaryScrollableBehavior` is set for snap (using
`RotaryScrollableDefaults.snapBehavior`), `flingBehavior` should be set for snap as well (using
`ScalingLazyColumnDefaults.snapFlingBehavior`). This composable uses
`requestFocusOnHierarchyActive` to request focus for rotary support. It requires that this
`ScalingLazyColumn` this can be configured by adding `hierarchicalFocusGroup` to the `modifier`
parameter or on an ancestor composable. `hierarchicalFocusGroup` is already used in
`BasicSwipeToDismissBox` (and other components), which is a part of material Scaffold - meaning
that, in most cases, rotary will be able to request focus without any additional changes.
Example of a `ScalingLazyColumn` with default parameters:
Example of a `ScalingLazyColumn` using `ScalingLazyListAnchorType.ItemStart` anchoring, in this
configuration the edge of list items is aligned to the center of the screen. Also this example
shows scrolling to a clicked list item with `ScalingLazyListState.animateScrollToItem`:
Example of a `ScalingLazyColumn` with snap of items to the viewport center:
Example of a `ScalingLazyColumn` where `autoCentering` has been disabled and explicit
`contentPadding` provided to ensure there is space above the first and below the last list item
to allow them to be scrolled into view on circular screens:
For more information, see the
`Lists`(https://developer.android.com/training/wearables/components/lists) guide.
#### Parameters
| | |
| --- | --- |
| modifier | The modifier to be applied to the component |
| state | The state of the component |
| contentPadding | The padding to apply around the contents |
| reverseLayout | reverse the direction of scrolling and layout, when `true` items will be composed from the bottom to the top |
| verticalArrangement | The vertical arrangement of the layout's children. This allows us to add spacing between items and specify the arrangement of the items when we have not enough of them to fill the whole minimum size |
| horizontalAlignment | the horizontal alignment applied to the items |
| flingBehavior | Logic describing fling behavior for touch scroll. If snapping is required use `ScalingLazyColumnDefaults.snapFlingBehavior`. Note that when configuring fling or snap behavior, this flingBehavior parameter and the `rotaryScrollableBehavior` parameter that controls rotary scroll are expected to produce similar list scrolling. For example, if `rotaryScrollableBehavior` is set for snap (using `RotaryScrollableDefaults.snapBehavior`), `flingBehavior` should be set for snap as well (using `ScalingLazyColumnDefaults.snapFlingBehavior`) |
| userScrollEnabled | whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using the state even when it is disabled. |
| scalingParams | The parameters to configure the scaling and transparency effects for the component |
| anchorType | How to anchor list items to the center-line of the viewport |
| autoCentering | AutoCenteringParams parameter to control whether space/padding should be automatically added to make sure that list items can be scrolled into the center of the viewport (based on their `anchorType`). If non-null then space will be added before the first list item, if needed, to ensure that items with indexes greater than or equal to the itemIndex (offset by itemOffset pixels) will be able to be scrolled to the center of the viewport. Similarly space will be added at the end of the list to ensure that items can be scrolled up to the center. If null no automatic space will be added and instead the developer can use `contentPadding` to manually arrange the items. |
| rotaryScrollableBehavior | Parameter for changing rotary scrollable behavior. Supports scroll `RotaryScrollableDefaults.behavior` and snap `RotaryScrollableDefaults.snapBehavior`. Note that when configuring fling or snap behavior, this rotaryBehavior parameter and the `flingBehavior` parameter that controls touch scroll are expected to produce similar list scrolling. For example, if `rotaryScrollableBehavior` is set for snap (using `RotaryScrollableDefaults.snapBehavior`), `flingBehavior` should be set for snap as well (using `ScalingLazyColumnDefaults.snapFlingBehavior`). Can be null if rotary support is not required or when it should be handled externally - with a separate `Modifier.rotaryScrollable` modifier. |
| overscrollEffect | the `OverscrollEffect` that will be used to render overscroll for this layout. Note that the `OverscrollEffect.node` will be applied internally as well - you do not need to use Modifier.overscroll separately. |
| content | The content of the `ScalingLazyColumn` |
## Code Examples
### ScalingLazyColumnEdgeAnchoredAndAnimatedScrollTo
```kotlin
@Composable
fun ScalingLazyColumnEdgeAnchoredAndAnimatedScrollTo() {
val coroutineScope = rememberCoroutineScope()
val itemSpacing = 6.dp
// Line up the gap between the items on the center-line
val scrollOffset = with(LocalDensity.current) { -(itemSpacing / 2).roundToPx() }
val state =
rememberScalingLazyListState(
initialCenterItemIndex = 1,
initialCenterItemScrollOffset = scrollOffset,
)
ScalingLazyColumn(
modifier = Modifier.fillMaxWidth(),
anchorType = ScalingLazyListAnchorType.ItemStart,
verticalArrangement = Arrangement.spacedBy(itemSpacing),
state = state,
autoCentering = AutoCenteringParams(itemOffset = scrollOffset),
) {
item { ListHeader { Text(text = "List Header") } }
items(20) {
Chip(
onClick = {
coroutineScope.launch {
// Add +1 to allow for the ListHeader
state.animateScrollToItem(it + 1, scrollOffset)
}
},
label = { Text("List item $it") },
colors = ChipDefaults.secondaryChipColors(),
)
}
}
}
```
### SimpleScalingLazyColumn
```kotlin
@Composable
fun SimpleScalingLazyColumn() {
ScalingLazyColumn(modifier = Modifier.fillMaxWidth()) {
item { ListHeader { Text(text = "List Header") } }
items(20) {
Chip(
onClick = {},
label = { Text("List item $it") },
colors = ChipDefaults.secondaryChipColors(),
)
}
}
}
```
### SimpleScalingLazyColumnWithContentPadding
```kotlin
@Composable
fun SimpleScalingLazyColumnWithContentPadding() {
ScalingLazyColumn(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(top = 20.dp, bottom = 20.dp),
autoCentering = null,
) {
item { ListHeader { Text(text = "List Header") } }
items(20) {
Chip(
onClick = {},
label = { Text("List item $it") },
colors = ChipDefaults.secondaryChipColors(),
)
}
}
}
```
### SimpleScalingLazyColumnWithSnap
```kotlin
@Composable
fun SimpleScalingLazyColumnWithSnap() {
val state = rememberScalingLazyListState()
ScalingLazyColumn(
rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(scrollableState = state),
flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state),
modifier = Modifier.fillMaxWidth(),
state = state,
) {
item { ListHeader { Text(text = "List Header") } }
items(20) {
Chip(
onClick = {},
label = { Text("List item $it") },
colors = ChipDefaults.secondaryChipColors(),
)
}
}
}
```