LookaheadAnimationVisualDebugging

Composable Function
Common
@Composable
@ExperimentalLookaheadAnimationVisualDebugApi
public fun LookaheadAnimationVisualDebugging(
    isEnabled: Boolean = true,
    overlayColor: Color = Color(0x8034A853),
    multipleMatchesColor: Color = Color(0xFFEA4335),
    unmatchedElementColor: Color = Color(0xFF9AA0A6),
    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.
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.

Code Examples

LookaheadAnimationVisualDebuggingSample

@OptIn(ExperimentalLookaheadAnimationVisualDebugApi::class)
@Composable
fun LookaheadAnimationVisualDebuggingSample() {
    var isExpanded by mutableStateOf(false)
    // Wrap content with LookaheadAnimationVisualDebugging to enable visual debugging.
    // Optional parameters allow color customization and decision of whether to show key labels.
    // 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.
    LookaheadAnimationVisualDebugging(isShowKeyLabelEnabled = true) {
        SharedTransitionLayout(Modifier.fillMaxSize().clickable { isExpanded = !isExpanded }) {
            AnimatedVisibility(visible = isExpanded) {
                Box(
                    Modifier.offset(100.dp, 100.dp)
                        .size(200.dp)
                        .sharedElement(
                            rememberSharedContentState(key = "box"),
                            animatedVisibilityScope = this,
                        )
                        .background(Color.Red)
                )
            }
            AnimatedVisibility(visible = !isExpanded) {
                Box(
                    Modifier.offset(0.dp, 0.dp)
                        .size(50.dp)
                        .sharedElement(
                            rememberSharedContentState(key = "box"),
                            animatedVisibilityScope = this,
                        )
                        .background(Color.Blue)
                )
            }
        }
    }
}