graphicsLayer

Compose Modifier

Common

Deprecated Replace with graphicsLayer that consumes an optional RenderEffect parameter and shadow color parameters

fun Modifier.graphicsLayer(
    scaleX: Float = 1f,
    scaleY: Float = 1f,
    alpha: Float = 1f,
    translationX: Float = 0f,
    translationY: Float = 0f,
    shadowElevation: Float = 0f,
    rotationX: Float = 0f,
    rotationY: Float = 0f,
    rotationZ: Float = 0f,
    cameraDistance: Float = DefaultCameraDistance,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
    shape: Shape = RectangleShape,
    clip: Boolean = false,
) =
    graphicsLayer(
        scaleX = scaleX,
        scaleY = scaleY,
        alpha = alpha,
        translationX = translationX,
        translationY = translationY,
        shadowElevation = shadowElevation,
        rotationX = rotationX,
        rotationY = rotationY,
        rotationZ = rotationZ,
        cameraDistance = cameraDistance,
        transformOrigin = transformOrigin,
        shape = shape,
        clip = clip,
        renderEffect = null,
        blendMode = BlendMode.SrcOver,
        colorFilter = null,
    )

A Modifier.Element that makes content draw into a draw layer. The draw layer can be invalidated separately from parents. A graphicsLayer should be used when the content updates independently from anything above it to minimize the invalidated content.

graphicsLayer can also be used to apply effects to content, such as scaling (scaleX, scaleY), rotation (rotationX, rotationY, rotationZ), opacity (alpha), shadow (shadowElevation, shape), and clipping (clip, shape).

Note that if you provide a non-zero shadowElevation and if the passed shape is concave the shadow will not be drawn on Android versions less than 10.

Also note that alpha values less than 1.0f will have their contents implicitly clipped to their bounds. This is because an intermediate compositing layer is created to render contents into first before being drawn into the destination with the desired alpha. This layer is sized to the bounds of the composable this modifier is configured on, and contents outside of these bounds are omitted.

If the layer parameters are backed by a androidx.compose.runtime.State or an animated value prefer an overload with a lambda block on GraphicsLayerScope as reading a state inside the block will only cause the layer properties update without triggering recomposition and relayout.

Parameters

scaleXsee GraphicsLayerScope.scaleX
scaleYsee GraphicsLayerScope.scaleY
alphasee GraphicsLayerScope.alpha
translationXsee GraphicsLayerScope.translationX
translationYsee GraphicsLayerScope.translationY
shadowElevationsee GraphicsLayerScope.shadowElevation
rotationXsee GraphicsLayerScope.rotationX
rotationYsee GraphicsLayerScope.rotationY
rotationZsee GraphicsLayerScope.rotationZ
cameraDistancesee GraphicsLayerScope.cameraDistance
transformOriginsee GraphicsLayerScope.transformOrigin
shapesee GraphicsLayerScope.shape
clipsee GraphicsLayerScope.clip
Common

Deprecated Replace with graphicsLayer that consumes shadow color parameters

fun Modifier.graphicsLayer(
    scaleX: Float = 1f,
    scaleY: Float = 1f,
    alpha: Float = 1f,
    translationX: Float = 0f,
    translationY: Float = 0f,
    shadowElevation: Float = 0f,
    rotationX: Float = 0f,
    rotationY: Float = 0f,
    rotationZ: Float = 0f,
    cameraDistance: Float = DefaultCameraDistance,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
    shape: Shape = RectangleShape,
    clip: Boolean = false,
    renderEffect: RenderEffect? = null,
) =
    graphicsLayer(
        scaleX = scaleX,
        scaleY = scaleY,
        alpha = alpha,
        translationX = translationX,
        translationY = translationY,
        shadowElevation = shadowElevation,
        ambientShadowColor = DefaultShadowColor,
        spotShadowColor = DefaultShadowColor,
        rotationX = rotationX,
        rotationY = rotationY,
        rotationZ = rotationZ,
        cameraDistance = cameraDistance,
        transformOrigin = transformOrigin,
        shape = shape,
        clip = clip,
        renderEffect = renderEffect,
        compositingStrategy = CompositingStrategy.Auto,
        blendMode = BlendMode.SrcOver,
        colorFilter = null,
    )

A Modifier.Element that makes content draw into a draw layer. The draw layer can be invalidated separately from parents. A graphicsLayer should be used when the content updates independently from anything above it to minimize the invalidated content.

