🌈 Create new beautiful Compose Gradients with our new wesite ->
Interface

SharedTransitionScope

SharedTransitionScope provides a coordinator space in which shared elements/ shared bounds (when matched) will transform their bounds from one to another.

Source set: Common
public interface SharedTransitionScope : LookaheadScope

SharedTransitionScope provides a coordinator space in which shared elements/ shared bounds (when matched) will transform their bounds from one to another. Their position animation is always relative to the origin defined by where SharedTransitionScope is in the tree.

SharedTransitionScope also creates an overlay, in which all shared elements and shared bounds are rendered by default, so that they are not subject to their parent's fading or clipping, and can therefore transform the bounds without alpha jumps or being unintentionally clipped.

It is also SharedTransitionScope's responsibility to do the SharedContentState key match for all the sharedElement or sharedBounds defined in this scope. Note: key match will not work for SharedContentState created in different SharedTransitionScopes.

SharedTransitionScope oversees all the animations in its scope. When any of the animations is active, isTransitionActive will be true. Once a bounds transform starts, by default the shared element or shared bounds will render the content in the overlay. The rendering will remain in the overlay until all other animations in the SharedTransitionScope are finished (i.e. when isTransitionActive == false).

Properties

isTransitionActive

Source set: Common
public val isTransitionActive: Boolean

Indicates whether there is any ongoing transition between matched sharedElement or sharedBounds.

Functions

skipToLookaheadSize

Source set: Common
public fun Modifier.skipToLookaheadSize(
        enabled: () -> Boolean = { isTransitionActive }
    ): Modifier

skipToLookaheadSize enables a layout to measure its child with the lookahead constraints, therefore laying out the child as if the transition has finished. This is particularly helpful for layouts where re-flowing content based on animated constraints is undesirable, such as texts.

In the sample below, try remove the skipToLookaheadSize modifier and observe the difference:

Parameters

enabled A lambda that determines when the modifier should be active. Defaults to { isTransitionActive }, which enables the modifier only during active shared element transitions

skipToLookaheadPosition

Source set: Common
public fun Modifier.skipToLookaheadPosition(
        enabled: () -> Boolean = { isTransitionActive }
    ): Modifier

A modifier that anchors a layout at the target position obtained from the lookahead pass during shared element transitions.

This modifier ensures that a layout maintains its target position determined by the lookahead layout pass, preventing it from being influenced by layout changes in the tree during shared element transitions. This is particularly useful for preventing unwanted movement or repositioning of elements during animated transitions.

Important: skipToLookaheadPosition anchors the layout at the lookahead position relative to the SharedTransitionLayout. It does NOT necessarily anchor the layout within the window. More specifically, if a SharedTransitionLayout re-positions itself, any child layout using skipToLookaheadPosition will move along with it. If it is desirable to anchor a layout relative to a window, it's recommended to set up SharedTransitionLayout in a way that it does not change position in the window.

Note: skipToLookaheadPosition by default is only enabled via enabled lambda during a shared transition. It is recommended to enable it only when necessary. When active, it counteracts its ancestor layout's movement, which can incur extra placement pass costs if the parent layout frequently moves (e.g., during scrolling or animation).

Parameters

enabled A lambda that determines when the modifier should be active. Defaults to { isTransitionActive }, which enables the modifier only during active shared element transitions

renderInSharedTransitionScopeOverlay

Source set: Common
public fun Modifier.renderInSharedTransitionScopeOverlay(
        zIndexInOverlay: Float = 0f,
        renderInOverlay: () -> Boolean = { isTransitionActive },
    ): Modifier

Renders the content in the SharedTransitionScope's overlay, where shared content (i.e. shared elements and shared bounds) is rendered by default. This is useful for rendering content that is not shared on top of shared content to preserve a specific spatial relationship.

