# SharedTransitionScope.ResizeMode

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

  ```
  sealed interface SharedTransitionScope.ResizeMode
  ```

*** ** * ** ***

There are two different modes to resize child layout of `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` during bounds transform: 1) `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` and 2) `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()`.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` first measures the child layout with the lookahead constraints, similar to `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).skipToLookaheadSize(kotlin.Function0)`. Then the child's stable layout will be scaled to fit in the shared bounds.

In contrast, `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()` will remeasure and relayout the child layout of `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` with animated fixed constraints based on the size of the bounds transform. The re-measurement is triggered by the bounds size change, which could potentially be every frame.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` works best for Texts and bespoke layouts that don't respond well to constraints change. `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()` works best for background, shared images of different aspect ratios, and other layouts that adjust themselves visually nicely and efficiently to size changes.

## Summary

| ### Public companion functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)(contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale, alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment)` `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` as a type of `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode` will measure the child layout with lookahead constraints to obtain the size of the stable layout. | Cmn |

| ### Public companion properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()` In contrast to `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()` is a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode` that remeasures and relayouts its child whenever bounds change during the bounds transform. | Cmn |

## Public companion functions

### scaleToBounds

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

```
fun scaleToBounds(
    contentScale: ContentScale = ContentScale.FillWidth,
    alignment: Alignment = Center
): SharedTransitionScope.ResizeMode
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` as a type of `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode` will measure the child layout with lookahead constraints to obtain the size of the stable layout. This stable layout is the post-animation layout of the child. Then based on the stable size of the child and the animated size of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`, the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode.Companion#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` will be used to calculate a scale for both width and height. The resulting effect is that the child layout does not re-layout during the bounds transform, contrary to `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()` mode. Instead, it will scale the stable layout based on the animated size of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`.

Under the hood, `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` effectively uses `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).skipToLookaheadSize(kotlin.Function0)` for the child layout, measuring the child layout only once at its target lookahead constraints and then scaling it to fit in the parent's constraints. This avoids frame-by-frame remeasurement, making `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` the default and recommended `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode` for maintaining performance during transitions.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` works best for `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` when used to animate shared Text.

`https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale#FillWidth()` is the default value for `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode.Companion#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode.Companion#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` will be used to calculate the placement of the scaled content. It is `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#Center()` by default.

## Public companion properties

### RemeasureToBounds

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

```
val RemeasureToBounds: SharedTransitionScope.ResizeMode
```

In contrast to `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()` is a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode` that remeasures and relayouts its child whenever bounds change during the bounds transform. More specifically, when the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` size changes, it creates fixed constraints based on the animated size, and uses the fixed constraints to remeasure the child. Therefore, the child layout of `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` will likely change its layout to fit in the animated constraints.

**Performance caveat** : `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()` incurs frame-by-frame remeasurement, which can be expensive especially for complex layout trees. Consider using `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` instead (which is the default for `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`).

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()` mode works well for layouts that respond well to constraints change, such as background and Images. It does not work well for layouts with specific size requirements. Such layouts include Text, and bespoke layouts that could result in overlapping children when constrained to too small of a size. In these cases, it's recommended to use `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` instead.