---
title: "TransformingLazyColumn"
description: "The vertically scrolling list that only composes and lays out the currently visible items."
type: "component"
---
## API Reference

### TransformingLazyColumn

> Source set: 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(),
    firstLayoutItemProvider: TransformingLazyColumnFirstLayoutItemProvider? = null,
    content: TransformingLazyColumnScope.() -> Unit,
)
```

#### 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](/jetpack-compose/androidx.compose.ui/ui/interfaces/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](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/TransformingLazyColumnItemScope), 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](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/TransformingLazyColumnItemScope). 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](/jetpack-compose/androidx.compose.ui/ui-test/properties/top), [Arrangement.Center](/jetpack-compose/androidx.compose.ui/ui-geometry/properties/center) and [Arrangement.Bottom](/jetpack-compose/androidx.compose.ui/ui-test/properties/bottom) arrangements (including their spacedBy variants, i.e., using spacedBy with [Alignment.Top](/jetpack-compose/androidx.compose.ui/ui-test/properties/top), `Alignment.CenterVertically` and [Alignment.Bottom](/jetpack-compose/androidx.compose.ui/ui-test/properties/bottom)) are supported, The default is [Arrangement.Top](/jetpack-compose/androidx.compose.ui/ui-test/properties/top) when `reverseLayout` is false and [Arrangement.Bottom](/jetpack-compose/androidx.compose.ui/ui-test/properties/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](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/TransformingLazyColumnDefaults). Note that when configuring fling or snap behavior, this flingBehavior parameter and the [rotaryScrollableBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/RotaryScrollableBehavior) parameter that controls rotary scroll are expected to produce similar list scrolling. For example, if [rotaryScrollableBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/RotaryScrollableBehavior) is set for snap (using [RotaryScrollableDefaults.snapBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/RotaryScrollableDefaults)), [flingBehavior](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/FlingBehavior) should be set for snap as well (using [TransformingLazyColumnDefaults.snapFlingBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/TransformingLazyColumnDefaults)) |
| 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](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/RotaryScrollableDefaults) and snap [RotaryScrollableDefaults.snapBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/RotaryScrollableDefaults). Note that when configuring fling or snap behavior, this rotaryBehavior parameter and the [flingBehavior](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/FlingBehavior) parameter that controls touch scroll are expected to produce similar list scrolling. For example, if [rotaryScrollableBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/RotaryScrollableBehavior) is set for snap (using [RotaryScrollableDefaults.snapBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/RotaryScrollableDefaults)), [flingBehavior](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/FlingBehavior) should be set for snap as well (using [TransformingLazyColumnDefaults.snapFlingBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/TransformingLazyColumnDefaults)). Can be null if rotary support is not required or when it should be handled externally - with a separate [Modifier.rotaryScrollable](/jetpack-compose/androidx.wear.compose/compose-foundation/modifiers/rotaryScrollable) modifier. |
| overscrollEffect | the [OverscrollEffect](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/OverscrollEffect) that will be used to render overscroll for this layout. Note that the [OverscrollEffect.node](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/OverscrollEffect) will be applied internally as well - you do not need to use Modifier.overscroll separately. |
| firstLayoutItemProvider | Optional provider to customize the first layout item. When specified, this provider defines the item and its edge used as the initial placement reference, overriding the default behavior of starting layout from the item closest to the center of the viewport. Useful for controlling the direction of content shifting when items are dynamically updated. |
| content | The content of the list. |

### TransformingLazyColumn

> Source set: Android

```kotlin
@Deprecated(
    "This overload is deprecated. Please use the new overload with the firstLayoutItemProvider parameter.",
    level = DeprecationLevel.HIDDEN,
)
@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,
)
```

#### 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](/jetpack-compose/androidx.compose.ui/ui/interfaces/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](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/TransformingLazyColumnItemScope), 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](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/TransformingLazyColumnItemScope). 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](/jetpack-compose/androidx.compose.ui/ui-test/properties/top), [Arrangement.Center](/jetpack-compose/androidx.compose.ui/ui-geometry/properties/center) and [Arrangement.Bottom](/jetpack-compose/androidx.compose.ui/ui-test/properties/bottom) arrangements (including their spacedBy variants, i.e., using spacedBy with [Alignment.Top](/jetpack-compose/androidx.compose.ui/ui-test/properties/top), `Alignment.CenterVertically` and [Alignment.Bottom](/jetpack-compose/androidx.compose.ui/ui-test/properties/bottom)) are supported, The default is [Arrangement.Top](/jetpack-compose/androidx.compose.ui/ui-test/properties/top) when `reverseLayout` is false and [Arrangement.Bottom](/jetpack-compose/androidx.compose.ui/ui-test/properties/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](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/TransformingLazyColumnDefaults). Note that when configuring fling or snap behavior, this flingBehavior parameter and the [rotaryScrollableBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/RotaryScrollableBehavior) parameter that controls rotary scroll are expected to produce similar list scrolling. For example, if [rotaryScrollableBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/RotaryScrollableBehavior) is set for snap (using [RotaryScrollableDefaults.snapBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/RotaryScrollableDefaults)), [flingBehavior](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/FlingBehavior) should be set for snap as well (using [TransformingLazyColumnDefaults.snapFlingBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/TransformingLazyColumnDefaults)) |
| 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](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/RotaryScrollableDefaults) and snap [RotaryScrollableDefaults.snapBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/RotaryScrollableDefaults). Note that when configuring fling or snap behavior, this rotaryBehavior parameter and the [flingBehavior](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/FlingBehavior) parameter that controls touch scroll are expected to produce similar list scrolling. For example, if [rotaryScrollableBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/RotaryScrollableBehavior) is set for snap (using [RotaryScrollableDefaults.snapBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/RotaryScrollableDefaults)), [flingBehavior](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/FlingBehavior) should be set for snap as well (using [TransformingLazyColumnDefaults.snapFlingBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/TransformingLazyColumnDefaults)). Can be null if rotary support is not required or when it should be handled externally - with a separate [Modifier.rotaryScrollable](/jetpack-compose/androidx.wear.compose/compose-foundation/modifiers/rotaryScrollable) modifier. |
| overscrollEffect | the [OverscrollEffect](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/OverscrollEffect) that will be used to render overscroll for this layout. Note that the [OverscrollEffect.node](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/OverscrollEffect) will be applied internally as well - you do not need to use Modifier.overscroll separately. |
| content | The content of the list. |

### TransformingLazyColumn

> Source set: Android

```kotlin
@Deprecated(
    "This overload is deprecated. Please use the new overload with the firstLayoutItemProvider parameter.",
    level = DeprecationLevel.HIDDEN,
)
@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,
)
```

#### 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](/jetpack-compose/androidx.compose.ui/ui/interfaces/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](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/TransformingLazyColumnItemScope), 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](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/TransformingLazyColumnItemScope). 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](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/TransformingLazyColumnDefaults). Note that when configuring fling or snap behavior, this flingBehavior parameter and the [rotaryScrollableBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/RotaryScrollableBehavior) parameter that controls rotary scroll are expected to produce similar list scrolling. For example, if [rotaryScrollableBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/RotaryScrollableBehavior) is set for snap (using [RotaryScrollableDefaults.snapBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/RotaryScrollableDefaults)), [flingBehavior](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/FlingBehavior) should be set for snap as well (using [TransformingLazyColumnDefaults.snapFlingBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/TransformingLazyColumnDefaults)) |
| 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](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/RotaryScrollableDefaults) and snap [RotaryScrollableDefaults.snapBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/RotaryScrollableDefaults). Note that when configuring fling or snap behavior, this rotaryBehavior parameter and the [flingBehavior](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/FlingBehavior) parameter that controls touch scroll are expected to produce similar list scrolling. For example, if [rotaryScrollableBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/RotaryScrollableBehavior) is set for snap (using [RotaryScrollableDefaults.snapBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/RotaryScrollableDefaults)), [flingBehavior](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/FlingBehavior) should be set for snap as well (using [TransformingLazyColumnDefaults.snapFlingBehavior](/jetpack-compose/androidx.wear.compose/compose-foundation/objects/TransformingLazyColumnDefaults)). Can be null if rotary support is not required or when it should be handled externally - with a separate [Modifier.rotaryScrollable](/jetpack-compose/androidx.wear.compose/compose-foundation/modifiers/rotaryScrollable) modifier. |
| overscrollEffect | the [OverscrollEffect](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/OverscrollEffect) that will be used to render overscroll for this layout. Note that the [OverscrollEffect.node](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/OverscrollEffect) 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
@Sampled
@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
@Sampled
@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")
            }
        }
    }
}
```

