{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

ContentTransform

public final class ContentTransform


ContentTransform defines how the target content (i.e. content associated with target state) enters AnimatedContent and how the initial content disappears.

targetContentEnter defines the enter transition for the content associated with the new target state. It can be a combination of fadeIn, slideIn/slideInHorizontally /slideInVertically/AnimatedContentTransitionScope.slideIntoContainer, and expand. Similarly, initialContentExit supports a combination of ExitTransition for animating out the initial content (i.e. outgoing content). If the initial content and target content are of different size, the sizeTransform will be triggered unless it's explicitly set to null. AnimatedContentTransitionScope.slideIntoContainer and AnimatedContentTransitionScope.slideOutOfContainer can provide container-size-aware sliding in from the edge of the container, or sliding out to the edge of the container.

ContentTransform supports the zIndex definition when the content enters the AnimatedContent container via targetContentZIndex. By default, all content has a 0f zIndex. Among content with the same zIndex, the incoming target content will be on top, as it will be placed last. However, this may not always be desired. zIndex can be specified to change that order. The content with higher zIndex guarantee to be placed on top of content with lower zIndex.

sizeTransform manages the expanding and shrinking of the container if there is any size change as new content enters the AnimatedContent and old content leaves. Unlike AnimatedVisibility, for AnimatedContent it is generally more predictable to manage the size of the container using SizeTransform than influencing the size using expandIn/expandHorizontally/shrinkOut, etc for each content. By default, spring will be used to animate any size change, and AnimatedContent will be clipped to the animated size. Both can be customized by supplying a different SizeTransform. If no size animation is desired, sizeTransform can be set to null.

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedContentScope
import androidx.compose.animation.ContentTransform
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.with
import androidx.compose.ui.unit.IntSize

// enum class CartState { Expanded, Collapsed }
val transitionSpec: AnimatedContentScope<CartState>.() -> ContentTransform =
    {
        // Fade in with a delay so that it starts after fade out
        fadeIn(animationSpec = tween(150, delayMillis = 150))
            .with(fadeOut(animationSpec = tween(150)))
            .using(
                SizeTransform { initialSize, targetSize ->
                    // Using different SizeTransform for different state change
                    if (CartState.Collapsed isTransitioningTo CartState.Expanded) {
                        keyframes {
                            durationMillis = 500
                            // Animate to full target width and by 200px in height at 150ms
                            IntSize(targetSize.width, initialSize.height + 200) at 150
                        }
                    } else {
                        keyframes {
                            durationMillis = 500
                            // Animate 1/2 the height without changing the width at 150ms.
                            // The width and rest of the height will be animated in the
                            // timeframe between 150ms and duration (i.e. 500ms)
                            IntSize(
                                initialSize.width,
                                (initialSize.height + targetSize.height) / 2
                            ) at 150
                        }
                    }
                }
            )
    }
See also
SizeTransform
EnterTransition
ExitTransition
AnimatedContent

Summary

Public constructors

ContentTransform(
    @NonNull EnterTransition targetContentEnter,
    @NonNull ExitTransition initialContentExit,
    float targetContentZIndex,
    SizeTransform sizeTransform
)

Public methods

final @NonNull ExitTransition
final SizeTransform

sizeTransform manages the expanding and shrinking of the container if there is any size change as new content enters the AnimatedContent and old content leaves.

final @NonNull EnterTransition
final float

This describes the zIndex of the new target content as it enters the container.

final void
setTargetContentZIndex(float targetContentZIndex)

This describes the zIndex of the new target content as it enters the container.

Public constructors

ContentTransform

public ContentTransform(
    @NonNull EnterTransition targetContentEnter,
    @NonNull ExitTransition initialContentExit,
    float targetContentZIndex,
    SizeTransform sizeTransform
)

Public methods

getInitialContentExit

public final @NonNull ExitTransition getInitialContentExit()

getSizeTransform

public final SizeTransform getSizeTransform()

sizeTransform manages the expanding and shrinking of the container if there is any size change as new content enters the AnimatedContent and old content leaves. By default, spring will be used to animate any size change, and AnimatedContent will be clipped to the animated size. Both can be customized by supplying a different SizeTransform. If no size animation is desired, sizeTransform can be set to null.

getTargetContentEnter

public final @NonNull EnterTransition getTargetContentEnter()

getTargetContentZIndex

public final float getTargetContentZIndex()

This describes the zIndex of the new target content as it enters the container. It defaults to 0f. Content with higher zIndex will be drawn over lower zIndexed content. Among content with the same index, the target content will be placed on top.

setTargetContentZIndex

public final void setTargetContentZIndex(float targetContentZIndex)

This describes the zIndex of the new target content as it enters the container. It defaults to 0f. Content with higher zIndex will be drawn over lower zIndexed content. Among content with the same index, the target content will be placed on top.