renderInOverlay dynamically controls whether the content should be rendered in the SharedTransitionScope's overlay. By default, it returns the same value as SharedTransitionScope.isTransitionActive. This means the default behavior is to render the child layout of this modifier in the overlay only when the transition is active.

IMPORTANT: When elevating layouts into the overlay, the layout is no longer subjected to 1) its parent's clipping, and 2) parent's layer transform (e.g. alpha, scale, etc). Therefore, it is recommended to create an enter/exit animation (e.g. using AnimatedVisibilityScope.animateEnterExit) for the child layout to avoid any abrupt visual changes.

Parameters

renderInOverlay renderInOverlay determines when the content should be rendered in the overlay. Defaults to { isTransitionActive }, which renders the content in the overlay only when the transition is active.
zIndexInOverlay The zIndex of the content in the overlay. Defaults to 0f.

sharedElement

Source set: Common
public fun Modifier.sharedElement(
        sharedContentState: SharedContentState,
        animatedVisibilityScope: AnimatedVisibilityScope,
        boundsTransform: BoundsTransform = SharedTransitionDefaults.BoundsTransform,
        placeholderSize: PlaceholderSize = ContentSize,
        renderInOverlayDuringTransition: Boolean = true,
        zIndexInOverlay: Float = 0f,
        clipInOverlayDuringTransition: OverlayClip = ParentClip,
    ): Modifier

sharedElement is a modifier that tags a layout with a SharedContentState.key, such that entering and exiting shared elements of the same key share the animated and continuously changing bounds during the layout change. The bounds will be animated from the initial bounds defined by the exiting shared element to the target bounds calculated based on the incoming shared element. The animation for the bounds can be customized using boundsTransform. During the bounds transform, sharedElement will re-measure and relayout its child layout using fixed constraints derived from its animated size, similar to RemeasureToBounds resizeMode in sharedBounds.

In contrast to sharedBounds, sharedElement is designed for shared content that has the exact match in terms of visual content and layout when the measure constraints are the same. Such examples include image assets, icons, MovableContent etc. Only the shared element that is becoming visible will be rendered during the transition. The bounds for shared element are determined by the bounds of the shared element becoming visible based on the target state of animatedVisibilityScope.

Important: When a shared element finds its match and starts a transition, it will be rendered into the overlay of the SharedTransitionScope in order to avoid being faded in/out along with its parents or clipped by its parent as it transforms to the target size and position. This also means that any clipping or fading for the shared elements will need to be applied explicitly as the child of sharedElement (i.e. after sharedElement modifier in the modifier chain). For example: Modifier.sharedElement(...).clip(shape = RoundedCornerShape(20.dp)).animateEnterExit(...)

By default, the sharedElement is clipped by the clipInOverlayDuringTransition of its parent sharedBounds. If the sharedElement has no parent sharedBounds or if the parent sharedBounds has no clipping defined, it'll not be clipped. If additional clipping is desired to ensure sharedElement doesn't move outside of a visual bounds, clipInOverlayDuringTransition can be used to specify the clipping for when the shared element is going through an active transition towards a new target bounds.

While the shared elements are rendered in overlay during the transition, its zIndexInOverlay can be specified to allow shared elements to render in a different order than their placement/zOrder when not in the overlay. For example, the title of a page is typically placed and rendered before the content below. During the transition, it may be desired to animate the title over on top of the other shared elements on that page to indicate significance or a point of interest. zIndexInOverlay can be used to facilitate such use cases. zIndexInOverlay is 0f by default.

renderInOverlayDuringTransition is true by default. In some rare use cases, there may be no clipping or layer transform (fade, scale, etc) in the application that prevents shared elements from transitioning from one bounds to another without any clipping or sudden alpha change. In such cases, renderInOverlayDuringTransition could be specified to false.

