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

androidx.compose.ui

Interfaces

Alignment

An interface to position a point inside a 2D box.

ContentDrawScope

Receiver scope for drawing content into a layout, where the content can be drawn between other canvas operations.

DrawCacheModifier

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

DrawLayerModifier

A Modifier.Element that makes content draw into a draw layer.

DrawModifier

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

FocusObserverModifier

A modifier that can be used to observe focus state changes.

FocusRequesterModifier

A modifier that can be used to pass in a FocusRequester that can be used to request focus state changes.

Modifier

An ordered, immutable collection of modifier elements that decorate or add behavior to Compose UI elements.

Classes

BiasAbsoluteAlignment

An Alignment specified by bias: for example, a bias of -1 represents alignment to the left/top, a bias of 0 will represent centering, and a bias of 1 will represent right/bottom.

BiasAlignment

An Alignment specified by bias: for example, a bias of -1 represents alignment to the start/top, a bias of 0 will represent centering, and a bias of 1 will represent end/bottom.

CacheDrawScope

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

CombinedModifier

A node in a Modifier chain.

DrawResult

Holder to a callback to be invoked during draw operations.

TransformOrigin

A two-dimensional position represented as a fraction of the Layer's width and height

Top-level constants summary

const Float

Default camera distance for all layers

Top-level functions summary

TransformOrigin
TransformOrigin(pivotFractionX: Float, pivotFractionY: Float)

Constructs a TransformOrigin from the given fractional values from the Layer's width and height

Extension functions summary

For Modifier
Modifier
Modifier.composed(inspectorInfo: InspectorInfo.() -> Unit = NoInspectorInfo, factory: Modifier.() -> Modifier)

Declare a just-in-time composition of a Modifier that will be composed for each element it modifies.

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

Draw into a Canvas behind the modified content.

Modifier
Modifier.drawLayer(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)

Creates a DrawLayerModifier to have all content will be drawn into a new draw layer.

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

Add this modifier to a component to make it focusable.

Modifier
Modifier.focusObserver(onFocusChange: (FocusState) -> Unit)

Add this modifier to a component to observe focus state changes.

Modifier

Add this modifier to a component to observe changes to focus state.

Modifier

Creates a modifier that controls the drawing order for the children of the same layout parent.

For Composer
Modifier

Materialize any instance-specific composed modifiers for applying to a raw tree node.

Top-level constants

DefaultCameraDistance

const val DefaultCameraDistance: Float

Default camera distance for all layers

Value: 8.0f

Top-level functions

TransformOrigin

inline fun TransformOrigin(
    pivotFractionX: Float,
    pivotFractionY: Float
): TransformOrigin

Constructs a TransformOrigin from the given fractional values from the Layer's width and height

Extension functions

composed

fun Modifier.composed(
    inspectorInfo: InspectorInfo.() -> Unit = NoInspectorInfo,
    factory: Modifier.() -> Modifier
): Modifier

Declare a just-in-time composition of a Modifier that will be composed for each element it modifies. composed may be used to implement stateful modifiers that have instance-specific state for each modified element, allowing the same Modifier instance to be safely reused for multiple elements while maintaining element-specific state.

If inspectorInfo is specified this modifier will be visible to tools during development. Specify the name and arguments of the original modifier.

Example usage:

import androidx.compose.ui.composed
import androidx.compose.ui.platform.debugInspectorInfo

// let's create you own custom stateful modifier
fun Modifier.myColorModifier(color: Color) = composed (
    // pass inspector information for debug
    inspectorInfo = debugInspectorInfo {
        // name should match the name of the modifier
        name = "myColorModifier"
        // specify a single argument as the value when the argument name is irrelevant
        value = color
    },
    // pass your modifier implementation that resolved per modified element
    factory = {
        // add your modifier implementation here
        Modifier
    }
)
import androidx.compose.ui.composed
import androidx.compose.ui.platform.debugInspectorInfo

