---
title: "LayoutAwareModifierNode"
description: "A [androidx.compose.ui.Modifier.Node] which receives various callbacks in response to local
changes in layout.

This is the [androidx.compose.ui.Modifier.Node] equivalent of
[androidx.compose.ui.layout.OnRemeasuredModifier] and
[androidx.compose.ui.layout.OnPlacedModifier]"
type: "interface"
---

<div class='type'>Interface</div>


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

<div class='sourceset sourceset-common'>Common</div>



```kotlin
interface LayoutAwareModifierNode : MeasuredSizeAwareModifierNode, DelegatableNode
```


A `androidx.compose.ui.Modifier.Node` which receives various callbacks in response to local
changes in layout.

This is the `androidx.compose.ui.Modifier.Node` equivalent of
`androidx.compose.ui.layout.OnRemeasuredModifier` and
`androidx.compose.ui.layout.OnPlacedModifier`


## Functions

```kotlin
fun onPlaced(coordinates: LayoutCoordinates)
```


`onPlaced` is called after the parent `LayoutModifier` and parent layout has been placed and
before child `LayoutModifier` is placed. This allows child `LayoutModifier` to adjust its own
placement based on where the parent is.

If you only need to access the current `LayoutCoordinates` at a single point in time from
outside this method, use `requireLayoutCoordinates`.


```kotlin
override fun onRemeasured(size: IntSize)
```


This method is called when the layout content is remeasured. The most common usage is
`onSizeChanged`.



## Code Examples

### LayoutAwareModifierNodeSample
```kotlin
@Composable
fun LayoutAwareModifierNodeSample() {
    class SizeLoggerNode(var id: String) : LayoutAwareModifierNode, Modifier.Node() {
        override fun onRemeasured(size: IntSize) {
            println("The size of $id was $size")
        }
    }
    data class LogSizeElement(val id: String) : ModifierNodeElement<SizeLoggerNode>() {
        override fun create(): SizeLoggerNode = SizeLoggerNode(id)
        override fun update(node: SizeLoggerNode) {
            node.id = id
        }
        override fun InspectorInfo.inspectableProperties() {
            name = "logSize"
            properties["id"] = id
        }
    }
    fun Modifier.logSize(id: String) = this then LogSizeElement(id)
}
```

### OnPlaced
```kotlin
@Composable
fun OnPlaced() {
    fun Modifier.animatePlacement(): Modifier = composed {
        val scope = rememberCoroutineScope()
        var targetOffset by remember { mutableStateOf(IntOffset.Zero) }
        var animatable by remember {
            mutableStateOf<Animatable<IntOffset, AnimationVector2D>?>(null)
        }
        this.onPlaced {
                // Calculate the position in the parent layout
                targetOffset = it.positionInParent().round()
            }
            .offset {
                // Animate to the new target offset when alignment changes.
                val anim =
                    animatable
                        ?: Animatable(targetOffset, IntOffset.VectorConverter).also {
                            animatable = it
                        }
                if (anim.targetValue != targetOffset) {
                    scope.launch {
                        anim.animateTo(targetOffset, spring(stiffness = StiffnessMediumLow))
                    }
                }
                // Offset the child in the opposite direction to the targetOffset, and slowly catch
                // up to zero offset via an animation to achieve an overall animated movement.
                animatable?.let { it.value - targetOffset } ?: IntOffset.Zero
            }
    }
    @Composable
    fun AnimatedChildAlignment(alignment: Alignment) {
        Box(Modifier.fillMaxSize().padding(4.dp).border(1.dp, Color.Red)) {
            Box(
                modifier =
                    Modifier.animatePlacement().align(alignment).size(100.dp).background(Color.Red)
            )
        }
    }
}
```

### OnSizeChangedSample
```kotlin
@Composable
fun OnSizeChangedSample(name: String) {
    // Use onSizeChanged() for diagnostics. Use Layout or SubcomposeLayout if you want
    // to use the size of one component to affect the size of another component.
    Text(
        "Hello $name",
        Modifier.onSizeChanged { size -> println("The size of the Text in pixels is $size") },
    )
}
```