androidx.compose.ui.draw

Kotlin |Java

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	`Modifier.clip(shape: Shape)` Clip the content to shape.
Modifier	`Modifier.clipToBounds()` 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	`Modifier.drawWithContent(onDraw: ContentDrawScope.() -> Unit)` 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	`Modifier.scale(scale: Float)` 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

graphicsLayer

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,