graphicsLayer can also be used to apply effects to content, such as scaling (scaleX, scaleY), rotation (rotationX, rotationY, rotationZ), opacity (alpha), shadow (shadowElevation, shape), clipping (clip, shape), as well as altering the result of the layer with RenderEffect.

Note that if you provide a non-zero shadowElevation and if the passed shape is concave the shadow will not be drawn on Android versions less than 10.

Also note that alpha values less than 1.0f will have their contents implicitly clipped to their bounds. This is because an intermediate compositing layer is created to render contents into first before being drawn into the destination with the desired alpha. This layer is sized to the bounds of the composable this modifier is configured on, and contents outside of these bounds are omitted.

If the layer parameters are backed by a androidx.compose.runtime.State or an animated value prefer an overload with a lambda block on GraphicsLayerScope as reading a state inside the block will only cause the layer properties update without triggering recomposition and relayout.

Parameters

scaleXsee GraphicsLayerScope.scaleX
scaleYsee GraphicsLayerScope.scaleY
alphasee GraphicsLayerScope.alpha
translationXsee GraphicsLayerScope.translationX
translationYsee GraphicsLayerScope.translationY
shadowElevationsee GraphicsLayerScope.shadowElevation
rotationXsee GraphicsLayerScope.rotationX
rotationYsee GraphicsLayerScope.rotationY
rotationZsee GraphicsLayerScope.rotationZ
cameraDistancesee GraphicsLayerScope.cameraDistance
transformOriginsee GraphicsLayerScope.transformOrigin
shapesee GraphicsLayerScope.shape
clipsee GraphicsLayerScope.clip
renderEffectsee GraphicsLayerScope.renderEffect
Common

Deprecated Replace with graphicsLayer that consumes a compositing strategy

fun Modifier.graphicsLayer(
    scaleX: Float = 1f,
    scaleY: Float = 1f,
    alpha: Float = 1f,
    translationX: Float = 0f,
    translationY: Float = 0f,
    shadowElevation: Float = 0f,
    rotationX: Float = 0f,
    rotationY: Float = 0f,
    rotationZ: Float = 0f,
    cameraDistance: Float = DefaultCameraDistance,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
    shape: Shape = RectangleShape,
    clip: Boolean = false,
    renderEffect: RenderEffect? = null,
    ambientShadowColor: Color = DefaultShadowColor,
    spotShadowColor: Color = DefaultShadowColor,
) =
    graphicsLayer(
        scaleX,
        scaleY,
        alpha,
        translationX,
        translationY,
        shadowElevation,
        rotationX,
        rotationY,
        rotationZ,
        cameraDistance,
        transformOrigin,
        shape,
        clip,
        renderEffect,
        ambientShadowColor,
        spotShadowColor,
        CompositingStrategy.Auto,
        BlendMode.SrcOver,
        null,
    )

A Modifier.Element that makes content draw into a draw layer. The draw layer can be invalidated separately from parents. A graphicsLayer should be used when the content updates independently from anything above it to minimize the invalidated content.

graphicsLayer can also be used to apply effects to content, such as scaling (scaleX, scaleY), rotation (rotationX, rotationY, rotationZ), opacity (alpha), shadow (shadowElevation, shape), clipping (clip, shape), as well as altering the result of the layer with RenderEffect. Shadow color and ambient colors can be modified by configuring the spotShadowColor and ambientShadowColor respectively.

Note that if you provide a non-zero shadowElevation and if the passed shape is concave the shadow will not be drawn on Android versions less than 10.

Also note that alpha values less than 1.0f will have their contents implicitly clipped to their bounds. This is because an intermediate compositing layer is created to render contents into first before being drawn into the destination with the desired alpha. This layer is sized to the bounds of the composable this modifier is configured on, and contents outside of these bounds are omitted.

If the layer parameters are backed by a androidx.compose.runtime.State or an animated value prefer an overload with a lambda block on GraphicsLayerScope as reading a state inside the block will only cause the layer properties update without triggering recomposition and relayout.

Parameters

scaleXsee GraphicsLayerScope.scaleX
scaleYsee GraphicsLayerScope.scaleY
alphasee GraphicsLayerScope.alpha
translationXsee GraphicsLayerScope.translationX
translationYsee GraphicsLayerScope.translationY
shadowElevationsee GraphicsLayerScope.shadowElevation
rotationXsee GraphicsLayerScope.rotationX
rotationYsee GraphicsLayerScope.rotationY
rotationZsee GraphicsLayerScope.rotationZ
cameraDistancesee GraphicsLayerScope.cameraDistance
transformOriginsee GraphicsLayerScope.transformOrigin
shapesee GraphicsLayerScope.shape
clipsee GraphicsLayerScope.clip
renderEffectsee GraphicsLayerScope.renderEffect
ambientShadowColorsee GraphicsLayerScope.ambientShadowColor
spotShadowColorsee GraphicsLayerScope.spotShadowColor
Common

