# OnPlacedModifier

Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/layout/OnPlacedModifier.kt+class:androidx.compose.ui.layout.OnPlacedModifier) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.1.0) Common/AllAndroid/JVM
- Cmn

  ```
  interface OnPlacedModifier : Modifier.Element
  ```

*** ** * ** ***

A modifier whose `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnPlacedModifier#onPlaced(androidx.compose.ui.layout.LayoutCoordinates)` is called after the parent `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` and parent layout has been placed and before child `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` is placed. This allows child `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` to adjust its own placement based on where the parent is.

```kotlin
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.AnimationVector2D
import androidx.compose.animation.core.Spring.StiffnessMediumLow
import androidx.compose.animation.core.VectorConverter
import androidx.compose.animation.core.spring
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.onPlaced
import androidx.compose.ui.layout.positionInParent
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round

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)
        )
    }
}
```

## Summary

| ### Public functions |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnPlacedModifier#onPlaced(androidx.compose.ui.layout.LayoutCoordinates)(coordinates: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates)` `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnPlacedModifier#onPlaced(androidx.compose.ui.layout.LayoutCoordinates)` is called after parent `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` and parent layout gets placed and before any child `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` is placed. | Cmn |

| ### Inherited functions |
|---|
| From [androidx.compose.ui.Modifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier) |---|---|---| | `open infix https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#then(androidx.compose.ui.Modifier)(other: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier)` Concatenates this modifier with another. | Cmn | |
| From [androidx.compose.ui.Modifier.Element](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element) |---|---|---| | `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element#all(kotlin.Function1)(predicate: (https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` Returns `true` if `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#all(kotlin.Function1)` returns true for all `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`s in this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` or if this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` contains no `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`s. | Cmn | | `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element#any(kotlin.Function1)(predicate: (https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` Returns `true` if `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#any(kotlin.Function1)` returns true for any `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` in this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier`. | Cmn | | `open R` | `<R : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element#foldIn(kotlin.Any,kotlin.Function2)(initial: R, operation: (https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element, R) -> R)` Accumulates a value starting with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)` and applying `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)` to the current value and each element from outside in. | Cmn | | `open R` | `<R : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element#foldOut(kotlin.Any,kotlin.Function2)(initial: R, operation: (https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element, R) -> R)` Accumulates a value starting with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)` and applying `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)` to the current value and each element from inside out. | Cmn | |

## Public functions

### onPlaced

Cmn Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.1.0)

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

`https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnPlacedModifier#onPlaced(androidx.compose.ui.layout.LayoutCoordinates)` is called after parent `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` and parent layout gets placed and before any child `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` is placed.

`https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnPlacedModifier#onPlaced(androidx.compose.ui.layout.LayoutCoordinates)` provides `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnPlacedModifier`. Placement in both parent `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` and parent layout can be calculated using the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates`.