Google is committed to advancing racial equity for Black communities. See how.

androidx.compose.ui.draw

Interfaces

DrawCacheModifier

DrawModifier implementation that supports building a cache of objects to be referenced across draw calls

DrawModifier

A Modifier.Element that draws into the space of the layout.

Classes

CacheDrawScope

Handle to a drawing environment that enables caching of content based on the resolved size.

DrawResult

Holder to a callback to be invoked during draw operations.

Extension functions summary

For Modifier
Modifier
Modifier.alpha(@FloatRange(0.0, 1.0) alpha: Float)

Draw content with modified alpha that may be less than 1.

Modifier

Clip the content to shape.

Modifier

Clip the content to the bounds of a layer defined at this modifier.

Modifier
Modifier.drawBehind(onDraw: DrawScope.() -> Unit)

Draw into a Canvas behind the modified content.

Modifier
Modifier.drawOpacity(@FloatRange(0.0, 1.0) opacity: Float)

Draw content with modified alpha that may be less than 1.

Modifier
Modifier.drawShadow(elevation: Dp, shape: Shape = RectangleShape, clip: Boolean = elevation > 0.dp)

Creates a GraphicsLayerModifier that draws the shadow.

Modifier
Modifier.drawWithCache(onBuildDrawCache: CacheDrawScope.() -> DrawResult)

Draw into a DrawScope with content that is persisted across draw calls as long as the size of the drawing area is the same or any state objects that are read have not changed.

Modifier

Creates a DrawModifier that allows the developer to draw before or after the layout's contents.

Modifier
Modifier.paint(painter: Painter, sizeToIntrinsics: Boolean = true, alignment: Alignment = Alignment.Center, contentScale: ContentScale = ContentScale.Inside, alpha: Float = DefaultAlpha, colorFilter: ColorFilter? = null)

Paint the content using painter.

Modifier
Modifier.rotate(degrees: Float)

Sets the degrees the view is rotated around the center of the composable.

Modifier
Modifier.scale(scaleX: Float, scaleY: Float)

Scale the contents of the composable by the following scale factors along the horizontal and vertical axis respectively.

Modifier

Scale the contents of both the horizontal and vertical axis uniformly by the same scale factor.

Modifier
Modifier.shadow(elevation: Dp, shape: Shape = RectangleShape, clip: Boolean = elevation > 0.dp)

Creates a GraphicsLayerModifier that draws the shadow.

Extension functions

alpha

@Stable fun Modifier.alpha(@FloatRange(0.0, 1.0) alpha: Float): Modifier

Draw content with modified alpha that may be less than 1.

Usage of this API renders this composable into a separate graphics layer

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.ui.draw.alpha

Box(Modifier.preferredSize(100.dp).alpha(alpha = 0.5f).background(Color.Red))

See Also

Parameters
alpha: Float the fraction of children's alpha value.

clip

@Stable fun Modifier.clip(shape: Shape): Modifier

Clip the content to shape.

Parameters
shape: Shape the content will be clipped to this Shape.

clipToBounds

@Stable fun Modifier.clipToBounds(): Modifier

Clip the content to the bounds of a layer defined at this modifier.

drawBehind

fun Modifier.drawBehind(onDraw: DrawScope.() -> Unit): Modifier

Draw into a Canvas behind the modified content.

drawOpacity

@Stable fun Modifier.drawOpacity(@FloatRange(0.0, 1.0) opacity: Float): Modifier

Deprecated.

Draw content with modified alpha that may be less than 1.

Parameters
opacity: Float the fraction of children's alpha value.

drawShadow

@Stable fun Modifier.drawShadow(
    elevation: Dp,
    shape: Shape = RectangleShape,
    clip: Boolean = elevation > 0.dp
): Modifier

Deprecated.

Creates a GraphicsLayerModifier that draws the shadow. The elevation defines the visual depth of the physical object. The physical object has a shape specified by shape.

Note that elevation is only affecting the shadow size and doesn't change the drawing order. Use zIndex modifier if you want to draw the elements with larger elevation after all the elements with a smaller one.

Example usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.ui.draw.shadow

Box(
    Modifier.shadow(12.dp, RectangleShape)
        .preferredSize(100.dp, 100.dp)
)
Parameters
elevation: Dp The elevation for the shadow in pixels
shape: Shape = RectangleShape Defines a shape of the physical object
clip: Boolean = elevation > 0.dp When active, the content drawing clips to the shape.

drawWithCache

fun Modifier.drawWithCache(onBuildDrawCache: CacheDrawScope.() -> DrawResult): Modifier

Draw into a DrawScope with content that is persisted across draw calls as long as the size of the drawing area is the same or any state objects that are read have not changed. In the event that the drawing area changes, or the underlying state values that are being read change, this method is invoked again to recreate objects to be used during drawing

For example, a androidx.compose.ui.graphics.LinearGradient that is to occupy the full bounds of the drawing area can be created once the size has been defined and referenced for subsequent draw calls without having to re-allocate.

import androidx.compose.foundation.layout.Box
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset

Box(
    Modifier.drawWithCache {
        val gradient = Brush.linearGradient(
            colors = listOf(Color.Red, Color.Blue),
            start = Offset.Zero,
            end = Offset(size.width, size.height)
        )
        onDrawBehind {
            drawRect(gradient)
        }
    }
)
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset

val colors1 = listOf(Color.Red, Color.Blue)
val colors2 = listOf(Color.Yellow, Color.Green)
var toggle by remember { mutableStateOf(true) }
Box(
    Modifier.clickable { toggle = !toggle }.drawWithCache {
        val gradient = Brush.linearGradient(
            colors = if (toggle) colors1 else colors2,
            start = Offset.Zero,
            end = Offset(size.width, size.height)
        )
        onDrawBehind {
            drawRect(gradient)
        }
    }
)
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.Path
import androidx.compose.ui.graphics.vector.PathData
import androidx.compose.ui.graphics.vector.rememberVectorPainter

val vectorPainter = rememberVectorPainter(24.dp, 24.dp) { viewportWidth, viewportHeight ->
    Path(
        pathData = PathData {
            lineTo(viewportWidth, 0f)
            lineTo(0f, viewportHeight)
            close()
        },
        fill = SolidColor(Color.Black)
    )
}
Image(
    painter = vectorPainter,
    modifier = Modifier.size(120.dp).drawWithCache {
        val gradient = Brush.linearGradient(
            colors = listOf(Color.Red, Color.Blue),
            start = Offset.Zero,
            end = Offset(0f, size.height)
        )
        onDrawWithContent {
            drawContent()
            drawRect(gradient, blendMode = BlendMode.Plus)
        }
    }
)

drawWithContent

fun Modifier.drawWithContent(onDraw: ContentDrawScope.() -> Unit): Modifier

Creates a DrawModifier that allows the developer to draw before or after the layout's contents. It also allows the modifier to adjust the layout's canvas.

paint

fun Modifier.paint(
    painter: Painter,