During a shared element transition, the space that was occupied by the exiting shared element and the space that the entering shared element will take up are considered placeholders. Their sizes during the shared element transition can be configured through placeholderSize. By default, it will be the same as the content size of the respective shared element. It can also be set to AnimatedSize or any other PlaceholderSize to report to their parent layout an animated size to create a visual effect where the parent layout dynamically adjusts the layout to accommodate the animated size of the shared elements.

Below is an example of using shared elements in a transition from a list to a details page. For a more complex example using sharedElement along with sharedBounds, see the API documentation for SharedTransitionLayout.

Parameters

sharedContentState The SharedContentState of the shared element. This defines the key used for matching shared elements.
animatedVisibilityScope The AnimatedVisibilityScope in which the shared element is declared. This helps the system determine if the shared element is incoming or outgoing.
boundsTransform A BoundsTransform to customize the animation specification based on the shared element's initial and target bounds during the transition.
placeholderSize A PlaceholderSize that defines the size the transforming layout reports to the layout system during the transition. By default, this is the shared element's content size (without any scaling or transformation).
renderInOverlayDuringTransition Whether the shared element should be rendered in the overlay during the transition. Defaults to true.
zIndexInOverlay The zIndex of the shared element within the overlay, enabling custom z-ordering for multiple shared elements.
clipInOverlayDuringTransition The clipping path of the shared element in the overlay. By default, it uses the resolved clip path from its parent sharedBounds (if applicable).

sharedBounds

Source set: Common
public fun Modifier.sharedBounds(
        sharedContentState: SharedContentState,
        animatedVisibilityScope: AnimatedVisibilityScope,
        enter: EnterTransition = fadeIn(),
        exit: ExitTransition = fadeOut(),
        boundsTransform: BoundsTransform = SharedTransitionDefaults.BoundsTransform,
        resizeMode: ResizeMode = scaleToBounds(ContentScale.FillWidth, Center),
        placeholderSize: PlaceholderSize = ContentSize,
        renderInOverlayDuringTransition: Boolean = true,
        zIndexInOverlay: Float = 0f,
        clipInOverlayDuringTransition: OverlayClip = ParentClip,
    ): Modifier

sharedBounds is a modifier that tags a layout with a SharedContentState.key, such that entering and exiting shared bounds of the same key share the animated and continuously changing bounds during the layout change. The bounds will be animated from the initial bounds defined by the exiting shared bounds to the target bounds calculated based on the incoming shared shared bounds. The animation for the bounds can be customized using boundsTransform. The target bounds for sharedBounds are determined by the bounds of the sharedBounds becoming visible based on the target state of animatedVisibilityScope.

In contrast to sharedElement, sharedBounds is designed for shared content that has the visually different content. While the sharedBounds keeps the continuity of the bounds, the incoming and outgoing content within the sharedBounds will enter and exit in an enter/exit transition using enter/exit. By default, fadeIn and fadeOut are used to fade the content in or out.

resizeMode defines how the child layout of sharedBounds should be resized during boundsTransform. By default, scaleToBounds will be used to measure the child content with lookahead constraints to arrive at the stable layout. Then the stable layout will be scaled to fit or fill (depending on the content scale used) the transforming bounds of sharedBounds. If there's a need to relayout content (rather than scaling) based on the animated bounds size (e.g. dynamically resizing a Row), it's recommended to use RemeasureToBounds as the resizeMode.

Important: When a shared bounds finds its match and starts a transition, it will be rendered into the overlay of the SharedTransitionScope in order to avoid being faded in/out along with its parents or clipped by its parent as it transforms to the target size and position. This also means that any clipping or fading for the shared elements will need to be applied explicitly as the child of sharedBounds (i.e. after sharedBounds modifier in the modifier chain). For example: Modifier.sharedBounds(...).clip(shape = RoundedCornerShape(20.dp))

By default, the sharedBounds is clipped by the clipInOverlayDuringTransition of its parent sharedBounds in the layout tree. If the sharedBounds has no parent sharedBounds or if the parent sharedBounds has no clipping defined, it'll not be clipped. If additional clipping is desired to ensure child sharedBounds or child sharedElement don't move outside of the this sharedBounds's visual bounds in the overlay, clipInOverlayDuringTransition can be used to specify the clipping.

