---
title: "TransformingLazyColumn"
description: "The vertically scrolling list that only composes and lays out the currently visible items. This
is a wear specific version of LazyColumn that adds support for scaling and morphing animations.
Example of a [TransformingLazyColumn] with default parameters:
Example of a [TransformingLazyColumn] that snaps items to the center of the viewport:"
type: "composable"
---
Composable Function
Android
```kotlin
@Composable
public fun TransformingLazyColumn(
modifier: Modifier = Modifier,
state: TransformingLazyColumnState = rememberTransformingLazyColumnState(),
contentPadding: PaddingValues = PaddingValues(),
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,
rotaryScrollableBehavior: RotaryScrollableBehavior? = RotaryScrollableDefaults.behavior(state),
overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
content: TransformingLazyColumnScope.() -> Unit,
)
```
The vertically scrolling list that only composes and lays out the currently visible items. This
is a wear specific version of LazyColumn that adds support for scaling and morphing animations.
Example of a `TransformingLazyColumn` with default parameters:
Example of a `TransformingLazyColumn` that snaps items to the center of the viewport:
#### Parameters
| | |
| --- | --- |
| modifier | The modifier to be applied to the layout. |
| state | The state object to be used to control the list and the applied layout. |
| contentPadding | The padding around the whole content. This will add padding for the content after it has been clipped, which is not possible via `modifier` param. You can use it to add padding before the first item or after the last one. Note that if the first or last item uses `androidx.wear.compose.foundation.lazy.TransformingLazyColumnItemScope.minimumVerticalContentPadding`, the effective vertical padding at that edge will be the maximum of the value provided here and the value calculated by `androidx.wear.compose.foundation.lazy.TransformingLazyColumnItemScope.minimumVerticalContentPadding`. This allows enforcing a minimum padding (e.g. for global screen insets) while still allowing specific items to request larger padding at the screen edge for specific items. |
| 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 items, to be used when there is enough space to show all the items. Note that only `Arrangement.Top`, `Arrangement.Center` and `Arrangement.Bottom` arrangements (including their spacedBy variants, i.e., using spacedBy with `Alignment.Top`, `Alignment.CenterVertically` and `Alignment.Bottom`) are supported, The default is `Arrangement.Top` when `reverseLayout` is false and `Arrangement.Bottom` when `reverseLayout` is true. |
| horizontalAlignment | The horizontal alignment of the items. |
| flingBehavior | Logic describing fling behavior for touch scroll. If snapping is required use `TransformingLazyColumnDefaults.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 `TransformingLazyColumnDefaults.snapFlingBehavior`) |
| userScrollEnabled | Whether the user should be able to scroll the list. This also affects scrolling with rotary. |
| 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 `TransformingLazyColumnDefaults.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 list. |
Android
> **Deprecated** This overload is deprecated. Please use the new overload with the reverseLayout parameter.
```kotlin
@Composable
public fun TransformingLazyColumn(
modifier: Modifier = Modifier,
state: TransformingLazyColumnState = rememberTransformingLazyColumnState(),
contentPadding: PaddingValues = PaddingValues(),
verticalArrangement: Arrangement.Vertical =
Arrangement.spacedBy(space = 4.dp, alignment = Alignment.Top),
horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
rotaryScrollableBehavior: RotaryScrollableBehavior? = RotaryScrollableDefaults.behavior(state),
overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
content: TransformingLazyColumnScope.() -> Unit,
)
```
The vertically scrolling list that only composes and lays out the currently visible items. This
is a wear specific version of LazyColumn that adds support for scaling and morphing animations.
Example of a `TransformingLazyColumn` with default parameters:
Example of a `TransformingLazyColumn` that snaps items to the center of the viewport:
#### Parameters
| | |
| --- | --- |
| modifier | The modifier to be applied to the layout. |
| state | The state object to be used to control the list and the applied layout. |
| contentPadding | The padding around the whole content. This will add padding for the content after it has been clipped, which is not possible via `modifier` param. You can use it to add padding before the first item or after the last one. Note that if the first or last item uses `androidx.wear.compose.foundation.lazy.TransformingLazyColumnItemScope.minimumVerticalContentPadding`, the effective vertical padding at that edge will be the maximum of the value provided here and the value calculated by `androidx.wear.compose.foundation.lazy.TransformingLazyColumnItemScope.minimumVerticalContentPadding`. This allows enforcing a minimum padding (e.g. for global screen insets) while still allowing specific items to request larger padding at the screen edge for specific items. |
| verticalArrangement | The vertical arrangement of the items. |
| horizontalAlignment | The horizontal alignment of the items. |
| flingBehavior | Logic describing fling behavior for touch scroll. If snapping is required use `TransformingLazyColumnDefaults.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 `TransformingLazyColumnDefaults.snapFlingBehavior`) |
| userScrollEnabled | Whether the user should be able to scroll the list. This also affects scrolling with rotary. |
| 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 `TransformingLazyColumnDefaults.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 list. |
## Code Examples
### SimpleTransformingLazyColumnSample
```kotlin
@Preview
@Composable
fun SimpleTransformingLazyColumnSample() {
val transformationSpec = rememberTransformationSpec()
TransformingLazyColumn(contentPadding = PaddingValues(20.dp)) {
items(count = 10) { index ->
Button(
modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
transformation = SurfaceTransformation(transformationSpec),
onClick = {},
) {
Text(text = "Item $index")
}
}
}
}
```
### TransformingLazyColumnWithSnapSample
```kotlin
@Preview
@Composable
fun TransformingLazyColumnWithSnapSample() {
val transformationSpec = rememberTransformationSpec()
val state = rememberTransformingLazyColumnState()
TransformingLazyColumn(
rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(scrollableState = state),
flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(state = state),
modifier = Modifier.fillMaxWidth(),
state = state,
contentPadding = PaddingValues(20.dp),
) {
items(count = 20) { index ->
Button(
modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
transformation = SurfaceTransformation(transformationSpec),
onClick = {},
) {
Text(text = "Item $index")
}
}
}
}
```