androidx.compose.foundation.layout

Kotlin |Java

Interfaces

BoxScope	A BoxScope provides a scope for the children of a Box.
ColumnScope	Scope for the children of Column.
ConstraintSet	Immutable description of the constraints used to layout the children of a ConstraintLayout.
Dimension	Represents a dimension that can be assigned to the width or height of a ConstraintLayoutConstrainedLayoutReference.
RowScope	Scope for the children of Row.

Classes

ChainStyle	The style of a horizontal or vertical chain.
ConstrainedLayoutReference	Represents a layout within a ConstraintLayout.
ConstrainScope	Scope used by Modifier.constrainAs.
ConstraintLayoutBaseScope	Common scope for ConstraintLayoutScope and ConstraintSetScope, the content being shared between the inline DSL API and the ConstraintSet-based API.
ConstraintLayoutScope	Scope used by the inline DSL of ConstraintLayout.
ConstraintSetScope	Scope used by the ConstraintSet DSL.
DpConstraints	Similar to Constraints, but with constraint values expressed in Dp.
PaddingValues	Describes a padding to be applied along the edges inside a box.
State	The state of the ConstraintLayout solver.

Type-aliases

FlowMainAxisAlignment
InnerPadding
StackScope

Annotations

ExperimentalLayout
InternalLayoutApi
LayoutScopeMarker

Enums

FlowCrossAxisAlignment	Used to specify the alignment of a layout's children, in cross axis direction.
IntrinsicSize	Intrinsic size used in preferredWidth or preferredHeight which can refer to width or height.
MainAxisAlignment	Used to specify the alignment of a layout's children, in main axis direction.
SizeMode	Used to specify how a layout chooses its own size when multiple behaviors are possible.

Top-level functions summary

Unit	Box(modifier: Modifier = Modifier, alignment: Alignment = Alignment.TopStart, children: BoxScope.() -> Unit) A layout composable that positions its children relative to its edges.
Unit	Box(modifier: Modifier) A convenience box with no content that can participate in layout, drawing, pointer input due to the modifier applied to it.
Unit	Column(modifier: Modifier = Modifier, verticalArrangement: Arrangement.Vertical = Arrangement.Top, horizontalAlignment: Alignment.Horizontal = Alignment.Start, children: ColumnScope.() -> Unit) A layout composable that places its children in a vertical sequence.
Unit	ConstraintLayout(modifier: Modifier = Modifier, children: ConstraintLayoutScope.() -> Unit) Layout that positions its children according to the constraints between them.
Unit	ConstraintLayout(constraintSet: ConstraintSet, modifier: Modifier = Modifier, children: () -> Unit) Layout that positions its children according to the constraints between them.
ConstraintSet	ConstraintSet(description: ConstraintSetScope.() -> Unit) Creates a ConstraintSet.
Unit	FlowColumn(mainAxisSize: SizeMode = SizeMode.Wrap, mainAxisAlignment: FlowMainAxisAlignment = FlowMainAxisAlignment.Start, mainAxisSpacing: Dp = 0.dp, crossAxisAlignment: FlowCrossAxisAlignment = FlowCrossAxisAlignment.Start, crossAxisSpacing: Dp = 0.dp, lastLineMainAxisAlignment: FlowMainAxisAlignment = mainAxisAlignment, children: () -> Unit) A composable that places its children in a vertical flow.
Unit	FlowRow(mainAxisSize: SizeMode = SizeMode.Wrap, mainAxisAlignment: FlowMainAxisAlignment = FlowMainAxisAlignment.Start, mainAxisSpacing: Dp = 0.dp, crossAxisAlignment: FlowCrossAxisAlignment = FlowCrossAxisAlignment.Start, crossAxisSpacing: Dp = 0.dp, lastLineMainAxisAlignment: FlowMainAxisAlignment = mainAxisAlignment, children: () -> Unit) A composable that places its children in a horizontal flow.
Unit	MaxIntrinsicHeight(children: () -> Unit) Layout composable that forces its child to be as tall as its max intrinsic height.
Unit	MaxIntrinsicWidth(children: () -> Unit) Layout composable that forces its child to be as wide as its max intrinsic width.
Unit	MinIntrinsicHeight(children: () -> Unit) Layout composable that forces its child to be as tall as its min intrinsic height.
Unit	MinIntrinsicWidth(children: () -> Unit) Layout composable that forces its child to be as wide as its min intrinsic width.
Unit	Row(modifier: Modifier = Modifier, horizontalArrangement: Arrangement.Horizontal = Arrangement.Start, verticalAlignment: Alignment.Vertical = Alignment.Top, children: RowScope.() -> Unit) A layout composable that places its children in a horizontal sequence.
Unit	Spacer(modifier: Modifier) Component that represents an empty space layout, whose size can be defined using the LayoutWidth, LayoutHeight and LayoutSize modifiers.
Unit	Stack(modifier: Modifier = Modifier, alignment: Alignment = Alignment.TopStart, children: BoxScope.() -> Unit)

Extension functions summary

For Density
Constraints	Density.Constraints(dpConstraints: DpConstraints) Creates the Constraints corresponding to the current DpConstraints.
DpConstraints	Density.DpConstraints(constraints: Constraints) Creates the DpConstraints corresponding to the current Constraints.