Deprecated Replace with graphicsLayer that consumes a blend mode and a color filter

fun Modifier.graphicsLayer(
    scaleX: Float = 1f,
    scaleY: Float = 1f,
    alpha: Float = 1f,
    translationX: Float = 0f,
    translationY: Float = 0f,
    shadowElevation: Float = 0f,
    rotationX: Float = 0f,
    rotationY: Float = 0f,
    rotationZ: Float = 0f,
    cameraDistance: Float = DefaultCameraDistance,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
    shape: Shape = RectangleShape,
    clip: Boolean = false,
    renderEffect: RenderEffect? = null,
    ambientShadowColor: Color = DefaultShadowColor,
    spotShadowColor: Color = DefaultShadowColor,
    compositingStrategy: CompositingStrategy = CompositingStrategy.Auto,
) =
    graphicsLayer(
        scaleX,
        scaleY,
        alpha,
        translationX,
        translationY,
        shadowElevation,
        rotationX,
        rotationY,
        rotationZ,
        cameraDistance,
        transformOrigin,
        shape,
        clip,
        renderEffect,
        ambientShadowColor,
        spotShadowColor,
        compositingStrategy,
        BlendMode.SrcOver,
        null,
    )

A Modifier.Element that makes content draw into a draw layer. The draw layer can be invalidated separately from parents. A graphicsLayer should be used when the content updates independently from anything above it to minimize the invalidated content.

graphicsLayer can also be used to apply effects to content, such as scaling (scaleX, scaleY), rotation (rotationX, rotationY, rotationZ), opacity (alpha), shadow (shadowElevation, shape), clipping (clip, shape), as well as altering the result of the layer with RenderEffect. Shadow color and ambient colors can be modified by configuring the spotShadowColor and ambientShadowColor respectively.

CompositingStrategy determines whether or not the contents of this layer are rendered into an offscreen buffer. This is useful in order to optimize alpha usages with CompositingStrategy.ModulateAlpha which will skip the overhead of an offscreen buffer but can generate different rendering results depending on whether or not the contents of the layer are overlapping. Similarly leveraging CompositingStrategy.Offscreen is useful in situations where creating an offscreen buffer is preferred usually in conjunction with BlendMode usage.

Note that if you provide a non-zero shadowElevation and if the passed shape is concave the shadow will not be drawn on Android versions less than 10.

Also note that alpha values less than 1.0f will have their contents implicitly clipped to their bounds unless CompositingStrategy.ModulateAlpha is specified. This is because an intermediate compositing layer is created to render contents into first before being drawn into the destination with the desired alpha. This layer is sized to the bounds of the composable this modifier is configured on, and contents outside of these bounds are omitted.

If the layer parameters are backed by a androidx.compose.runtime.State or an animated value prefer an overload with a lambda block on GraphicsLayerScope as reading a state inside the block will only cause the layer properties update without triggering recomposition and relayout.

Parameters

scaleXsee GraphicsLayerScope.scaleX
scaleYsee GraphicsLayerScope.scaleY
alphasee GraphicsLayerScope.alpha
translationXsee GraphicsLayerScope.translationX
translationYsee GraphicsLayerScope.translationY
shadowElevationsee GraphicsLayerScope.shadowElevation
rotationXsee GraphicsLayerScope.rotationX
rotationYsee GraphicsLayerScope.rotationY
rotationZsee GraphicsLayerScope.rotationZ
cameraDistancesee GraphicsLayerScope.cameraDistance
transformOriginsee GraphicsLayerScope.transformOrigin
shapesee GraphicsLayerScope.shape
clipsee GraphicsLayerScope.clip
renderEffectsee GraphicsLayerScope.renderEffect
ambientShadowColorsee GraphicsLayerScope.ambientShadowColor
spotShadowColorsee GraphicsLayerScope.spotShadowColor
compositingStrategysee GraphicsLayerScope.compositingStrategy
Common
fun Modifier.graphicsLayer(
    scaleX: Float = 1f,
    scaleY: Float = 1f,
    alpha: Float = 1f,
    translationX: Float = 0f,
    translationY: Float = 0f,
    shadowElevation: Float = 0f,
    rotationX: Float = 0f,
    rotationY: Float = 0f,
    rotationZ: Float = 0f,
    cameraDistance: Float = DefaultCameraDistance,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
    shape: Shape = RectangleShape,
    clip: Boolean = false,
    renderEffect: RenderEffect? = null,
    ambientShadowColor: Color = DefaultShadowColor,
    spotShadowColor: Color = DefaultShadowColor,
    compositingStrategy: CompositingStrategy = CompositingStrategy.Auto,
    blendMode: BlendMode = BlendMode.SrcOver,
    colorFilter: ColorFilter? = null,
) =
    this then
        GraphicsLayerElement(
            scaleX,
            scaleY,
            alpha,
            translationX,
            translationY,
            shadowElevation,
            rotationX,
            rotationY,
            rotationZ,
            cameraDistance,
            transformOrigin,
            shape,
            clip,
            renderEffect,
            ambientShadowColor,
            spotShadowColor,
            compositingStrategy,
            blendMode,
            colorFilter,
        )

