graphicsLayer

ChangeOpacity

@Sampled
@Composable
fun ChangeOpacity() {
    Text("Hello World", Modifier.graphicsLayer(alpha = 0.5f, clip = true))
}

CompositingStrategyModulateAlpha

@Sampled
@Composable
fun CompositingStrategyModulateAlpha() {
    Canvas(
        modifier =
            Modifier.size(100.dp)
                .background(Color.Black)
                .graphicsLayer(
                    alpha = 0.5f,
                    compositingStrategy = CompositingStrategy.ModulateAlpha,
                )
    ) {
        // Configuring an alpha less than 1.0 and specifying
        // CompositingStrategy.ModulateAlpha ends up with the overlapping region
        // of the 2 draw rect calls to blend transparent blue and transparent red
        // against the black background instead of just transparent blue which is what would
        // occur with CompositingStrategy.Auto or CompositingStrategy.Offscreen
        inset(0f, 0f, size.width / 3, size.height / 3) { drawRect(color = Color.Red) }
        inset(size.width / 3, size.height / 3, 0f, 0f) { drawRect(color = Color.Blue) }
    }
}

CompositingStrategyOffscreenLayerOutsets

@Sampled
@Composable
fun CompositingStrategyOffscreenLayerOutsets() {
    Box(Modifier.size(100.dp).graphicsLayer(alpha = 0.5f, outsets = LayerOutsets(100.dp))) {
        // Configuring an alpha less than 1.0 has promoted the layer to an offscreen buffer thus
        // implicitly clipping
        // the layer to its bounds. The inner box draws a Rect which extends beyond the layout
        // bounds of the outer
        // box. LayerOutsets are provided to the layer that is promoted to the offscreen buffer to
        // extend its visual bounds
        // to avoid clipping the content drawn by its children.
        Box(
            Modifier.fillMaxSize().drawBehind {
                drawRect(
                    topLeft = Offset(100f, 100f),
                    brush = SolidColor(Color.Red),
                    size = Size(800f, 500f),
                )
            }
        )
    }
}

AnimateFadeIn

@Sampled
@Composable
fun AnimateFadeIn() {
    val animatedAlpha = remember { Animatable(0f) }
    Text(
        "Hello World",
        Modifier.graphicsLayer {
            alpha = animatedAlpha.value
            clip = true
        },
    )
    LaunchedEffect(animatedAlpha) { animatedAlpha.animateTo(1f) }
}