Composables UI is out: our new component library for Compose Multiplatform ->
Composable Function

LookaheadAnimationVisualDebugging

Allows enabling and customizing shared element and animated bounds animation debugging.

LookaheadAnimationVisualDebugging

Source set: Common
@Composable
@ExperimentalLookaheadAnimationVisualDebugApi
public fun LookaheadAnimationVisualDebugging(
    isEnabled: Boolean = true,
    overlayColor: Color = Color(0x8034A853),
    multipleMatchesColor: Color = Color(0xFFEA4335),
    unmatchedElementColor: Color = Color(0xFF9AA0A6),
    inactiveElementColor: Color = Color(0xFF000000),
    isShowKeyLabelEnabled: Boolean = false,
    content: @Composable () -> Unit,
)

Allows enabling and customizing shared element and animated bounds animation debugging. Note that enabling LookaheadAnimationVisualDebugging affects the entire UI subtree generated by the content lambda. It applies to all descendants, regardless of whether they are defined within the same lexical scope.

An example of how to use it:

Parameters
isEnabled Boolean specifying whether to enable animation debugging.
overlayColor The color of the translucent film covering everything underneath the lifted layer (where the shared elements and other elements rendered in overlay are rendered).
multipleMatchesColor The color to indicate a shared element key with multiple matches.
unmatchedElementColor The color to indicate a shared element key with no matches.
inactiveElementColor The color to indicate a shared element is currently inactive. A shared element is inactive when it is not currently animating. If the shared element is inactive due to having no match, unmatchedElementColor will be shown instead.
isShowKeyLabelEnabled Boolean specifying whether to print animated element keys.
content The composable content that debugging visualizations will apply to, although which visualizations appear depends on where the Modifiers are placed.

Last updated: