androidx.compose.ui.graphics.layer

Classes

CompositingStrategy

Determines when to render the contents of a layer into an offscreen buffer before being drawn to the destination.

Cmn
GraphicsLayer

Drawing layer used to record drawing commands in a displaylist as well as additional properties that affect the rendering of the display list.

Cmn
android

Constants summary

const Float

Default camera distance for all layers

Cmn

Extension functions summary

Unit

Draw the provided GraphicsLayer into the current DrawScope.

Cmn
Unit

Configures an outline for this GraphicsLayer based on the provided Outline object.

Cmn

Constants

DefaultCameraDistance

const val DefaultCameraDistance = 8.0f: Float

Default camera distance for all layers

Extension functions

drawLayer

fun DrawScope.drawLayer(graphicsLayer: GraphicsLayer): Unit

Draw the provided GraphicsLayer into the current DrawScope. The GraphicsLayer provided must have GraphicsLayer.record invoked on it otherwise no visual output will be seen in the rendered result.

import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.layer.drawLayer
import androidx.compose.ui.unit.IntOffset

// Build the layer with the density, layout direction and size from the DrawScope
// and position the top left to be 20 pixels from the left and 30 pixels from the top.
// This will the bounds of the layer with a red rectangle
layer.apply {
    record { drawRect(Color.Red) }
    this.topLeft = IntOffset(20, 30)
}

// Draw the layer into the provided DrawScope
drawLayer(layer)
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.layer.drawLayer
import androidx.compose.ui.unit.IntSize

// Create a 200 x 200 pixel layer that has a red rectangle drawn in the lower right
// corner.
layer.apply {
    record(size = IntSize(200, 200)) {
        drawRect(Color.Red, topLeft = Offset(size.width / 2f, size.height / 2f))
    }
    // Scale the layer by 1.5x in both the x and y axis relative to the bottom
    // right corner
    scaleX = 1.5f
    scaleY = 1.5f
    pivotOffset = Offset(this.size.width.toFloat(), this.size.height.toFloat())
}

// Draw the layer into the provided DrawScope
drawLayer(layer)
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.layer.drawLayer

// Create a layer with the same configuration as the destination DrawScope
// and draw a red rectangle in the layer
layer.apply {
    record { drawRect(Color.Red) }
    // Apply a ColorFilter that will tint the contents of the layer to blue
    // when it is drawn into the destination DrawScope
    colorFilter = ColorFilter.tint(Color.Blue)
}

drawLayer(layer)
import androidx.compose.ui.graphics.BlurEffect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.inset
import androidx.compose.ui.graphics.layer.drawLayer

// Create a layer sized to the destination draw scope that is comprised
// of an inset red rectangle
layer.apply {
    record { inset(20f, 20f) { drawRect(Color.Red) } }
    // Configure a blur to the contents of the layer that is applied
    // when drawn to the destination DrawScope
    renderEffect = BlurEffect(20f, 20f, TileMode.Decal)
}

drawLayer(layer)
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.inset
import androidx.compose.ui.graphics.layer.drawLayer

// Create a layer sized to the destination draw scope that is comprised
// of an inset red rectangle
layer.apply {
    record { inset(20f, 20f) { drawRect(Color.Red) } }
    // Renders the content of the layer with 50% alpha when it is drawn
    // into the destination
    alpha = 0.5f
}

drawLayer(layer)
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.layer.drawLayer

layer.apply {
    record { drawRect(Color.Yellow) }
    // Rotates the yellow rect 45f clockwise relative to the x axis
    rotationX = 45f
}

drawLayer(layer)
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.layer.drawLayer

layer.apply {
    record { drawRect(Color.Yellow) }
    // Rotates the yellow rect 45f clockwise relative to the y axis
    rotationY = 45f
    cameraDistance = 5.0f
}

drawLayer(layer)

setOutline

fun GraphicsLayer.setOutline(outline: Outline): Unit

Configures an outline for this GraphicsLayer based on the provided Outline object.

When GraphicsLayer.shadowElevation is non-zero a shadow is produced using a provided Outline. Additionally if GraphicsLayer.clip is true, the contents of this GraphicsLayer will be clipped to this geometry.

Parameters
outline: Outline

an Outline to apply for the layer.