While the shared bounds are rendered in overlay during the transition, its zIndexInOverlay can be specified to allow them to render in a different order than their placement/zOrder when not in the overlay. For example, the title of a page is typically placed and rendered before the content below. During the transition, it may be desired to animate the title over on top of the other shared elements on that page to indicate significance or a point of interest. zIndexInOverlay can be used to facilitate such use cases. zIndexInOverlay is 0f by default.

renderInOverlayDuringTransition is true by default. In some rare use cases, there may be no clipping or layer transform (fade, scale, etc) in the application that prevents shared elements from transitioning from one bounds to another without any clipping or sudden alpha change. In such cases, renderInOverlayDuringTransition could be specified to false.

During a shared bounds transition, the space that was occupied by the exiting shared bounds and the space that the entering shared bounds will take up are considered placeholders. Their sizes during the shared element transition can be configured through placeholderSize. By default, it will be the same as the content size of the respective shared bounds. It can also be set to AnimatedSize or any other PlaceholderSize to report to their parent layout an animated size to create a visual effect where the parent layout dynamically adjusts the layout to accommodate the animated size of the shared elements.

Since sharedBounds show both incoming and outgoing content in its bounds, it affords opportunities to do interesting transitions where additional sharedElement and sharedBounds can be nested in a parent sharedBounds. See the sample code below for a more complex example with nested shared bounds/elements.

Parameters

sharedContentState The SharedContentState of the shared element. This defines the key used for matching shared elements.
animatedVisibilityScope The AnimatedVisibilityScope in which the shared element is declared. This helps the system determine if the shared element is incoming or outgoing.
enter The enter transition used for incoming content while it's displayed within the transforming bounds. This defaults to a fade-in.
exit The exit transition used for outgoing content while it's displayed within the transforming bounds. This defaults to a fade-out.
boundsTransform A BoundsTransform to customize the animation specification based on the shared element's initial and target bounds for the transition.
resizeMode A ResizeMode that defines how the child layout of sharedBounds should be resized during boundsTransform. By default, scaleToBounds is used to scale the child content to fit the transforming bounds.
placeholderSize A PlaceholderSize that defines the size the transforming layout reports to the layout system during the transition. By default, this is the shared bounds' content size (without any scaling or transformation).
renderInOverlayDuringTransition Whether the shared bounds should be rendered in the overlay during the transition. Defaults to true.
zIndexInOverlay The zIndex of the shared bounds within the overlay, enabling custom z-ordering for multiple shared bounds or elements.
clipInOverlayDuringTransition The clipping path of the shared bounds in the overlay. By default, it uses the resolved clip path from its parent sharedBounds (if applicable).

sharedElementWithCallerManagedVisibility

Source set: Common
public fun Modifier.sharedElementWithCallerManagedVisibility(
        sharedContentState: SharedContentState,
        visible: Boolean,
        boundsTransform: BoundsTransform = SharedTransitionDefaults.BoundsTransform,
        placeholderSize: PlaceholderSize = ContentSize,
        renderInOverlayDuringTransition: Boolean = true,
        zIndexInOverlay: Float = 0f,
        clipInOverlayDuringTransition: OverlayClip = ParentClip,
    ): Modifier

sharedElementWithCallerManagedVisibility is a modifier that tags a layout with a SharedContentState.key, such that entering and exiting shared elements of the same key share the animated and continuously changing bounds during the layout change. The bounds will be animated from the initial bounds defined by the exiting shared element to the target bounds calculated based on the incoming shared element. The animation for the bounds can be customized using boundsTransform.