// let's create you own custom stateful modifier with multiple arguments
fun Modifier.myModifier(width: Dp, height: Dp, color: Color) = composed (
    // pass inspector information for debug
    inspectorInfo = debugInspectorInfo {
        // name should match the name of the modifier
        name = "myModifier"
        // add name and value of each argument
        properties["width"] = width
        properties["height"] = height
        properties["color"] = color
    },
    // pass your modifier implementation that resolved per modified element
    factory = {
        // add your modifier implementation here
        Modifier
    }
)
materialize must be called to create instance-specific modifiers if you are directlyapplying a Modifier to an element tree node.

drawBehind

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

Draw into a Canvas behind the modified content.

drawLayer

@Stable fun Modifier.drawLayer(
    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
): Modifier

Creates a DrawLayerModifier to have all content will be drawn into a new draw layer. The draw layer can be invalidated separately from parents. A drawLayer should be used when the content updates independently from anything above it to minimize the invalidated content.

drawLayer 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).

import androidx.compose.material.Text
import androidx.compose.ui.drawLayer

Text("Hello World", Modifier.drawLayer(alpha = 0.5f, clip = true))
Parameters
scaleX: Float = 1f DrawLayerModifier.scaleX
scaleY: Float = 1f DrawLayerModifier.scaleY
alpha: Float = 1f DrawLayerModifier.alpha
shadowElevation: Float = 0f DrawLayerModifier.shadowElevation
rotationX: Float = 0f DrawLayerModifier.rotationX
rotationY: Float = 0f DrawLayerModifier.rotationY
rotationZ: Float = 0f DrawLayerModifier.rotationZ
shape: Shape = RectangleShape DrawLayerModifier.shape
clip: Boolean = false DrawLayerModifier.clip

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.drawWithCache
import androidx.compose.ui.graphics.LinearGradient

Box(
    Modifier.drawWithCache {
        val gradient = LinearGradient(
            startX = 0.0f,
            startY = 0.0f,
            endX = size.width,
            endY = size.height,
            colors = listOf(Color.Red, Color.Blue)
        )
        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.drawWithCache
import androidx.compose.ui.graphics.LinearGradient

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 = LinearGradient(
            startX = 0.0f,
            startY = 0.0f,
            endX = size.width,
            endY = size.height,
            colors = if (toggle) colors1 else colors2
        )
        onDrawBehind {
            drawRect(gradient)
        }
    }
)
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.ui.drawWithCache
import androidx.compose.ui.graphics.LinearGradient
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 = LinearGradient(
            colors = listOf(Color.Red, Color.Blue),
            startX = 0f,
            startY = 0f,
            endX = 0f,
            endY = 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.

focus

fun Modifier.focus(): Modifier

Add this modifier to a component to make it focusable.

focusObserver

fun Modifier.focusObserver(onFocusChange: (FocusState) -> Unit): Modifier

Add this modifier to a component to observe focus state changes.

focusRequester

fun Modifier.focusRequester(focusRequester: FocusRequester): Modifier

Add this modifier to a component to observe changes to focus state.

materialize

fun Composer<*>.materialize(modifier: Modifier): Modifier

Materialize any instance-specific composed modifiers for applying to a raw tree node. Call right before setting the returned modifier on an emitted node. You almost certainly do not need to call this function directly.

zIndex

@Stable fun Modifier.zIndex(zIndex: Float): Modifier

Creates a modifier that controls the drawing order for the children of the same layout parent. A child with larger zIndex will be drawn on top of all the children with smaller zIndex. When children have the same zIndex the original order in which the items were added into the parent layout is applied.

Note that if there would be multiple zIndex modifiers applied for the same layout the sum of their values will be used as the final zIndex. If no zIndex were applied for the layout then the default zIndex is 0.

import androidx.compose.foundation.layout.Box
import androidx.compose.material.Text
import androidx.compose.ui.zIndex

Box {
    Text("Drawn second", Modifier.zIndex(1f))
    Text("Drawn first")
}