For Modifier
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) 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.
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	Modifier.padding(all: Dp) Apply all dp of additional space along each edge of the content, left, top, right and bottom.
Modifier	Modifier.padding(padding: PaddingValues) Apply PaddingValues to the component as additional space along each edge of the content's left, top, right and bottom.
Modifier	Modifier.preferredHeight(intrinsicSize: IntrinsicSize) Declare the preferred height of the content to be the same as the min or max intrinsic height of the content.
Modifier	Modifier.preferredHeight(height: Dp) 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	Modifier.preferredSize(size: Dp) 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(constraints: DpConstraints) Constrain the size of the content to be within constraints as permitted by the incoming measurement Constraints.
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	Modifier.preferredWidth(intrinsicSize: IntrinsicSize) Declare the preferred width of the content to be the same as the min or max intrinsic width of the content.
Modifier	Modifier.preferredWidth(width: Dp) 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) A Modifier that can add padding to position the content according to specified distances from its bounds to an alignment line.
Modifier	Modifier.size(size: Dp) Declare the size of the content to be exactly sizedp width and height.
Modifier	Modifier.size(width: Dp, height: Dp) Declare the size of the content to be exactly widthdp and heightdp.
Modifier	Modifier.sizeIn(constraints: DpConstraints) Constrain the size of the content to be within constraints.
Modifier	Modifier.sizeIn(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 minHeightdp and maxHeightdp.
Modifier	Modifier.width(width: Dp) Declare the width of the content to be exactly widthdp.
Modifier	Modifier.widthIn(min: Dp = Dp.Unspecified, max: Dp = Dp.Unspecified) Constrain the width of the content to be between mindp and maxdp.
Modifier	Modifier.wrapContentHeight(align: Alignment.Vertical = Alignment.CenterVertically, unbounded: Boolean = false) Allow the content to measure at its desired height without regard for the incoming measurement minimum height constraint, and, if unbounded is true, also without regard for the incoming measurement maximum height constraint.
Modifier	Modifier.wrapContentSize(align: Alignment = Alignment.Center, unbounded: Boolean = false) Allow the content to measure at its desired size without regard for the incoming measurement minimum width or minimum height constraints, and, if unbounded is true, also without regard for the incoming maximum constraints.
Modifier	Modifier.wrapContentWidth(align: Alignment.Horizontal = Alignment.CenterHorizontally, unbounded: Boolean = false) Allow the content to measure at its desired width without regard for the incoming measurement minimum width constraint, and, if unbounded is true, also without regard for the incoming measurement maximum width constraint.

For Coercible
Dimension.MaxCoercible	Dimension.Coercible.atLeast(dp: Dp) Sets the lower bound of the current Dimension to a fixed dp value.
Dimension.MinCoercible	Dimension.Coercible.atMost(dp: Dp) Sets the upper bound of the current Dimension to a fixed dp value.

For MinCoercible
Dimension	Dimension.MinCoercible.atLeastWrapContent(dp: Dp) Sets the lower bound of the current Dimension to a fixed dp value.

For MaxCoercible
Dimension	Dimension.MaxCoercible.atMost(dp: Dp) Sets the upper bound of the current Dimension to a fixed dp value.

For DpConstraints
DpConstraints	DpConstraints.enforce(otherConstraints: DpConstraints) Returns the result of coercing the current constraints in a different set of constraints.
DpConstraints	DpConstraints.offset(horizontal: Dp = 0.dp, vertical: Dp = 0.dp) Returns the DpConstraints obtained by offsetting the current instance with the given values.

Extension properties summary

For Coercible
Dimension.MaxCoercible	Dimension.Coercible.atLeastWrapContent() Sets the lower bound of the current Dimension to be the wrap content size of the child.
Dimension.MinCoercible	Dimension.Coercible.atMostWrapContent() Sets the upper bound of the current Dimension to be the wrap content size of the child.

For MinCoercible
Dimension	Dimension.MinCoercible.atLeastWrapContent() Sets the lower bound of the current Dimension to be the wrap content size of the child.

For MaxCoercible
Dimension	Dimension.MaxCoercible.atMostWrapContent() Sets the upper bound of the current Dimension to be the Wrap size of the child.

For DpConstraints
Boolean	DpConstraints.hasBoundedHeight() Whether or not the upper bound on the maximum height.
Boolean	DpConstraints.hasBoundedWidth() Whether or not the upper bound on the maximum width.
Boolean	DpConstraints.hasFixedHeight() Whether there is exactly one height value that satisfies the constraints.
Boolean	DpConstraints.hasFixedWidth() Whether there is exactly one width value that satisfies the constraints.
Boolean	DpConstraints.isZero() Whether the area of a component respecting these constraints will definitely be 0.
Boolean	DpConstraints.satisfiable() Whether there is any size that satisfies the current constraints.

Top-level functions

Box

@Composable fun Box(
    modifier: Modifier = Modifier, 
    alignment: Alignment = Alignment.TopStart, 
    children: BoxScope.() -> Unit
): Unit

A layout composable that positions its children relative to its edges. The component is useful for drawing children that overlap. The children will always be drawn in the order they are specified in the body of the Box. When children are smaller than the parent, by default they will be positioned inside the Box according to the alignment. If individual alignment of the children is needed, apply the BoxScope.align modifier to a child to specify its alignment.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.preferredSize

Box {
    Box(Modifier.fillMaxSize().background(Color.Cyan))
    Box(
        Modifier.matchParentSize()
            .padding(top = 20.dp, bottom = 20.dp)
            .background(Color.Yellow)
    )
    Box(
        Modifier.matchParentSize()
            .padding(40.dp)
            .background(Color.Magenta)
    )
    Box(
        Modifier.align(Alignment.Center)
            .preferredSize(300.dp, 300.dp)
            .background(Color.Green)
    )
    Box(
        Modifier.align(Alignment.TopStart)
            .preferredSize(150.dp, 150.dp)
            .background(Color.Red)
    )
    Box(
        Modifier.align(Alignment.BottomEnd)
            .preferredSize(150.dp, 150.dp)
            .background(Color.Blue)
    )
}

Parameters
modifier: Modifier = Modifier	The modifier to be applied to the layout.
alignment: Alignment = Alignment.TopStart	The default alignment inside the Box.

Box

@Composable fun Box(modifier: Modifier): Unit

A convenience box with no content that can participate in layout, drawing, pointer input due to the modifier applied to it.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.preferredSize

Box {
    Box(Modifier.fillMaxSize().background(Color.Cyan))
    Box(
        Modifier.matchParentSize()
            .padding(top = 20.dp, bottom = 20.dp)
            .background(Color.Yellow)
    )
    Box(
        Modifier.matchParentSize()
            .padding(40.dp)
            .background(Color.Magenta)
    )
    Box(
        Modifier.align(Alignment.Center)
            .preferredSize(300.dp, 300.dp)
            .background(Color.Green)
    )
    Box(
        Modifier.align(Alignment.TopStart)
            .preferredSize(150.dp, 150.dp)
            .background(Color.Red)
    )
    Box(
        Modifier.align(Alignment.BottomEnd)
            .preferredSize(150.dp, 150.dp)
            .background(Color.Blue)
    )
}

Parameters
modifier: Modifier	The modifier to be applied to the layout.

Column

@Composable inline fun Column(
    modifier: Modifier = Modifier, 
    verticalArrangement: Arrangement.Vertical = Arrangement.Top, 
    horizontalAlignment: Alignment.Horizontal = Alignment.Start, 
    children: ColumnScope.() -> Unit
): Unit

A layout composable that places its children in a vertical sequence. For a layout composable that places its children in a horizontal sequence, see Row.

The layout model is able to assign children heights according to their weights provided using the ColumnScope.weight modifier. If a child is not provided a weight, it will be asked for its preferred height before the sizes of the children with weights are calculated proportionally to their weight based on the remaining available space.

When none of its children have weights, a Column will be as small as possible to fit its children one on top of the other. In order to change the height of the Column, use the Modifier.height modifiers; e.g. to make it fill the available height Modifier.fillMaxHeight can be used. If at least one child of a Column has a weight, the Column will fill the available height, so there is no need for Modifier.fillMaxHeight. However, if Column's size should be limited, the Modifier.height or Modifier.size layout modifiers should be applied.

When the size of the Column is larger than the sum of its children sizes, a verticalArrangement can be specified to define the positioning of the children inside the Column. See Arrangement for available positioning behaviors; a custom arrangement can also be defined using the constructor of Arrangement.

Example usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.foundation.layout.preferredWidth

Column {
    // The child with no weight will have the specified size.
    Box(Modifier.preferredSize(40.dp, 80.dp).background(Color.Magenta))
    // Has weight, the child will occupy half of the remaining height.
    Box(Modifier.preferredWidth(40.dp).weight(1f).background(Color.Yellow))
    // Has weight and does not fill, the child will occupy at most half of the remaining height.
    // Therefore it will occupy 80.dp (its preferred height) if the assigned height is larger.
    Box(
        Modifier.preferredSize(40.dp, 80.dp)
            .weight(1f, fill = false)
            .background(Color.Green)
    )
}

Parameters
modifier: Modifier = Modifier	The modifier to be applied to the Column.
verticalArrangement: Arrangement.Vertical = Arrangement.Top	The vertical arrangement of the layout's children.
horizontalAlignment: Alignment.Horizontal = Alignment.Start	The horizontal alignment of the layout's children.

See Also

• Column

ConstraintLayout

@Composable fun ConstraintLayout(
    modifier: Modifier = Modifier, 
    children: ConstraintLayoutScope.() -> Unit
): Unit

Layout that positions its children according to the constraints between them.

Example usage:

import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.ConstraintLayout
import androidx.compose.foundation.layout.atMost

ConstraintLayout {
    val (text1, text2, text3) = createRefs()

    Text(
        "Text1",
        Modifier.constrainAs(text1) {
            start.linkTo(text2.end, margin = 20.dp)
        }
    )
    Text(
        "Text2",
        Modifier.constrainAs(text2) {
            centerTo(parent)
        }
    )

    val barrier = createBottomBarrier(text1, text2)
    Text(
        "This is a very long text",
        Modifier.constrainAs(text3) {
            top.linkTo(barrier, margin = 20.dp)
            centerHorizontallyTo(parent)
            width = Dimension.preferredWrapContent.atMost(40.dp)
        }
    )
}

ConstraintLayout

@Composable fun ConstraintLayout(
    constraintSet: ConstraintSet, 
    modifier: Modifier = Modifier, 
    children: () -> Unit
): Unit

Layout that positions its children according to the constraints between them.

Example usage:

import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.ConstraintLayout
import androidx.compose.foundation.layout.ConstraintSet
import androidx.compose.foundation.layout.atMost
import androidx.compose.ui.layout.layoutId

ConstraintLayout(
    ConstraintSet {
        val text1 = createRefFor("text1")
        val text2 = createRefFor("text2")
        val text3 = createRefFor("text3")

        constrain(text1) {
            start.linkTo(text2.end, margin = 20.dp)
        }
        constrain(text2) {
            centerTo(parent)
        }

        val barrier = createBottomBarrier(text1, text2)
        constrain(text3) {
            top.linkTo(barrier, margin = 20.dp)
            centerHorizontallyTo(parent)
            width = Dimension.preferredWrapContent.atMost(40.dp)
        }
    }
) {
    Text("Text1", Modifier.layoutId("text1"))
    Text("Text2", Modifier.layoutId("text2"))
    Text("This is a very long text", Modifier.layoutId("text3"))
}

ConstraintSet

fun ConstraintSet(description: ConstraintSetScope.() -> Unit): ConstraintSet

Creates a ConstraintSet.

FlowColumn

@Composable fun FlowColumn(
    mainAxisSize: SizeMode = SizeMode.Wrap, 
    mainAxisAlignment: FlowMainAxisAlignment = FlowMainAxisAlignment.Start, 
    mainAxisSpacing: Dp = 0.dp, 
    crossAxisAlignment: FlowCrossAxisAlignment = FlowCrossAxisAlignment.Start, 
    crossAxisSpacing: Dp = 0.dp, 
    lastLineMainAxisAlignment: FlowMainAxisAlignment = mainAxisAlignment, 
    children: () -> Unit
): Unit

A composable that places its children in a vertical flow. Unlike Column, if the vertical space is too small to put all the children in one column, multiple columns may be used.

Note that just like Column, flex values cannot be used with FlowColumn.

Example usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.FlowColumn
import androidx.compose.foundation.layout.preferredSize

FlowColumn(
    mainAxisSpacing = 10.dp,
    crossAxisSpacing = 10.dp
) {
    sizes.forEach { size ->
        Box(Modifier.preferredSize(20.dp, size).background(Color.Magenta))
    }
}

Parameters
mainAxisSize: SizeMode = SizeMode.Wrap	The size of the layout in the main axis direction.
mainAxisAlignment: FlowMainAxisAlignment = FlowMainAxisAlignment.Start	The alignment of each column's children in the main axis direction.
mainAxisSpacing: Dp = 0.dp	The main axis spacing between the children of each column.
crossAxisAlignment: FlowCrossAxisAlignment = FlowCrossAxisAlignment.Start	The alignment of each column's children in the cross axis direction.
crossAxisSpacing: Dp = 0.dp	The cross axis spacing between the columns of the layout.
lastLineMainAxisAlignment: FlowMainAxisAlignment = mainAxisAlignment	Overrides the main axis alignment of the last column.

FlowRow

@Composable fun FlowRow(
    mainAxisSize: SizeMode = SizeMode.Wrap, 
    mainAxisAlignment: FlowMainAxisAlignment = FlowMainAxisAlignment.Start, 
    mainAxisSpacing: Dp = 0.dp, 
    crossAxisAlignment: FlowCrossAxisAlignment = FlowCrossAxisAlignment.Start, 
    crossAxisSpacing: Dp = 0.dp, 
    lastLineMainAxisAlignment: FlowMainAxisAlignment = mainAxisAlignment, 
    children: () -> Unit
): Unit

A composable that places its children in a horizontal flow. Unlike Row, if the horizontal space is too small to put all the children in one row, multiple rows may be used.

Note that just like Row, flex values cannot be used with FlowRow.

Example usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.preferredSize

FlowRow(
    mainAxisSpacing = 10.dp,
    crossAxisSpacing = 10.dp
) {
    sizes.forEach { size ->
        Box(Modifier.preferredSize(size, 20.dp).background(Color.Magenta))
    }
}

Parameters
mainAxisSize: SizeMode = SizeMode.Wrap	The size of the layout in the main axis direction.
mainAxisAlignment: FlowMainAxisAlignment = FlowMainAxisAlignment.Start	The alignment of each row's children in the main axis direction.
mainAxisSpacing: Dp = 0.dp	The main axis spacing between the children of each row.
crossAxisAlignment: FlowCrossAxisAlignment = FlowCrossAxisAlignment.Start	The alignment of each row's children in the cross axis direction.
crossAxisSpacing: Dp = 0.dp	The cross axis spacing between the rows of the layout.
lastLineMainAxisAlignment: FlowMainAxisAlignment = mainAxisAlignment	Overrides the main axis alignment of the last row.

MaxIntrinsicHeight

@Composable fun MaxIntrinsicHeight(children: () -> Unit): Unit

Deprecated.

Layout composable that forces its child to be as tall as its max intrinsic height. If incoming constraints do not allow this, the closest possible height will be used.

MaxIntrinsicWidth

@Composable fun MaxIntrinsicWidth(children: () -> Unit): Unit

Deprecated.

Layout composable that forces its child to be as wide as its max intrinsic width. If incoming constraints do not allow this, the closest possible width will be used.

MinIntrinsicHeight

@Composable fun MinIntrinsicHeight(children: () -> Unit): Unit

Deprecated.

Layout composable that forces its child to be as tall as its min intrinsic height. If incoming constraints do not allow this, the closest possible height will be used.

MinIntrinsicWidth

@Composable fun MinIntrinsicWidth(children: () -> Unit): Unit

Deprecated.

Layout composable that forces its child to be as wide as its min intrinsic width. If incoming constraints do not allow this, the closest possible width will be used.

Row

@Composable inline fun Row(
    modifier: Modifier = Modifier, 
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start, 
    verticalAlignment: Alignment.Vertical = Alignment.Top, 
    children: RowScope.() -> Unit
): Unit

A layout composable that places its children in a horizontal sequence. For a layout composable that places its children in a vertical sequence, see Column.

The layout model is able to assign children widths according to their weights provided using the RowScope.weight modifier. If a child is not provided a weight, it will be asked for its preferred width before the sizes of the children with weights are calculated proportionally to their weight based on the remaining available space.

When none of its children have weights, a Row will be as small as possible to fit its children one next to the other. In order to change the width of the Row, use the Modifier.width modifiers; e.g. to make it fill the available width Modifier.fillMaxWidth can be used. If at least one child of a Row has a weight, the Row will fill the available width, so there is no need for Modifier.fillMaxWidth. However, if Row's size should be limited, the Modifier.width or Modifier.size layout modifiers should be applied.

When the size of the Row is larger than the sum of its children sizes, a horizontalArrangement can be specified to define the positioning of the children inside the Row. See Arrangement for available positioning behaviors; a custom arrangement can also be defined using the constructor of Arrangement.

Example usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.preferredHeight
import androidx.compose.foundation.layout.preferredSize

Row {
    // The child with no weight will have the specified size.
    Box(Modifier.preferredSize(40.dp, 80.dp).background(Color.Magenta))
    // Has weight, the child will occupy half of the remaining width.
    Box(Modifier.preferredHeight(40.dp).weight(1f).background(Color.Yellow))
    // Has weight and does not fill, the child will occupy at most half of the remaining width.
    // Therefore it will occupy 80.dp (its preferred width) if the assigned width is larger.
    Box(
        Modifier.preferredSize(80.dp, 40.dp)
            .weight(1f, fill = false)
            .background(Color.Green)
    )
}

Parameters
modifier: Modifier = Modifier	The modifier to be applied to the Row.
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start	The horizontal arrangement of the layout's children.
verticalAlignment: Alignment.Vertical = Alignment.Top	The vertical alignment of the layout's children.

See Also

• Column

Spacer

@Composable fun Spacer(modifier: Modifier): Unit

Component that represents an empty space layout, whose size can be defined using the LayoutWidth, LayoutHeight and LayoutSize modifiers.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.foundation.layout.preferredWidth

Row {
    Box(Modifier.preferredSize(100.dp).background(Color.Red))
    Spacer(Modifier.preferredWidth(20.dp))
    Box(Modifier.preferredSize(100.dp).background(Color.Magenta))
    Spacer(Modifier.weight(1f))
    Box(Modifier.preferredSize(100.dp).background(Color.Black))
}

Parameters
modifier: Modifier	modifiers to set to this spacer

Stack

@Composable fun Stack(
    modifier: Modifier = Modifier, 
    alignment: Alignment = Alignment.TopStart, 
    children: BoxScope.() -> Unit
): Unit

Deprecated.

Extension functions

Constraints

@Stable fun Density.Constraints(dpConstraints: DpConstraints): Constraints

Deprecated.

Creates the Constraints corresponding to the current DpConstraints.

DpConstraints

@Stable fun Density.DpConstraints(constraints: Constraints): DpConstraints

Deprecated.

Creates the DpConstraints corresponding to the current Constraints.

absoluteOffset

@Stable fun Modifier.absoluteOffset(
    x: Dp = 0.dp, 
    y: Dp = 0.dp
): Modifier

Offset the content by (x dp, y dp). The offsets can be positive as well as non-positive. The offsets are applied without regard to the current LayoutDirection, see Modifier.offset to apply relative offsets.

Example usage:

import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.absoluteOffset
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize

// This text will be offset (10.dp, 20.dp) from the center of the available space.
Text(
    "Layout offset modifier sample",
    Modifier.fillMaxSize()
        .wrapContentSize(Alignment.Center)
        .absoluteOffset(10.dp, 20.dp)
)

absoluteOffsetPx

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

Offset the content by (x px, y px). The offsets can be positive as well as non-positive. This modifier is designed to be used for offsets that change, possibly due to user interactions.

The offsets are applied without regard to the current LayoutDirection. To apply relative offsets, use Modifier.offsetPx instead.

Example usage:

import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.absoluteOffsetPx
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.gesture.tapGestureFilter

// This text will be offset in steps of 10.dp from the top left of the available space.
val offset = remember { mutableStateOf(0f) }
Text(
    "Layout offset modifier sample",
    Modifier
        .tapGestureFilter { offset.value += 10f }
        .absoluteOffsetPx(offset, offset)
)

absolutePadding

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

Apply additional space along each edge of the content in Dp: left, top, right and bottom. These paddings are applied without regard to the current LayoutDirection, see padding to apply relative paddings. Padding is applied before content measurement and takes precedence; content may only be as large as the remaining space.

Negative padding is not permitted. See offset.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.absolutePadding
import androidx.compose.foundation.layout.preferredSize

Box(Modifier.background(color = Color.Gray)) {
    Box(
        Modifier.absolutePadding(left = 20.dp, top = 30.dp, right = 20.dp, bottom = 30.dp)
            .preferredSize(50.dp)
            .background(Color.Blue)
    )
}

aspectRatio

@Stable fun Modifier.aspectRatio(@FloatRange(0.0, 3.4E38, false) ratio: Float): Modifier

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. The size in the other dimension is determined by the aspect ratio.

Example usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.preferredWidth

Box(Modifier.preferredWidth(100.dp).aspectRatio(2f).background(Color.Green))

Parameters
ratio: Float	the desired width/height positive ratio

atLeast

fun Dimension.Coercible.atLeast(dp: Dp): Dimension.MaxCoercible

Sets the lower bound of the current Dimension to a fixed dp value.

atLeastWrapContent

fun Dimension.MinCoercible.atLeastWrapContent(dp: Dp): Dimension

Sets the lower bound of the current Dimension to a fixed dp value.

atMost

fun Dimension.Coercible.atMost(dp: Dp): Dimension.MinCoercible

Sets the upper bound of the current Dimension to a fixed dp value.

atMost

fun Dimension.MaxCoercible.atMost(dp: Dp): Dimension

Sets the upper bound of the current Dimension to a fixed dp value.

defaultMinSizeConstraints

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

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. The modifier can be used, for example, to define a default min size of a component, while still allowing it to be overidden with smaller min sizes across usages.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.defaultMinSizeConstraints
import androidx.compose.foundation.layout.sizeIn

@Composable
fun DefaultMinBox(modifier: Modifier = Modifier) {
    Box(
        modifier.defaultMinSizeConstraints(minWidth = 100.dp, minHeight = 100.dp)
            .background(Color.Blue)
    )
}
// This will be a 100.dp x 100.dp blue box. Because we are not providing any min constraints
// to the DefaultMinBox, defaultMinSizeConstraints will apply its min constraints.
DefaultMinBox()
// This will be a 50.dp x 50.dp blue box. Because we are providing min constraints
// to the DefaultMinBox, defaultMinSizeConstraints will not apply its min constraints.
DefaultMinBox(Modifier.sizeIn(minWidth = 50.dp, minHeight = 50.dp))
// Note that if DefaultMinBox used sizeIn or preferredSizeIn rather than
// defaultMinSizeConstraints, the min constraints would have been applied with either
// of the above usages.

enforce

@Stable fun DpConstraints.enforce(otherConstraints: DpConstraints): DpConstraints

Deprecated.

Returns the result of coercing the current constraints in a different set of constraints.

fillMaxHeight

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

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. Note that, by default, the fraction is 1, so the modifier will make the content fill the whole available height. If the incoming maximum height is Constraints.Infinity this modifier will have no effect.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.preferredSize

Box(Modifier.fillMaxHeight().background(Color.Red), alignment = Alignment.Center) {
    Box(Modifier.preferredSize(100.dp).background(color = Color.Magenta))
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width

Box(Modifier.size(100.dp).background(Color.Red), alignment = Alignment.Center) {
    // The inner Box will be (30.dp x 50.dp).
    Box(
        Modifier.width(30.dp)
            .fillMaxHeight(0.5f)
            .background(color = Color.Magenta)
    )
}

fillMaxSize

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

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. Note that, by default, the fraction is 1, so the modifier will make the content fill the whole available space. If the incoming maximum width or height is Constraints.Infinity this modifier will have no effect in that dimension.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.preferredSize

Box(Modifier.fillMaxSize().background(Color.Red), alignment = Alignment.Center) {
    Box(Modifier.preferredSize(100.dp).background(color = Color.Magenta))
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width

Box(Modifier.size(100.dp).background(Color.Red), alignment = Alignment.Center) {
    // The inner Box will be (50.dp x 50.dp).
    Box(
        Modifier.width(30.dp)
            .fillMaxSize(0.5f)
            .background(color = Color.Magenta)
    )
}

fillMaxWidth

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

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. Note that, by default, the fraction is 1, so the modifier will make the content fill the whole available width. If the incoming maximum width is Constraints.Infinity this modifier will have no effect.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.preferredSize

Box(Modifier.fillMaxWidth().background(Color.Red), alignment = Alignment.Center) {
    Box(Modifier.preferredSize(100.dp).background(color = Color.Magenta))
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size

Box(Modifier.size(100.dp).background(Color.Red), alignment = Alignment.Center) {
    // The inner Box will be (50.dp x 30.dp).
    Box(
        Modifier.fillMaxWidth(fraction = 0.5f)
            .height(30.dp)
            .background(color = Color.Magenta)
    )
}

height

@Stable fun Modifier.height(height: Dp): Modifier

Declare the height of the content to be exactly heightdp. The incoming measurement Constraints will not override this value. If the content chooses a size that does not satisfy the incoming Constraints, the parent layout will be reported a size coerced in the Constraints, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that Constraints were respected.

See heightIn and sizeIn to set a size range. See preferredHeight to set a preferred height, which is only respected when the incoming constraints allow it.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.height

// The result is a 50.dp x 50.dp blue box centered in a 100.dp x 100.dp space.
// Note that although a previous modifier asked it to be 100.dp height, this
// will not be respected. They would be respected if preferredHeight was used instead of height.
Box(
    Modifier
        .height(100.dp)
        .height(50.dp)
        .aspectRatio(1f)
        .background(Color.Blue)
)

heightIn

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

Constrain the height of the content to be between mindp and maxdp. If the content chooses a size that does not satisfy the incoming Constraints, the parent layout will be reported a size coerced in the Constraints, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that Constraints were respected.

offset

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

Offset the content by (x dp, y dp). The offsets can be positive as well as non-positive.

Example usage:

import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.wrapContentSize

// This text will be offset (10.dp, 20.dp) from the center of the available space. In the
// right-to-left context, the offset will be (-10.dp, 20.dp).
Text(
    "Layout offset modifier sample",
    Modifier.fillMaxSize()
        .wrapContentSize(Alignment.Center)
        .offset(10.dp, 20.dp)
)

offset

@Stable fun DpConstraints.offset(
    horizontal: Dp = 0.dp, 
    vertical: Dp = 0.dp
): DpConstraints

Deprecated.

Returns the DpConstraints obtained by offsetting the current instance with the given values.

offsetPx

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

Offset the content by (x px, y px). The offsets can be positive as well as non-positive. This modifier is designed to be used for offsets that change, possibly due to user interactions.

Example usage:

import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.offsetPx
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.gesture.tapGestureFilter

// This text will be offset in steps of 10.dp from the top left of the available space in
// left-to-right context, and from top right in right-to-left context.
val offset = remember { mutableStateOf(0f) }
Text(
    "Layout offset modifier sample",
    Modifier
        .tapGestureFilter { offset.value += 10f }
        .offsetPx(offset, offset)
)

padding

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

Apply additional space along each edge of the content in Dp: start, top, end and bottom. The start and end edges will be determined by the current LayoutDirection. Padding is applied before content measurement and takes precedence; content may only be as large as the remaining space.

Negative padding is not permitted. See offset.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.preferredSize

Box(Modifier.background(color = Color.Gray)) {
    Box(
        Modifier.padding(start = 20.dp, top = 30.dp, end = 20.dp, bottom = 30.dp)
            .preferredSize(50.dp)
            .background(Color.Blue)
    )
}

padding

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

Apply horizontal dp space along the left and right edges of the content, and vertical dp space along the top and bottom edges. Padding is applied before content measurement and takes precedence; content may only be as large as the remaining space.

Negative padding is not permitted. See offset.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.preferredSize

Box(Modifier.background(color = Color.Gray)) {
    Box(
        Modifier
            .padding(horizontal = 20.dp, vertical = 30.dp)
            .preferredSize(50.dp)
            .background(Color.Blue)
    )
}

padding

@Stable fun Modifier.padding(all: Dp): Modifier

Apply all dp of additional space along each edge of the content, left, top, right and bottom. Padding is applied before content measurement and takes precedence; content may only be as large as the remaining space.

Negative padding is not permitted. See offset.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.preferredSize

Box(Modifier.background(color = Color.Gray)) {
    Box(Modifier.padding(all = 20.dp).preferredSize(50.dp).background(Color.Blue))
}

padding

fun Modifier.padding(padding: PaddingValues): Modifier

Apply PaddingValues to the component as additional space along each edge of the content's left, top, right and bottom. Padding is applied before content measurement and takes precedence; content may only be as large as the remaining space.

Negative padding is not permitted. See offset.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.preferredSize

val innerPadding = PaddingValues(top = 10.dp, start = 15.dp)
Box(Modifier.background(color = Color.Gray)) {
    Box(Modifier.padding(innerPadding).preferredSize(50.dp).background(Color.Blue))
}

preferredHeight

@Stable fun Modifier.preferredHeight(intrinsicSize: IntrinsicSize): Modifier

Declare the preferred height of the content to be the same as the min or max intrinsic height of the content. The incoming measurement Constraints may override this value, forcing the content to be either smaller or larger.

See preferredWidth for other options of sizing to intrinsic width. Also see preferredHeight and preferredHeightIn for other options to set the preferred height.

Example usage for min intrinsic:

import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.preferredHeight
import androidx.compose.foundation.layout.preferredWidth

// Builds a layout containing two pieces of text separated by a divider, where the divider
// is sized according to the height of the longest text.
//
// Here preferredHeight min intrinsic is adding a height premeasurement pass for the Row,
// whose minimum intrinsic height will correspond to the height of the largest Text. Then
// preferredHeight min intrinsic will measure the Row with tight height, the same as the
// premeasured minimum intrinsic height, which due to fillMaxHeight will force the Texts and
// the divider to use the same height.
Box {
    Row(Modifier.preferredHeight(IntrinsicSize.Min)) {
        Text(
            text = "This is a really short text",
            modifier = Modifier.weight(1f).fillMaxHeight()
        )
        Box(Modifier.preferredWidth(1.dp).fillMaxHeight().background(Color.Black))
        Text(
            text = "This is a much much much much much much much much much much" +
                " much much much much much much longer text",
            modifier = Modifier.weight(1f).fillMaxHeight()
        )
    }
}

Example usage for max intrinsic:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.preferredHeight
import androidx.compose.foundation.layout.preferredWidth

// Builds a layout containing two aspectRatios separated by a divider, where the divider
// is sized according to the height of the taller aspectRatio.
//
// Here preferredHeight max intrinsic is adding a height premeasurement pass for the
// Row, whose maximum intrinsic height will correspond to the height of the taller
// aspectRatio. Then preferredHeight max intrinsic will measure the Row with tight height,
// the same as the premeasured maximum intrinsic height, which due to fillMaxHeight modifier
// will force the aspectRatios and the divider to use the same height.
//
Box {
    Row(Modifier.preferredHeight(IntrinsicSize.Max)) {
        val modifier = Modifier.fillMaxHeight().weight(1f)
        Box(modifier.aspectRatio(2f).background(Color.Gray))
        Box(Modifier.preferredWidth(1.dp).fillMaxHeight().background(Color.Black))
        Box(modifier.aspectRatio(1f).background(Color.Blue))
    }
}

preferredHeight

@Stable fun Modifier.preferredHeight(height: Dp): Modifier

Declare the preferred height of the content to be exactly heightdp. The incoming measurement Constraints may override this value, forcing the content to be either smaller or larger.

For a modifier that sets the height of the content regardless of the incoming constraints see Modifier.height. See preferredWidth or preferredSize to set other preferred dimensions. See preferredWidthIn, preferredHeightIn or preferredSizeIn to set a preferred size range.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.preferredHeight

Box {
    Box(Modifier.preferredHeight(100.dp).aspectRatio(1f).background(Color.Blue))
}

preferredHeightIn

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

Constrain the height of the content to be between mindp and maxdp as permitted by the incoming measurement Constraints. If the incoming constraints are more restrictive the requested size will obey the incoming constraints and attempt to be as close as possible to the preferred size.

preferredSize

@Stable fun Modifier.preferredSize(size: Dp): Modifier

Declare the preferred size of the content to be exactly sizedp square. The incoming measurement Constraints may override this value, forcing the content to be either smaller or larger.

For a modifier that sets the size of the content regardless of the incoming constraints, see Modifier.size. See preferredWidth or preferredHeight to set width or height alone. See preferredWidthIn, preferredHeightIn or preferredSizeIn to set a preferred size range.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.preferredSize

Box {
    Box(Modifier.preferredSize(100.dp, 100.dp).background(Color.Red))
}

preferredSize

@Stable fun Modifier.preferredSize(
    width: Dp, 
    height: Dp
): Modifier

Declare the preferred size of the content to be exactly widthdp by heightdp. The incoming measurement Constraints may override this value, forcing the content to be either smaller or larger.

For a modifier that sets the size of the content regardless of the incoming constraints, see Modifier.size. See preferredWidth or preferredHeight to set width or height alone. See preferredWidthIn, preferredHeightIn or preferredSizeIn to set a preferred size range.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.preferredSize

Box {
    Box(Modifier.preferredSize(100.dp, 100.dp).background(Color.Red))
}

preferredSizeIn

@Stable fun Modifier.preferredSizeIn(constraints: DpConstraints): Modifier

Deprecated.

Constrain the size of the content to be within constraints as permitted by the incoming measurement Constraints. If the incoming measurement constraints are more restrictive the requested size will obey the incoming constraints and attempt to be as close as possible to the preferred size.

preferredSizeIn

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

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. If the incoming constraints are more restrictive the requested size will obey the incoming constraints and attempt to be as close as possible to the preferred size.

preferredWidth

@Stable fun Modifier.preferredWidth(intrinsicSize: IntrinsicSize): Modifier

Declare the preferred width of the content to be the same as the min or max intrinsic width of the content. The incoming measurement Constraints may override this value, forcing the content to be either smaller or larger.

See preferredHeight for options of sizing to intrinsic height. Also see preferredWidth and preferredWidthIn for other options to set the preferred width.

Example usage for min intrinsic:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.foundation.layout.preferredWidth

// Builds a layout containing three Box having the same width as the widest one.
//
// Here preferredWidth min intrinsic is adding a width premeasurement pass for the
// Column, whose minimum intrinsic width will correspond to the preferred width of the largest
// Box. Then preferredWidth min intrinsic will measure the Column with tight width, the
// same as the premeasured minimum intrinsic width, which due to fillMaxWidth will force
// the Box's to use the same width.
Box {
    Column(Modifier.preferredWidth(IntrinsicSize.Min).fillMaxHeight()) {
        Box(
            modifier = Modifier.fillMaxWidth()
                .preferredSize(20.dp, 10.dp)
                .background(Color.Gray)
        )
        Box(
            modifier = Modifier.fillMaxWidth()
                .preferredSize(30.dp, 10.dp)
                .background(Color.Blue)
        )
        Box(
            modifier = Modifier.fillMaxWidth()
                .preferredSize(10.dp, 10.dp)
                .background(Color.Magenta)
        )
    }
}

Example usage for max intrinsic:

import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.preferredWidth

// Builds a layout containing three Text boxes having the same width as the widest one.
//
// Here preferredWidth max intrinsic is adding a width premeasurement pass for the Column,
// whose maximum intrinsic width will correspond to the preferred width of the largest
// Box. Then preferredWidth max intrinsic will measure the Column with tight width, the
// same as the premeasured maximum intrinsic width, which due to fillMaxWidth modifiers will
// force the Boxs to use the same width.

Box {
    Column(Modifier.preferredWidth(IntrinsicSize.Max).fillMaxHeight()) {
        Box(Modifier.fillMaxWidth().background(Color.Gray)) {
            Text("Short text")
        }
        Box(Modifier.fillMaxWidth().background(Color.Blue)) {
            Text("Extremely long text giving the width of its siblings")
        }
        Box(Modifier.fillMaxWidth().background(Color.Magenta)) {
            Text("Medium length text")
        }
    }
}

preferredWidth

@Stable fun Modifier.preferredWidth(width: Dp): Modifier

Declare the preferred width of the content to be exactly widthdp. The incoming measurement Constraints may override this value, forcing the content to be either smaller or larger.

For a modifier that sets the width of the content regardless of the incoming constraints see Modifier.width. See preferredHeight or preferredSize to set other preferred dimensions. See preferredWidthIn, preferredHeightIn or preferredSizeIn to set a preferred size range.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.preferredWidth

Box {
    Box(Modifier.preferredWidth(100.dp).aspectRatio(1f).background(Color.Magenta))
}

preferredWidthIn

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

Constrain the width of the content to be between mindp and maxdp as permitted by the incoming measurement Constraints. If the incoming constraints are more restrictive the requested size will obey the incoming constraints and attempt to be as close as possible to the preferred size.

relativePaddingFrom

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

A Modifier that can add padding to position the content according to specified distances from its bounds to an alignment line. Whether the positioning is vertical or horizontal is defined by the orientation of the given alignmentLine (if the line is horizontal, before and after will refer to distances from top and bottom, otherwise they will refer to distances from start and end). The opposite axis sizing and positioning will remain unaffected. The modified layout will try to include the required padding, subject to the incoming max layout constraints, such that the distance from its bounds to the alignmentLine of the content will be before and after, respectively. When the max constraints do not allow this, satisfying the before requirement will have priority over after. When the modified layout is min constrained in the affected layout direction and the padded layout is smaller than the constraint, the modified layout will satisfy the min constraint and the content will be positioned to satisfy the before requirement if specified, or the after requirement otherwise.

import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.relativePaddingFrom

// We want to have 30.sp distance from the top of the layout box to the baseline of the
// first line of text.
val distanceToBaseline = 30.sp
// We convert the 30.sp value to dps, which is required for the relativePaddingFrom API.
val distanceToBaselineDp = with(DensityAmbient.current) { distanceToBaseline.toDp() }
// The result will be a layout with 30.sp distance from the top of the layout box to the
// baseline of the first line of text.
Text(
    text = "This is an example.",
    modifier = Modifier.relativePaddingFrom(FirstBaseline, before = distanceToBaselineDp)
)

Parameters
alignmentLine: AlignmentLine	the alignment line relative to which the padding is defined
before: Dp = Dp.Unspecified	the distance between the container's top edge and the horizontal alignment line, or the container's start edge and the vertical alignment line
after: Dp = Dp.Unspecified	the distance between the container's bottom edge and the horizontal alignment line, or the container's end edge and the vertical alignment line Example usage:

size

@Stable fun Modifier.size(size: Dp): Modifier

Declare the size of the content to be exactly sizedp width and height. The incoming measurement Constraints will not override this value. If the content chooses a size that does not satisfy the incoming Constraints, the parent layout will be reported a size coerced in the Constraints, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that Constraints were respected.

See sizeIn to set a size range. See preferredSize to set a preferred size, which is only respected when the incoming constraints allow it.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size

// The result is a 50.dp x 50.dp red box centered in a 100.dp x 100.dp space.
// Note that although a previous modifier asked it to be 100.dp x 100.dp, this
// will not be respected. They would be respected if preferredSize was used instead of size.
Box(
    Modifier
        .size(100.dp, 100.dp)
        .size(50.dp, 50.dp)
        .background(Color.Red)
)

size

@Stable fun Modifier.size(
    width: Dp, 
    height: Dp
): Modifier

Declare the size of the content to be exactly widthdp and heightdp. The incoming measurement Constraints will not override this value. If the content chooses a size that does not satisfy the incoming Constraints, the parent layout will be reported a size coerced in the Constraints, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that Constraints were respected.

See sizeIn to set a size range. See preferredSize to set a preferred size, which is only respected when the incoming constraints allow it.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width

// The result is a 50.dp x 50.dp magenta box centered in a 100.dp x 100.dp space.
// Note that although a previous modifier asked it to be 100.dp width, this
// will not be respected. They would be respected if preferredWidth was used instead of width.
Box(
    Modifier
        .width(100.dp)
        .width(50.dp)
        .aspectRatio(1f)
        .background(Color.Magenta)
)

sizeIn

@Stable fun Modifier.sizeIn(constraints: DpConstraints): Modifier

Deprecated.

Constrain the size of the content to be within constraints. If the content chooses a size that does not satisfy the incoming Constraints, the parent layout will be reported a size coerced in the Constraints, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that Constraints were respected.

sizeIn

@Stable fun Modifier.sizeIn(
    minWidth: Dp = Dp.Unspecified, 
    minHeight: Dp = Dp.Unspecified, 
    maxWidth: Dp = Dp.Unspecified, 
    maxHeight: Dp = Dp.Unspecified
): Modifier

Constrain the width of the content to be between minWidthdp and maxWidthdp, and the height of the content to be between minHeightdp and maxHeightdp. If the content chooses a size that does not satisfy the incoming Constraints, the parent layout will be reported a size coerced in the Constraints, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that Constraints were respected.

width

@Stable fun Modifier.width(width: Dp): Modifier

Declare the width of the content to be exactly widthdp. The incoming measurement Constraints will not override this value. If the content chooses a size that does not satisfy the incoming Constraints, the parent layout will be reported a size coerced in the Constraints, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that Constraints were respected.

See widthIn and sizeIn to set a size range. See preferredWidth to set a preferred width, which is only respected when the incoming constraints allow it.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width

// The result is a 50.dp x 50.dp magenta box centered in a 100.dp x 100.dp space.
// Note that although a previous modifier asked it to be 100.dp width, this
// will not be respected. They would be respected if preferredWidth was used instead of width.
Box(
    Modifier
        .width(100.dp)
        .width(50.dp)
        .aspectRatio(1f)
        .background(Color.Magenta)
)

widthIn

@Stable fun Modifier.widthIn(
    min: Dp = Dp.Unspecified, 
    max: Dp = Dp.Unspecified
): Modifier

Constrain the width of the content to be between mindp and maxdp. If the content chooses a size that does not satisfy the incoming Constraints, the parent layout will be reported a size coerced in the Constraints, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that Constraints were respected.

wrapContentHeight

@Stable fun Modifier.wrapContentHeight(
    align: Alignment.Vertical = Alignment.CenterVertically, 
    unbounded: Boolean = false
): Modifier

Allow the content to measure at its desired height without regard for the incoming measurement minimum height constraint, and, if unbounded is true, also without regard for the incoming measurement maximum height constraint. If the content's measured size is smaller than the minimum height constraint, align it within that minimum height space. If the content's measured size is larger than the maximum height constraint (only possible when unbounded is true), align over the maximum height space.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.preferredHeight
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.foundation.layout.wrapContentHeight

// Here the result will be a 50.dp x 20.dp blue box centered vertically in a 50.dp x 50.dp
// space. Because of the preferredSize modifier, if wrapContentHeight did not exist,
// the blue rectangle would actually be 50.dp x 50.dp to satisfy the size set by the modifier.
// However, because we provide wrapContentHeight, the blue rectangle is specified to be wrap
// content in height - if the desired height is smaller than 50.dp, it will be centered
// vertically in this space. Therefore the 50.dp x 20.dp is centered vertically in the space.
Box(
    Modifier.preferredSize(50.dp)
        .wrapContentHeight(Alignment.CenterVertically)
        .preferredHeight(20.dp)
        .background(Color.Blue)
)

wrapContentSize

@Stable fun Modifier.wrapContentSize(
    align: Alignment = Alignment.Center, 
    unbounded: Boolean = false
): Modifier

Allow the content to measure at its desired size without regard for the incoming measurement minimum width or minimum height constraints, and, if unbounded is true, also without regard for the incoming maximum constraints. If the content's measured size is smaller than the minimum size constraint, align it within that minimum sized space. If the content's measured size is larger than the maximum size constraint (only possible when unbounded is true), align within the maximum space.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.foundation.layout.preferredSizeIn
import androidx.compose.foundation.layout.wrapContentSize

// Here the result will be a 20.dp x 20.dp blue box top-centered in a 40.dp x 40.dp space.
// Because of the preferredSizeIn modifier, if wrapContentSize did not exist, the blue rectangle
// would actually be 40.dp x 40.dp to satisfy the min size set by the modifier. However,
// because we provide wrapContentSize, the blue rectangle is specified to be wrap
// content - if the desired size is smaller than 40.dp x 40.dp, it will be top-centered in
// this space. Therefore the 20.dp x 20.dp is top-centered in the space.
Box(
    Modifier.preferredSizeIn(minWidth = 40.dp, minHeight = 40.dp)
        .wrapContentSize(Alignment.TopCenter)
        .preferredSize(20.dp)
        .background(Color.Blue)
)

wrapContentWidth

@Stable fun Modifier.wrapContentWidth(
    align: Alignment.Horizontal = Alignment.CenterHorizontally, 
    unbounded: Boolean = false
): Modifier

Allow the content to measure at its desired width without regard for the incoming measurement minimum width constraint, and, if unbounded is true, also without regard for the incoming measurement maximum width constraint. If the content's measured size is smaller than the minimum width constraint, align it within that minimum width space. If the content's measured size is larger than the maximum width constraint (only possible when unbounded is true), align over the maximum width space.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.foundation.layout.preferredWidth
import androidx.compose.foundation.layout.wrapContentWidth

// Here the result will be a 20.dp x 50.dp blue box centered vertically in a 50.dp x 50.dp
// space. Because of the preferredSize modifier, if wrapContentWidth did not exist,
// the blue rectangle would actually be 50.dp x 50.dp to satisfy the size set by the modifier.
// However, because we provide wrapContentWidth, the blue rectangle is specified to be wrap
// content in width - if the desired width is smaller than 50.dp, it will be centered
// horizontally in this space. Therefore the 50.dp x 20.dp is centered horizontally
// in the space.
Box(
    Modifier.preferredSize(50.dp)
        .wrapContentWidth(Alignment.CenterHorizontally)
        .preferredWidth(20.dp)
        .background(Color.Blue)
)

Extension properties

atLeastWrapContent

val Dimension.Coercible.atLeastWrapContent: Dimension.MaxCoercible

Sets the lower bound of the current Dimension to be the wrap content size of the child.

atLeastWrapContent

val Dimension.MinCoercible.atLeastWrapContent: Dimension

Sets the lower bound of the current Dimension to be the wrap content size of the child.

atMostWrapContent

val Dimension.Coercible.atMostWrapContent: Dimension.MinCoercible

Sets the upper bound of the current Dimension to be the wrap content size of the child.

atMostWrapContent

val Dimension.MaxCoercible.atMostWrapContent: Dimension

Sets the upper bound of the current Dimension to be the Wrap size of the child.

hasBoundedHeight

@Stable val DpConstraints.hasBoundedHeight: Boolean

Deprecated.

Whether or not the upper bound on the maximum height.

See Also

• hasBoundedWidth

hasBoundedWidth

@Stable val DpConstraints.hasBoundedWidth: Boolean

Deprecated.

Whether or not the upper bound on the maximum width.

See Also

• hasBoundedHeight

hasFixedHeight

@Stable val DpConstraints.hasFixedHeight: Boolean

Deprecated.

Whether there is exactly one height value that satisfies the constraints.

hasFixedWidth

@Stable val DpConstraints.hasFixedWidth: Boolean

Deprecated.

Whether there is exactly one width value that satisfies the constraints.

isZero

@Stable val DpConstraints.isZero: Boolean

Deprecated.

Whether the area of a component respecting these constraints will definitely be 0. This is true when at least one of maxWidth and maxHeight are 0.

satisfiable

@Stable val DpConstraints.satisfiable: Boolean

Deprecated.

Whether there is any size that satisfies the current constraints.