### TransformingLazyColumnPinnableContainerSample

```kotlin
@Sampled
@Preview
@Composable
fun TransformingLazyColumnPinnableContainerSample() {
    val state = rememberTransformingLazyColumnState()
    val transformationSpec = rememberTransformationSpec()

    TransformingLazyColumn(state = state, contentPadding = PaddingValues(horizontal = 20.dp)) {
        items(count = 20) { index ->
            var isPinned by remember { mutableStateOf(false) }
            var pinHandle by remember { mutableStateOf<PinnableContainer.PinnedHandle?>(null) }
            val pinnableContainer = LocalPinnableContainer.current

            // This state will be reset if the item is scrolled out and not pinned
            var counter by remember { mutableIntStateOf(0) }

            TitleCard(
                onClick = { counter++ },
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                title = { Text("Item $index") },
                subtitle = { Text("Count: $counter (Tap card to +)") },
                content = {
                    // This button toggles the pin state
                    Button(
                        onClick = {
                            if (isPinned) {
                                pinHandle?.release().also { pinHandle = null }
                                isPinned = false
                            } else {
                                pinHandle = pinnableContainer?.pin()
                                isPinned = true
                            }
                        },
                        colors =
                            if (isPinned) {
                                ButtonDefaults.buttonColors()
                            } else {
                                ButtonDefaults.filledTonalButtonColors()
                            },
                    ) {
                        Text(if (isPinned) "Unpin" else "Pin Off-screen")
                    }
                },
            )
        }
    }
}
```