---
title: "TransformingLazyColumnFirstLayoutItemProvider"
description: "Provides the first item to layout for TransformingLazyColumn."
type: "interface"
lastmod: "2026-07-02T02:32:45.331757Z"
---
## API Reference

> Source set: Android

```kotlin
public fun interface TransformingLazyColumnFirstLayoutItemProvider
```

Provides the first item to layout for [TransformingLazyColumn](/jetpack-compose/androidx.wear.compose/compose-foundation/composable-functions/TransformingLazyColumn).

During a measurement pass, [TransformingLazyColumn](/jetpack-compose/androidx.wear.compose/compose-foundation/composable-functions/TransformingLazyColumn) uses the item returned by this provider as
the initial placement reference. [TransformingLazyColumn](/jetpack-compose/androidx.wear.compose/compose-foundation/composable-functions/TransformingLazyColumn) measures this item and places its
requested [ItemInfo.itemEdge](/jetpack-compose/androidx.wear.compose/compose-foundation/classes/TransformingLazyColumnFirstLayoutItemProvider.ItemInfo) visual edge at the exact screen coordinate defined by
[ItemInfo.offset](/jetpack-compose/androidx.wear.compose/compose-foundation/classes/TransformingLazyColumnFirstLayoutItemProvider.ItemInfo), prior to accounting for active scroll deltas. Once this initial item is
positioned, all other visible items are sequentially composed and placed above and below it.

Providing this interface allows controlling how the list places its children during content
updates like additions, removals, or item size changes.

## Functions

### getFirstLayoutItem

```kotlin
public fun getFirstLayoutItem(centerItem: ItemInfo): ItemInfo
```

Returns the [ItemInfo](/jetpack-compose/androidx.wear.compose/compose-foundation/classes/TransformingLazyColumnFirstLayoutItemProvider.ItemInfo) for the first item to layout in [TransformingLazyColumn](/jetpack-compose/androidx.wear.compose/compose-foundation/composable-functions/TransformingLazyColumn).

Note: This method is executed internally inside a `Snapshot.withoutReadObservation` block.
Any Compose state reads performed inside this callback will not trigger layout observation.

If the returned [ItemInfo](/jetpack-compose/androidx.wear.compose/compose-foundation/classes/TransformingLazyColumnFirstLayoutItemProvider.ItemInfo) cannot be fully resolved (e.g., the key is not found or the index
is out of bounds), [TransformingLazyColumn](/jetpack-compose/androidx.wear.compose/compose-foundation/composable-functions/TransformingLazyColumn) falls back:
- If the [ItemInfo.key](/jetpack-compose/androidx.wear.compose/compose-foundation/classes/TransformingLazyColumnFirstLayoutItemProvider.ItemInfo) is not found, it falls back to the [ItemInfo.index](/jetpack-compose/androidx.wear.compose/compose-foundation/classes/TransformingLazyColumnFirstLayoutItemProvider.ItemInfo).
- The final resolved index is coerced to stay within the valid list bounds.

#### Parameters

| | |
| --- | --- |
| centerItem | The [ItemInfo](/jetpack-compose/androidx.wear.compose/compose-foundation/classes/TransformingLazyColumnFirstLayoutItemProvider.ItemInfo) that [TransformingLazyColumn](/jetpack-compose/androidx.wear.compose/compose-foundation/composable-functions/TransformingLazyColumn) would currently use for the first layout item if no provider is supplied. Returning this item preserves the default layout behavior. In most cases, this is the item closest to the center of the viewport from [TransformingLazyColumnLayoutInfo.visibleItems](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/TransformingLazyColumnLayoutInfo). |

#### Returns

| | |
| --- | --- |
|  | The [ItemInfo](/jetpack-compose/androidx.wear.compose/compose-foundation/classes/TransformingLazyColumnFirstLayoutItemProvider.ItemInfo) of the item to use as the first item to layout. |

## Code Examples

### TransformingLazyColumnFirstLayoutItemProviderSample
```kotlin
@Preview
@Composable
fun TransformingLazyColumnFirstLayoutItemProviderSample() {
    val state = rememberTransformingLazyColumnState()
    val transformationSpec = rememberTransformationSpec()
    var expandedItemIndex by remember { mutableIntStateOf(-1) }
    // This sample demonstrates how to use the provider API to control the direction of content
    // shifting. By default, TransformingLazyColumn uses the center item as the layout reference.
    // This means that if an item above the center expands, it pushes content upwards;
    // if below, it pushes downwards.
    //
    // Here, we fix the Bottom/End edge of the clicked item regardless of its position on screen,
    // so that when its animated content appears, the card predictably expands *upwards* every time.
    val upwardExpandingItemProvider =
        remember(state) {
            TransformingLazyColumnFirstLayoutItemProvider { centerItem ->
                val item = expandedItemIndex
                // Yield to the standard layout behavior during active scrolls.
                // This avoids custom layout overhead and ensures the [TransformingLazyColumn]
                // tracks the user's scroll gesture using its default center layout reference.
                if (item == -1 || state.isScrollInProgress) {
                    return@TransformingLazyColumnFirstLayoutItemProvider centerItem
                }
                // Look up the item's offset from state.layoutInfo (which holds the details
                // from the previous measure pass) to maintain its visual position in the current
                // pass.
                state.layoutInfo.visibleItems
                    .fastFirstOrNull { visibleItem -> visibleItem.index == item }
                    ?.let { visibleItem ->
                        TransformingLazyColumnFirstLayoutItemProvider.ItemInfo(
                            key = visibleItem.key,
                            index = visibleItem.index,
                            // Pin the bottom edge of the item
                            itemEdge = ItemEdge.End,
                            // Calculate the exact bottom offset from the previous pass
                            offset = visibleItem.offset + visibleItem.transformedHeight,
                        )
                    } ?: centerItem
            }
        }
    TransformingLazyColumn(
        state = state,
        contentPadding = PaddingValues(horizontal = 20.dp),
        firstLayoutItemProvider = upwardExpandingItemProvider,
    ) {
        items(count = 10, key = { it }) { cardIndex ->
            val isExpanded = expandedItemIndex == cardIndex
            TitleCard(
                onClick = { expandedItemIndex = cardIndex },
                modifier =
                    Modifier.minimumVerticalContentPadding(
                            CardDefaults.minimumVerticalListContentPadding
                        )
                        .fillMaxWidth()
                        .transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                title = { Text("Card $cardIndex") },
                subtitle = {
                    AnimatedVisibility(isExpanded) { Text("Expanded content is available here") }
                },
                content = { Text("Tap to expand") },
            )
        }
    }
}
```