Compared to sharedElement, sharedElementWithCallerManagedVisibility is designed for shared element transitions where the shared element is not a part of the content that is being animated out by AnimatedVisibility. Therefore, it is the caller's responsibility to explicitly remove the exiting shared element (i.e. shared elements where visible == false) from the tree as appropriate. Typically this is when the transition is finished (i.e. SharedTransitionScope.isTransitionActive == false). The target bounds is derived from the sharedElementWithCallerManagedVisibility with visible being true.

In contrast to sharedBounds, this modifier is intended for shared content that has the exact match in terms of visual content and layout when the measure constraints are the same. Such examples include image assets, icons, MovableContent etc. Only the shared element that is becoming visible will be rendered during the transition.

Important: When a shared element finds its match and starts a transition, it will be rendered into the overlay of the SharedTransitionScope in order to avoid being faded in/out along with its parents or clipped by its parent as it transforms to the target size and position. This also means that any clipping or fading for the shared elements will need to be applied explicitly as the child of sharedElementWithCallerManagedVisibility (i.e. after sharedElementWithCallerManagedVisibility modifier in the modifier chain). For example:

Modifier.sharedElementWithCallerManagedVisibility(...)
.clip(shape = RoundedCornerShape(20.dp))

By default, the sharedElementWithCallerManagedVisibility is clipped by the clipInOverlayDuringTransition of its parent sharedBounds. If the sharedElementWithCallerManagedVisibility has no parent sharedBounds or if the parent sharedBounds has no clipping defined, it'll not be clipped. If additional clipping is desired to ensure sharedElementWithCallerManagedVisibility doesn't move outside of a visual bounds, clipInOverlayDuringTransition can be used to specify the clipping for when the shared element is going through an active transition towards a new target bounds.

While the shared elements are rendered in overlay during the transition, its zIndexInOverlay can be specified to allow shared elements to render in a different order than their placement/zOrder when not in the overlay. For example, the title of a page is typically placed and rendered before the content below. During the transition, it may be desired to animate the title over on top of the other shared elements on that page to indicate significance or a point of interest. zIndexInOverlay can be used to facilitate such use cases. zIndexInOverlay is 0f by default.

renderInOverlayDuringTransition is true by default. In some rare use cases, there may be no clipping or layer transform (fade, scale, etc) in the application that prevents shared elements from transitioning from one bounds to another without any clipping or sudden alpha change. In such cases, renderInOverlayDuringTransition could be specified to false.

During a shared element transition, the space that was occupied by the exiting shared element and the space that the entering shared element will take up are considered placeholders. Their sizes during the shared element transition can be configured through placeholderSize. By default, it will be the same as the content size of the respective shared element. It can also be set to AnimatedSize or any other PlaceholderSize to report to their parent layout an animated size to create a visual effect where the parent layout dynamically adjusts the layout to accommodate the animated size of the shared elements.

Parameters

sharedContentState The SharedContentState of the shared element. This defines the key used for matching shared elements.
visible Whether the shared element is visible.
boundsTransform A BoundsTransform to customize the animation specification based on the shared element's initial and target bounds during the transition.
placeholderSize A PlaceholderSize that defines the size the transforming layout reports to the layout system during the transition. By default, this is the shared element's content size (without any scaling or transformation).
renderInOverlayDuringTransition Whether the shared element should be rendered in the overlay during the transition. Defaults to true.
zIndexInOverlay The zIndex of the shared element within the overlay, enabling custom z-ordering for multiple shared elements.
clipInOverlayDuringTransition The clipping path of the shared element in the overlay. By default, it uses the resolved clip path from its parent sharedBounds (if applicable).

OverlayClip

Source set: Common
public fun OverlayClip(clipShape: Shape): OverlayClip

Creates an OverlayClip based on a specific clipShape.

rememberSharedContentState

Source set: Common
@Composable
    public fun rememberSharedContentState(key: Any): SharedContentState

Creates and remembers a SharedContentState with a given key and a given SharedContentConfig.

Parameters

