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

Modifier

@Stable interface Modifier
androidx.compose.ui.Modifier

An ordered, immutable collection of modifier elements that decorate or add behavior to Compose UI elements. For example, backgrounds, padding and click event listeners decorate or add behavior to rows, text or buttons.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text

Text(
    "Hello, World!",
    Modifier.padding(16.dp) // Outer padding; outside background
        .background(color = Color.Green) // Solid element background color
        .padding(16.dp) // Inner padding; inside background, around text
)
Modifier implementations should offer a fluent factory extension function on Modifier forcreating combined modifiers by starting from existing modifiers:
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding

class FancyModifier(val level: Float) : Modifier.Element

fun Modifier.fancy(level: Float) = this.then(FancyModifier(level))

Row(Modifier.fancy(1f).padding(10.dp)) {
    // content
}

Modifier elements may be combined using then. Order is significant; modifier elements that appear first will be applied first.

Composables that accept a Modifier as a parameter to be applied to the whole component represented by the composable function should name the parameter modifier and assign the parameter a default value of Modifier. It should appear as the first optional parameter in the parameter list; after all required parameters (except for trailing lambda parameters) but before any other parameters with default values. Any default modifiers desired by a composable function should come after the modifier parameter's value in the composable function's implementation, keeping Modifier as the default parameter value. For example:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding

@Composable
fun PaddedColumn(modifier: Modifier = Modifier) {
    Column(modifier.padding(10.dp)) {
        // ...
    }
}

The pattern above allows default modifiers to still be applied as part of the chain if a caller also supplies unrelated modifiers.

Composables that accept modifiers to be applied to a specific subcomponent foo should name the parameter fooModifier and follow the same guidelines above for default values and behavior. Subcomponent modifiers should be grouped together and follow the parent composable's modifier. For example:

import androidx.compose.foundation.layout.Row
import androidx.compose.material.Button
import androidx.compose.material.Text

@Composable
fun ButtonBar(
    onOk: () -> Unit,
    onCancel: () -> Unit,
    modifier: Modifier = Modifier,
    buttonModifier: Modifier = Modifier
) {
    Row(modifier) {
        Button(onCancel, buttonModifier) {
            Text("Cancel")
        }
        Button(onOk, buttonModifier) {
            Text("Ok")
        }
    }
}

Summary

Nested classes
companion

The companion object Modifier is the empty, default, or starter Modifier that contains no elements.

abstract

A single element contained within a Modifier chain.

Public methods
abstract Boolean
all(predicate: (Modifier.Element) -> Boolean)

Returns true if predicate returns true for all Elements in this Modifier or if this Modifier contains no Elements.

abstract Boolean
any(predicate: (Modifier.Element) -> Boolean)

Returns true if predicate returns true for any Element in this Modifier.

abstract R
foldIn(initial: R, operation: (R, Modifier.Element) -> R)

Accumulates a value starting with initial and applying operation to the current value and each element from outside in.

abstract R
foldOut(initial: R, operation: (Modifier.Element, R) -> R)

Accumulates a value starting with initial and applying operation to the current value and each element from inside out.

open operator Modifier
plus(other: Modifier)

Concatenates this modifier with another.

open infix Modifier
then(other: Modifier)

Concatenates this modifier with another.

Companion functions
Boolean
all(predicate: (Modifier.Element) -> Boolean)

Returns true if predicate returns true for all Elements in this Modifier or if this Modifier contains no Elements.

Boolean
any(predicate: (Modifier.Element) -> Boolean)

Returns true if predicate returns true for any Element in this Modifier.

R
foldIn(initial: R, operation: (R, Modifier.Element) -> R)

Accumulates a value starting with initial and applying operation to the current value and each element from outside in.

R
foldOut(initial: R, operation: (Modifier.Element, R) -> R)

Accumulates a value starting with initial and applying operation to the current value and each element from inside out.

operator Modifier
plus(other: Modifier)

Concatenates this modifier with another.

infix Modifier
then(other: Modifier)

Concatenates this modifier with another.

Extension functions
From androidx.compose.foundation.layout
Modifier
Modifier.absoluteOffset(x: Dp = 0.dp, y: Dp = 0.dp)

Offset the content by (x dp, y dp).

Modifier
Modifier.absoluteOffsetPx(x: State<Float> = mutableStateOf(0f), y: State<Float> = mutableStateOf(0f))

Offset the content by (x px, y px).

Modifier
Modifier.absolutePadding(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp)

Apply additional space along each edge of the content in Dp: left, top, right and bottom.

Modifier
Modifier.aspectRatio(@FloatRange(0.0, 3.4E38, false) ratio: Float, matchHeightConstraintsFirst: Boolean = false)

Attempts to size the content to match a specified aspect ratio by trying to match one of the incoming constraints in the following order: Constraints.maxWidth, Constraints.maxHeight, Constraints.minWidth, Constraints.minHeight if matchHeightConstraintsFirst is false (which is the default), or Constraints.maxHeight, Constraints.maxWidth, Constraints.minHeight, Constraints.minWidth if matchHeightConstraintsFirst is true.

