MaterialContainerTransform

A shared element Transition that transforms one container to another.

MaterialContainerTransform can be used to morph between two Activities, Fragments, Views or a View to a Fragment.

This transition captures a start and end View which are used to create a Drawable which will be added to the view hierarchy. The drawable will be added to the view hierarchy as an overlay and handles drawing a mask that morphs between the shape of the start View to the shape of the end View. During the animation, the start and end View's are drawn inside the masking container and faded in and/or out over a duration of the transition. Additionally, the masking container will be translated and scaled from the position and size of the start View to the position and size of the end View.

MaterialContainerTransform supports theme-based easing, duration, and path values. In order to have the transition load these values upfront, use the MaterialContainerTransform constructor. Otherwise, use the default constructor and the transition will load theme values from the View context before it runs, and only use them if the corresponding properties weren't already set on the transition instance.

The composition of MaterialContainerTransform's animation can be customized in a number of ways. The two most prominent customizations are the way in which content inside the container is swapped via setFadeMode and path the container follows from its starting position to its ending position via setPathMotion. For other ways to customize the container transform, see:

See also

setStartShapeAppearanceModel(ShapeAppearanceModel)
setEndShapeAppearanceModel(ShapeAppearanceModel)
setDrawingViewId(int)
setScrimColor(int)
setFadeMode(int)
setFitMode(int)
setFadeProgressThresholds(ProgressThresholds)
setScaleProgressThresholds(ProgressThresholds)
setScaleMaskProgressThresholds(ProgressThresholds)
setShapeMaskProgressThresholds(ProgressThresholds)

Constructors

Link copied to clipboard
constructor()
constructor(@NonNull context: Context, entering: Boolean)

Types

Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
A class which holds a start and end value which represent a range within 0.0 - 1.0.
Link copied to clipboard

Properties

Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
open var endViewId: Int
Link copied to clipboard
Indicates that this transition should cross fade the outgoing and incoming content.
Link copied to clipboard
val FADE_MODE_IN: Int = 0
Indicates that this transition should only fade in the incoming content, without changing the opacity of the outgoing content.
Link copied to clipboard
Indicates that this transition should only fade out the outgoing content, without changing the opacity of the incoming content.
Link copied to clipboard
Indicates that this transition should sequentially fade out the outgoing content and fade in the incoming content.
Link copied to clipboard
open var fadeMode: Int
Link copied to clipboard
Indicates that this transition should automatically choose whether to use FIT_MODE_WIDTH or FIT_MODE_HEIGHT.
Link copied to clipboard
Indicates that this transition should fit the incoming content to the height of the outgoing content during the scale animation.
Link copied to clipboard
Indicates that this transition should fit the incoming content to the width of the outgoing content during the scale animation.
Link copied to clipboard
open var fitMode: Int
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
open var startViewId: Int
Link copied to clipboard
Indicates that this transition should use automatic detection to determine whether it is an Enter or a Return.
Link copied to clipboard
Indicates that this is an Enter transition, i.e., when elements are entering the scene.
Link copied to clipboard
Indicates that this is a Return transition, i.e., when elements are exiting the scene.
Link copied to clipboard

Functions

Link copied to clipboard
open fun captureEndValues(@NonNull transitionValues: TransitionValues)
Link copied to clipboard
open fun captureStartValues(@NonNull transitionValues: TransitionValues)
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Whether debug drawing is enabled.
Link copied to clipboard
Get whether shadows should be drawn around the container to approximate native elevation shadows on the start and end views.
Link copied to clipboard
Whether to hold the last frame at the end of the animation.
Link copied to clipboard
open fun setAllContainerColors(@ColorInt containerColor: Int)
Set the container color, the start container color and the end container color.
Link copied to clipboard
open fun setDrawDebugEnabled(drawDebugEnabled: Boolean)
Set whether or not to draw paths which follow the shape and path of animating containers.
Link copied to clipboard
open fun setElevationShadowEnabled(elevationShadowEnabled: Boolean)
Set whether shadows should be drawn around the container to approximate native elevation shadows on the start and end views.
Link copied to clipboard
open fun setHoldAtEndEnabled(holdAtEndEnabled: Boolean)
If true, the last frame of the animation will be held in place, and the original outgoing and incoming views will not be re-shown.
Link copied to clipboard
open fun setPathMotion(@Nullable pathMotion: PathMotion)