key will be used to match a shared element against others in the same SharedTransitionScope.

rememberSharedContentState

Source set: Common
@Composable
    public fun rememberSharedContentState(
        key: Any,
        config: SharedContentConfig,
    ): SharedContentState

Creates and remembers a SharedContentState with a given key and a given SharedContentConfig.

config defines whether the shared element is enabled or disabled, and the alternative target bounds if the shared element is disposed amid animation (e.g., scrolled out of the viewport and subsequently disposed).

Parameters

key will be used to match a shared element against others in the same SharedTransitionScope.
config defines whether the shared element is enabled or disabled, and the alternative target bounds if the shared element is disposed amid animation (e.g., scrolled out of the viewport and subsequently disposed).

SharedContentConfig

Source set: Common
public fun SharedContentConfig(): SharedContentConfig

SharedContentConfig is a factory method that returns an SharedContentConfig object with default implementations for all the functions and properties defined in the SharedContentConfig interface. More specifically, the returned SharedTransitionScope.SharedContentConfig enables shared elements and bounds, and keeps them enabled while the animation is in-flight. It also sets the SharedContentConfig.alternativeTargetBoundsInTransitionScopeAfterRemoval to null, ensuring the shared element transition is canceled immediately if the incoming shared element is removed during the animation.

SharedContentConfig

Source set: Common
public fun SharedContentConfig(
        permitTransformDuringDeferredTransition: Boolean
    ): SharedContentConfig

SharedContentConfig is a factory method that returns an SharedContentConfig object with default implementations for all the functions and properties defined in the SharedContentConfig interface. More specifically, the returned SharedTransitionScope.SharedContentConfig enables shared elements and bounds, and keeps them enabled while the animation is in-flight. It also sets the SharedContentConfig.alternativeTargetBoundsInTransitionScopeAfterRemoval to null, ensuring the shared element transition is canceled immediately if the incoming shared element is removed during the animation.

Parameters

permitTransformDuringDeferredTransition defines whether the shared element should take part in the manual transformations applied to its container during the deferred phase of a DeferredTransition. This makes it look like it remains visually attached to its parent container.

Members

PlaceholderSize

Source set: Common
public interface PlaceholderSize

PlaceholderSize defines the size of the space that was or will be occupied by the exiting or entering sharedElement/sharedBounds.

Functions

calculateSize

Source set: Common
public fun calculateSize(contentSize: IntSize, animatedSize: IntSize): IntSize

Returns the size of the placeholder based on contentSize and animatedSize. Note: contentSize for exiting content is the size before it starts exiting. For entering content, contentSize is the lookahead size of the content (i.e. target size of the shared transition).

Members

Companion

Source set: Common
public companion object

Properties

AnimatedSize

Source set: Common
public val AnimatedSize: PlaceholderSize = PlaceholderSize { _, animatedSize ->
                animatedSize
            }

AnimatedSize is a pre-defined SharedTransitionScope.PlaceholderSize that lets the parent layout of shared elements or shared bounds observe the animated size during an active shared transition. Therefore the layout parent will most likely resize itself and re-layout its children to adjust to the new animated size.

ContentSize

Source set: Common
public val ContentSize: PlaceholderSize = PlaceholderSize { contentSize, _ ->
                contentSize
            }

ContentSize is a pre-defined SharedTransitionScope.PlaceholderSize that allows the parent layout of shared elements or shared bounds to see the content size of the shared content during an active shared transition. For outgoing content, this ContentSize is the initial size before the animation, whereas for incoming content ContentSize will return the lookahead/target size of the content. This is the default value for shared elements and shared bounds. The effect is that the parent layout does not resize during the shared element transition, hence giving a sense of stability, rather than dynamic motion. If it's preferred to have parent layout dynamically adjust its layout based on the shared element's animated size, consider using AnimatedSize.

ResizeMode

Source set: Common
public sealed interface ResizeMode