Modifier
Modifier.defaultMinSizeConstraints(minWidth: Dp = Dp.Unspecified, minHeight: Dp = Dp.Unspecified)

Constrain the size of the wrapped layout only when it would be otherwise unconstrained: the minWidth and minHeight constraints are only applied when the incoming corresponding constraint is 0.

Modifier
Modifier.fillMaxHeight(@FloatRange(0.0, 1.0) fraction: Float = 1f)

Have the content fill (possibly only partially) the Constraints.maxHeight of the incoming measurement constraints, by setting the minimum height and the maximum height to be equal to the maximum height multiplied by fraction.

Modifier
Modifier.fillMaxSize(@FloatRange(0.0, 1.0) fraction: Float = 1f)

Have the content fill (possibly only partially) the Constraints.maxWidth and Constraints.maxHeight of the incoming measurement constraints, by setting the minimum width and the maximum width to be equal to the maximum width multiplied by fraction, as well as the minimum height and the maximum height to be equal to the maximum height multiplied by fraction.

Modifier
Modifier.fillMaxWidth(@FloatRange(0.0, 1.0) fraction: Float = 1f)

Have the content fill (possibly only partially) the Constraints.maxWidth of the incoming measurement constraints, by setting the minimum width and the maximum width to be equal to the maximum width multiplied by fraction.

Modifier
Modifier.height(height: Dp)

Declare the height of the content to be exactly heightdp.

Modifier
Modifier.heightIn(min: Dp = Dp.Unspecified, max: Dp = Dp.Unspecified)

Constrain the height of the content to be between mindp and maxdp.

Modifier
Modifier.offset(x: Dp = 0.dp, y: Dp = 0.dp)

Offset the content by (x dp, y dp).

Modifier
Modifier.offsetPx(x: State<Float> = mutableStateOf(0f), y: State<Float> = mutableStateOf(0f))

Offset the content by (x px, y px).

Modifier
Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp)

Apply additional space along each edge of the content in Dp: start, top, end and bottom.

Modifier
Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp)

Apply horizontal dp space along the left and right edges of the content, and vertical dp space along the top and bottom edges.

Modifier

Apply all dp of additional space along each edge of the content, left, top, right and bottom.

Modifier

Apply PaddingValues to the component as additional space along each edge of the content's left, top, right and bottom.

Modifier
Modifier.paddingFrom(alignmentLine: AlignmentLine, before: Dp = Dp.Unspecified, after: Dp = Dp.Unspecified)

A Modifier that can add padding to position the content according to specified distances from its bounds to an alignment line.

Modifier
Modifier.paddingFrom(alignmentLine: AlignmentLine, before: TextUnit = TextUnit.Inherit, after: TextUnit = TextUnit.Inherit)

A Modifier that can add padding to position the content according to specified distances from its bounds to an alignment line.

Modifier
Modifier.paddingFromBaseline(top: Dp = Dp.Unspecified, bottom: Dp = Dp.Unspecified)

A Modifier that positions the content in a layout such that the distance from the top of the layout to the baseline of the first line of text in the content is top, and the distance from the baseline of the last line of text in the content to the bottom of the layout is bottom.

Modifier
Modifier.paddingFromBaseline(top: TextUnit = TextUnit.Inherit, bottom: TextUnit = TextUnit.Inherit)

A Modifier that positions the content in a layout such that the distance from the top of the layout to the baseline of the first line of text in the content is top, and the distance from the baseline of the last line of text in the content to the bottom of the layout is bottom.

Modifier

Declare the preferred height of the content to be the same as the min or max intrinsic height of the content.

Modifier

Declare the preferred height of the content to be exactly heightdp.

Modifier
Modifier.preferredHeightIn(min: Dp = Dp.Unspecified, max: Dp = Dp.Unspecified)

Constrain the height of the content to be between mindp and maxdp as permitted by the incoming measurement Constraints.

Modifier

Declare the preferred size of the content to be exactly sizedp square.

Modifier
Modifier.preferredSize(width: Dp, height: Dp)

Declare the preferred size of the content to be exactly widthdp by heightdp.

Modifier
Modifier.preferredSizeIn(minWidth: Dp = Dp.Unspecified, minHeight: Dp = Dp.Unspecified, maxWidth: Dp = Dp.Unspecified, maxHeight: Dp = Dp.Unspecified)

Constrain the width of the content to be between minWidthdp and maxWidthdp and the height of the content to be between minHeight and maxHeight as permitted by the incoming measurement Constraints.

Modifier

Declare the preferred width of the content to be the same as the min or max intrinsic width of the content.

Modifier

Declare the preferred width of the content to be exactly widthdp.

Modifier
Modifier.preferredWidthIn(min: Dp = Dp.Unspecified, max: Dp = Dp.Unspecified)

Constrain the width of the content to be between mindp and maxdp as permitted by the incoming measurement Constraints.

Modifier
Modifier.relativePaddingFrom(alignmentLine: AlignmentLine, before: Dp = Dp.Unspecified, after: Dp = Dp.Unspecified)

Modifier
Modifier.size(size: Dp)

Declare the size of the content to be exactly