A Modifier.Element that makes content draw into a draw layer. The draw layer can be invalidated separately from parents. A graphicsLayer should be used when the content updates independently from anything above it to minimize the invalidated content.

graphicsLayer can also be used to apply effects to content, such as scaling (scaleX, scaleY), rotation (rotationX, rotationY, rotationZ), opacity (alpha), shadow (shadowElevation, shape), clipping (clip, shape), as well as altering the result of the layer with RenderEffect. Shadow color and ambient colors can be modified by configuring the spotShadowColor and ambientShadowColor respectively.

CompositingStrategy determines whether or not the contents of this layer are rendered into an offscreen buffer. This is useful in order to optimize alpha usages with CompositingStrategy.ModulateAlpha which will skip the overhead of an offscreen buffer but can generate different rendering results depending on whether or not the contents of the layer are overlapping. Similarly leveraging CompositingStrategy.Offscreen is useful in situations where creating an offscreen buffer is preferred usually in conjunction with BlendMode usage.

Note that if you provide a non-zero shadowElevation and if the passed shape is concave the shadow will not be drawn on Android versions less than 10.

Also note that alpha values less than 1.0f will have their contents implicitly clipped to their bounds unless CompositingStrategy.ModulateAlpha is specified. This is because an intermediate compositing layer is created to render contents into first before being drawn into the destination with the desired alpha. This layer is sized to the bounds of the composable this modifier is configured on, and contents outside of these bounds are omitted.

If the layer parameters are backed by a androidx.compose.runtime.State or an animated value prefer an overload with a lambda block on GraphicsLayerScope as reading a state inside the block will only cause the layer properties update without triggering recomposition and relayout.

Parameters

scaleXsee GraphicsLayerScope.scaleX
scaleYsee GraphicsLayerScope.scaleY
alphasee GraphicsLayerScope.alpha
translationXsee GraphicsLayerScope.translationX
translationYsee GraphicsLayerScope.translationY
shadowElevationsee GraphicsLayerScope.shadowElevation
rotationXsee GraphicsLayerScope.rotationX
rotationYsee GraphicsLayerScope.rotationY
rotationZsee GraphicsLayerScope.rotationZ
cameraDistancesee GraphicsLayerScope.cameraDistance
transformOriginsee GraphicsLayerScope.transformOrigin
shapesee GraphicsLayerScope.shape
clipsee GraphicsLayerScope.clip
renderEffectsee GraphicsLayerScope.renderEffect
ambientShadowColorsee GraphicsLayerScope.ambientShadowColor
spotShadowColorsee GraphicsLayerScope.spotShadowColor
compositingStrategysee GraphicsLayerScope.compositingStrategy
blendModesee GraphicsLayerScope.blendMode
colorFiltersee GraphicsLayerScope.colorFilter
Common
fun Modifier.graphicsLayer(block: GraphicsLayerScope.() -> Unit): Modifier

A Modifier.Node that makes content draw into a draw layer. The draw layer can be invalidated separately from parents. A graphicsLayer should be used when the content updates independently from anything above it to minimize the invalidated content.

graphicsLayer can be used to apply effects to content, such as scaling, rotation, opacity, shadow, and clipping. Prefer this version when you have layer properties backed by a androidx.compose.runtime.State or an animated value as reading a state inside block will only cause the layer properties update without triggering recomposition and relayout.

Parameters

blockblock on GraphicsLayerScope where you define the layer properties.

Code Examples

ChangeOpacity

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

CompositingStrategyModulateAlpha

@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) }
    }
}

AnimateFadeIn

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