There are two different modes to resize child layout of sharedBounds during bounds transform: 1) scaleToBounds and 2) RemeasureToBounds.

scaleToBounds first measures the child layout with the lookahead constraints, similar to skipToLookaheadSize. Then the child's stable layout will be scaled to fit in the shared bounds.

In contrast, RemeasureToBounds will remeasure and relayout the child layout of sharedBounds 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.

scaleToBounds works best for Texts and bespoke layouts that don't respond well to constraints change. RemeasureToBounds works best for background, shared images of different aspect ratios, and other layouts that adjust themselves visually nicely and efficiently to size changes.

Members

Companion

Source set: Common
public companion object

Properties

RemeasureToBounds

Source set: Common
public val RemeasureToBounds: ResizeMode = RemeasureImpl

In contrast to scaleToBounds, RemeasureToBounds is a ResizeMode that remeasures and relayouts its child whenever bounds change during the bounds transform. More specifically, when the sharedBounds 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 sharedBounds will likely change its layout to fit in the animated constraints.

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 scaleToBounds instead.

Functions

scaleToBounds

Source set: Common
public fun scaleToBounds(
                contentScale: ContentScale = ContentScale.FillWidth,
                alignment: Alignment = Center,
            ): ResizeMode

scaleToBounds as a type of 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 sharedBounds, the provided contentScale 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 RemeasureToBounds mode. Instead, it will scale the stable layout based on the animated size of the sharedBounds.

scaleToBounds works best for sharedBounds when used to animate shared Text.

ContentScale.FillWidth is the default value for contentScale. alignment will be used to calculate the placement of the scaled content. It is Alignment.Center by default.

OverlayClip

Source set: Common
public interface OverlayClip

OverlayClip defines a specific clipping that should be applied to a sharedBounds or sharedElement in the overlay.

Functions

getClipPath

Source set: Common
public fun getClipPath(
            sharedContentState: SharedContentState,
            bounds: Rect,
            layoutDirection: LayoutDirection,
            density: Density,
        ): Path?

