# CustomizedLookaheadAnimationVisualDebugging

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/animation/ExperimentalLookaheadAnimationVisualDebugApi https://developer.android.com/reference/kotlin/androidx/compose/animation/CustomizedLookaheadAnimationVisualDebugging.composable#CustomizedLookaheadAnimationVisualDebugging(androidx.compose.ui.graphics.Color,kotlin.Function0)( debugColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Allows customizing a particular shared element or animated bounds animation for debugging. | Cmn |

## Functions

### CustomizedLookaheadAnimationVisualDebugging

Cmn Artifact: [androidx.compose.animation:animation](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/LookaheadAnimationVisualDebugHelper.kt+function:CustomizedLookaheadAnimationVisualDebugging) Added in [1.11.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.11.0-rc01)

```
@Composable
@ExperimentalLookaheadAnimationVisualDebugApi
fun CustomizedLookaheadAnimationVisualDebugging(
    debugColor: Color,
    content: @Composable () -> Unit
): Unit
```

Allows customizing a particular shared element or animated bounds animation for debugging. Note that enabling CustomizedLookaheadAnimationVisualDebugging 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.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.CustomizedLookaheadAnimationVisualDebugging
import androidx.compose.animation.LookaheadAnimationVisualDebugging
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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 {
    // Wrap content with CustomizedLookaheadAnimationVisualDebugging to customize the color of
    // the bounds visualizations in the specified scope.
    CustomizedLookaheadAnimationVisualDebugging(Color.Black) {
        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)
                )
            }
        }
    }
}
```

| Parameters |
|---|---|
| `debugColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | The custom color specified for animation debugging visualizations. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The composable content that debugging visualizations will apply to, although which visualizations appear depends on where the Modifiers are placed. An example of how to use it: |