Creates a clip path based on current animated bounds of the sharedBounds or sharedElement, their sharedContentState (to query parent state's bounds if needed), and layoutDirection and density. The topLeft of the bounds is the local position of the sharedElement/sharedBounds in the SharedTransitionScope.

Important: The returned Path needs to be offset-ed as needed such that it is in SharedTransitionScope.lookaheadScopeCoordinates's coordinate space. For example, if the path is created using bounds, it needs to be offset-ed by bounds.topLeft.

When implementing this method, it is recommended to modify the same Path object and return it here, instead of creating new Paths.

SharedContentState

Source set: Common
public class SharedContentState internal constructor(
        public val key: Any,
        config: SharedContentConfig = SharedTransitionDefaults.SharedContentConfig,
    )

SharedContentState is designed to allow access of the properties of sharedBounds/sharedElement, such as whether a match of the same key has been found in the SharedTransitionScope, its clipPathInOverlay and parentSharedContentState if there is a parent sharedBounds in the layout tree.

Properties

isMatchFound

Source set: Common
public val isMatchFound: Boolean

Indicates whether a match of the same key has been found. sharedElement or sharedBounds will not have any animation unless a match has been found.

Caveat: isMatchFound is only set to true after a new sharedElement/sharedBounds of the same key has been composed. If the new sharedBounds/sharedElement is declared in subcomposition (e.g. a LazyList) where the composition happens as a part of the measure/layout pass, that's when isMatchFound will become true.

clipPathInOverlay

Source set: Common
public val clipPathInOverlay: Path?

The resolved clip path in overlay based on the OverlayClip defined for the shared content. clipPathInOverlay is set during Draw phase, before children are drawn. This means it is safe to query parentSharedContentState's clipPathInOverlay when the shared content is drawn.

parentSharedContentState

Source set: Common
public val parentSharedContentState: SharedContentState?

Returns the SharedContentState of a parent sharedBounds, if any.

Functions

prepareTransitionWithInitialVelocity

Source set: Common
public fun prepareTransitionWithInitialVelocity(initialVelocity: Velocity)

prepareTransitionWithInitialVelocity sets up the initial velocity for the upcoming shared element transition. This function should be called during the gesture handling to allow the system to acquire the animation start time in the next (i.e. earliest) animation frame to ensure a smooth velocity handoff.

The velocity will used for both incoming and outgoing shared content defined with the same key once shared element transition starts. The animationSpec used to animate the momentum will be the same as what is used by the incoming shared element's bounds transform to keep consistent motion. If the incoming shared element uses a duration-based animation, a default spring will be used instead.

Note: This function will have no effect if the shared element is not enabled (i.e. SharedContentConfig.isEnabled is false). This velocity will only apply to the next shared element transition.

Parameters

initialVelocity The velocity from the gesture system (e.g., from onDragEnd).

SharedContentConfig

Source set: Common
public interface SharedContentConfig

SharedContentConfig allows a shared element to be disabled or enabled dynamically through isEnabled property. By default, shouldKeepEnabledForOngoingAnimation is true. This means if the shared element transition is already running for the layout that this SharedContentConfig is applied to, we will keep the shared element enabled until the animation is finished. In other words, disabling shared element while the animation is in-flight will have no effect, unless shouldKeepEnabledForOngoingAnimation is overridden.

alternativeTargetBoundsInTransitionScopeAfterRemoval defines an alternative target bounds for when the target shared element is disposed amid animation (e.g., scrolled out of the viewport and subsequently disposed). By default, no alternative target bounds is defined - As soon as the target shared element (i.e. the shared element in the incoming/target content) is removed, the shared element transition for the shared elements with the same key will be cancelled.

Properties

isEnabled

Source set: Common
public val SharedContentState.isEnabled: Boolean

isEnabled returns a boolean indicating whether the shared element is enabled. By default, it is true.

shouldKeepEnabledForOngoingAnimation

Source set: Common
public val shouldKeepEnabledForOngoingAnimation: Boolean

shouldKeepEnabledForOngoingAnimation returns a boolean indicating whether the shared element should be enabled for ongoing animation. By default, shared elements will be kept enabled for ongoing animation until the animation is finished. This means disabling shared element while the animation is in-flight will have no effect, unless shouldKeepEnabledForOngoingAnimation is overridden to return false. This default is intended to ensure a continuous experience out-of-the-box by avoiding accidentally removing in-flight animations.

permitTransformDuringDeferredTransition

Source set: Common
public val permitTransformDuringDeferredTransition: Boolean

permitTransformDuringDeferredTransition defines whether the shared element should take part in the manual transformations applied to its container during the deferred phase of a DeferredTransition. If true, the element visually transforms with its container until the transition switches to the automatic phase. This makes it look like it remains visually attached to its parent container. If false, it remains statically detached in its start position during the deferred phase.

Functions

alternativeTargetBoundsInTransitionScopeAfterRemoval

Source set: Common
public fun SharedContentState.alternativeTargetBoundsInTransitionScopeAfterRemoval(
            targetBoundsBeforeRemoval: Rect,
            sharedTransitionLayoutSize: Size,
        ): Rect?

alternativeTargetBoundsInTransitionScopeAfterRemoval returns an alternative target bounds for when the target shared element is disposed amid animation (e.g., scrolled out of the viewport and subsequently disposed).

By default, no alternative target bounds is defined - As soon as the target shared element (i.e. the shared element in the incoming/target content) is removed, the shared element transition for the shared elements with the same key will be cancelled.

Parameters

targetBoundsBeforeRemoval The target bounds of the shared element relative to the SharedTransitionLayout before it is removed.
sharedTransitionLayoutSize The size of the shared transition layout for convenient calculation.

Content updated: