androidx.ui.layout

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.

ConstraintSetBuilderScope

Builder scope for a ConstraintSet.

ConstraintSetScope

Scope used by the ConstraintSet DSL.

CrossAxisAlignment

Used to specify the alignment of a layout's children, in cross axis direction.

DpConstraints

Similar to Constraints, but with constraint values expressed in Dp.

InnerPadding

Describes a padding to be applied along the edges inside a box.

StackScope

A StackScope provides a scope for the children of a Stack.

State

The state of the ConstraintLayout solver.

Type-aliases

FlowMainAxisAlignment

Annotations

ExperimentalLayout

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
AlignmentLineOffset(alignmentLine: AlignmentLine, modifier: Modifier = Modifier, before: Dp = 0.dp, after: Dp = 0.dp, children: () -> Unit)

Note: This composable is on the deprecation path and will be soon replaced with a Modifier.

Unit
Column(modifier: Modifier = Modifier, verticalArrangement: Arrangement.Vertical = Arrangement.Top, horizontalGravity: 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
ConstraintSet2(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, verticalGravity: 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, children: StackScope.() -> Unit)

A composable that positions its children relative to its edges.

Extension functions summary

For Density
Constraints

Creates the Constraints corresponding to the current DpConstraints.

DpConstraints

Creates the DpConstraints corresponding to the current Constraints.

For Modifier
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, 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

Have the content fill the Constraints.maxHeight of the incoming measurement constraints by setting the minimum height to be equal to the maximum height.

Modifier

Have the content fill the Constraints.maxWidth and Constraints.maxHeight of the incoming measurement constraints by setting the minimum width to be equal to the maximum width and the minimum height to be equal to the maximum height.

Modifier

Have the content fill the Constraints.maxWidth of the incoming measurement constraints by setting the minimum width to be equal to the maximum width.

Modifier
Modifier.height(height: Dp)

Declare the height of the content to be exactly heightdp.

Modifier
Modifier.heightIn(minHeight: Dp = Dp.Unspecified, maxHeight: Dp = Dp.Unspecified)

Constrain the height of the content to be between minHeightdp and maxHeightdp.

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, ypx).

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 InnerPadding to the component as additional space along each edge of the content's left, top, right and 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(minHeight: Dp = Dp.Unspecified, maxHeight: Dp = Dp.Unspecified)

Constrain the height of the content to be between minHeightdp and maxHeightdp 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

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

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(minWidth: Dp = Dp.Unspecified, maxWidth: Dp = Dp.Unspecified)

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

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

Allow the content to be positioned according to the specified offset relative to the alignment line, subject to the incoming layout constraints.

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

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(minWidth: Dp = Dp.Unspecified, maxWidth: Dp = Dp.Unspecified)

Constrain the width of the content to be between minWidthdp and maxWidthdp.

Modifier
Modifier.wrapContentHeight(align: Alignment.Vertical = Alignment.CenterVertically)

Allow the content to measure at its desired height without regard for the incoming measurement minimum height constraint.

Modifier
Modifier.wrapContentSize(align: Alignment = Alignment.Center)

Allow the content to measure at its desired size without regard for the incoming measurement minimum width or minimum height constraints.

Modifier
Modifier.wrapContentWidth(align: Alignment.Horizontal = Alignment.CenterHorizontally)

Allow the content to measure at its desired width without regard for the incoming measurement minimum width constraint.

For Coercible
Dimension.MaxCoercible

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

Dimension.MinCoercible

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

For MinCoercible
Dimension

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

For MaxCoercible
Dimension

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

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

Dimension.MinCoercible

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

For MinCoercible
Dimension

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

For MaxCoercible
Dimension

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

For DpConstraints
Boolean

Whether or not the upper bound on the maximum height.

Boolean

Whether or not the upper bound on the maximum width.

Boolean

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

Boolean

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

Boolean

Whether the area of a component respecting these constraints will definitely be 0.

Boolean

Whether there is any size that satisfies the current constraints.

For Modifier
Modifier

Modifier that changes the LayoutDirection of the wrapped layout to LayoutDirection.Ltr.

Modifier

Modifier that changes the LayoutDirection of the wrapped layout to LayoutDirection.Rtl.

Top-level functions

AlignmentLineOffset

@Composable fun AlignmentLineOffset(
    alignmentLine: AlignmentLine,
    modifier: Modifier = Modifier,
    before: Dp = 0.dp,
    after: Dp = 0.dp,
    children: () -> Unit
): Unit

Deprecated.

Note: This composable is on the deprecation path and will be soon replaced with a Modifier.

Layout composable that takes a child and tries to position it within itself according to specified offsets relative to an alignment line, subject to the incoming layout constraints. The AlignmentLineOffset layout will try to size itself to wrap the child and include the needed padding, such that the distance from the AlignmentLineOffset borders to the AlignmentLine of the child will be before and after, respectively. The before and after values will be interpreted as offsets on the axis corresponding to the alignment line.

Parameters
alignmentLine: AlignmentLine the alignment line to be used for positioning the child
before: Dp = 0.dp the offset between the left or top container border and the alignment line
after: Dp = 0.dp the offset between the bottom or right container border and the alignment line

Column

@Composable fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalGravity: 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.ui.foundation.Box
import androidx.ui.layout.Column
import androidx.ui.layout.preferredSize
import androidx.ui.layout.preferredWidth

Column {
    // The child with no weight will have the specified size.
    Box(Modifier.preferredSize(40.dp, 80.dp), backgroundColor = Color.Magenta)
    // Has weight, the child will occupy half of the remaining height.
    Box(Modifier.preferredWidth(40.dp).weight(1f), backgroundColor = 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),
        backgroundColor = 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.
horizontalGravity: Alignment.Horizontal = Alignment.Start The horizontal gravity of the layout's children.

See Also

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.ui.foundation.Text
import androidx.ui.layout.ConstraintLayout
import androidx.ui.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.ui.core.tag
import androidx.ui.foundation.Text
import androidx.ui.layout.ConstraintLayout
import androidx.ui.layout.ConstraintSet2
import androidx.ui.layout.atMost

ConstraintLayout(ConstraintSet2 {
    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.tag("text1"))
    Text("Text2", Modifier.tag("text2"))
    Text("This is a very long text", Modifier.tag("text3"))
}

ConstraintSet

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

Deprecated.

ConstraintSet2

fun ConstraintSet2(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.ui.foundation.Box
import androidx.ui.layout.FlowColumn
import androidx.ui.layout.preferredSize

FlowColumn(
    mainAxisSpacing = 10.dp,
    crossAxisSpacing = 10.dp
) {
    sizes.forEach { size ->
        Box(Modifier.preferredSize(20.dp, size), backgroundColor = 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.ui.foundation.Box
import androidx.ui.layout.FlowRow
import androidx.ui.layout.preferredSize

FlowRow(
    mainAxisSpacing = 10.dp,
    crossAxisSpacing = 10.dp
) {
    sizes.forEach { size ->
        Box(Modifier.preferredSize(size, 20.dp), backgroundColor = 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 fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalGravity: 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.ui.foundation.Box
import androidx.ui.layout.Row
import androidx.ui.layout.preferredHeight
import androidx.ui.layout.preferredSize

Row {
    // The child with no weight will have the specified size.
    Box(Modifier.preferredSize(40.dp, 80.dp), backgroundColor = Color.Magenta)
    // Has weight, the child will occupy half of the remaining width.
    Box(Modifier.preferredHeight(40.dp).weight(1f), backgroundColor = 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),
        backgroundColor = 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.
verticalGravity: Alignment.Vertical = Alignment.Top The vertical gravity of the layout's children.

See Also

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.ui.foundation.Box
import androidx.ui.layout.Row
import androidx.ui.layout.Spacer
import androidx.ui.layout.preferredSize
import androidx.ui.layout.preferredWidth

Row {
    Box(Modifier.preferredSize(100.dp), backgroundColor = Color.Red)
    Spacer(Modifier.preferredWidth(20.dp))
    Box(Modifier.preferredSize(100.dp), backgroundColor = Color.Magenta)
    Spacer(Modifier.weight(1f))
    Box(Modifier.preferredSize(100.dp), backgroundColor = Color.Black)
}
Parameters
modifier: Modifier modifiers to set to this spacer

Stack

@Composable fun Stack(
    modifier: Modifier = Modifier,
    children: StackScope.() -> Unit
): Unit

A 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 Stack. Use StackScope.gravity modifier to define the position of the target element inside the Stack box.

Example usage:

import androidx.ui.foundation.Box
import androidx.ui.layout.Stack
import androidx.ui.layout.fillMaxSize
import androidx.ui.layout.padding
import androidx.ui.layout.preferredSize

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

Extension functions

Constraints

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

Creates the Constraints corresponding to the current DpConstraints.

DpConstraints

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

Creates the DpConstraints corresponding to the current Constraints.

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.ui.foundation.Box
import androidx.ui.foundation.drawBackground
import androidx.ui.layout.Stack
import androidx.ui.layout.absolutePadding
import androidx.ui.layout.preferredSize

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

aspectRatio

@Stable fun Modifier.aspectRatio(@FloatRange(0.0, 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.ui.foundation.Box
import androidx.ui.layout.aspectRatio
import androidx.ui.layout.preferredWidth

Box(Modifier.preferredWidth(100.dp).aspectRatio(2f), backgroundColor = 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.ui.foundation.Box
import androidx.ui.layout.defaultMinSizeConstraints
import androidx.ui.layout.sizeIn

@Composable
fun DefaultMinBox(modifier: Modifier = Modifier) {
    Box(
        modifier.defaultMinSizeConstraints(minWidth = 100.dp, minHeight = 100.dp),
        backgroundColor = 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

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

fillMaxHeight

@Stable fun Modifier.fillMaxHeight(): Modifier

Have the content fill the Constraints.maxHeight of the incoming measurement constraints by setting the minimum height to be equal to the maximum height. If the incoming maximum height is Constraints.Infinity this modifier will have no effect.

Example usage:

import androidx.ui.foundation.Box
import androidx.ui.foundation.drawBackground
import androidx.ui.layout.fillMaxHeight
import androidx.ui.layout.preferredSize

Box(Modifier.fillMaxHeight(), backgroundColor = Color.Red, gravity = ContentGravity.Center) {
    Box(Modifier.preferredSize(100.dp).drawBackground(Color.Magenta))
}

fillMaxSize

@Stable fun Modifier.fillMaxSize(): Modifier

Have the content fill the Constraints.maxWidth and Constraints.maxHeight of the incoming measurement constraints by setting the minimum width to be equal to the maximum width and the minimum height to be equal to the maximum height. If the incoming maximum width or height is Constraints.Infinity this modifier will have no effect in that dimension.

Example usage:

import androidx.ui.foundation.Box
import androidx.ui.foundation.drawBackground
import androidx.ui.layout.fillMaxSize
import androidx.ui.layout.preferredSize

Box(Modifier.fillMaxSize(), backgroundColor = Color.Red, gravity = ContentGravity.Center) {
    Box(Modifier.preferredSize(100.dp).drawBackground(Color.Magenta))
}

fillMaxWidth

@Stable fun Modifier.fillMaxWidth(): Modifier

Have the content fill the Constraints.maxWidth of the incoming measurement constraints by setting the minimum width to be equal to the maximum width. If the incoming maximum width is Constraints.Infinity this modifier will have no effect.

Example usage:

import androidx.ui.foundation.Box
import androidx.ui.foundation.drawBackground
import androidx.ui.layout.fillMaxWidth
import androidx.ui.layout.preferredSize

Box(Modifier.fillMaxWidth(), backgroundColor = Color.Red, gravity = ContentGravity.Center) {
    Box(Modifier.preferredSize(100.dp).drawBackground(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.ui.foundation.Box
import androidx.ui.layout.aspectRatio
import androidx.ui.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),
    backgroundColor = Color.Blue
)

heightIn

@Stable fun Modifier.heightIn(
    minHeight: Dp = Dp.Unspecified,
    maxHeight: Dp = Dp.Unspecified
): Modifier

Constrain 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.

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.ui.foundation.Text
import androidx.ui.layout.fillMaxSize
import androidx.ui.layout.offset
import androidx.ui.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)
        .offset(10.dp, 20.dp)
)

offset

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

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, ypx). 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.state
import androidx.ui.core.gesture.tapGestureFilter
import androidx.ui.foundation.Text
import androidx.ui.layout.offsetPx

// This text will be offset in steps of 10.dp from the top left of the available space.
val offset = state { 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.ui.foundation.Box
import androidx.ui.foundation.drawBackground
import androidx.ui.layout.Stack
import androidx.ui.layout.padding
import androidx.ui.layout.preferredSize

Stack(Modifier.drawBackground(Color.Gray)) {
    Box(
        Modifier.padding(start = 20.dp, top = 30.dp, end = 20.dp, bottom = 30.dp)
            .preferredSize(50.dp),
        backgroundColor = 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.ui.foundation.Box
import androidx.ui.foundation.drawBackground
import androidx.ui.layout.Stack
import androidx.ui.layout.padding
import androidx.ui.layout.preferredSize

Stack(Modifier.drawBackground(Color.Gray)) {
    Box(
        Modifier.padding(horizontal = 20.dp, vertical = 30.dp).preferredSize(50.dp),
        backgroundColor = 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.ui.foundation.Box
import androidx.ui.foundation.drawBackground
import androidx.ui.layout.Stack
import androidx.ui.layout.padding
import androidx.ui.layout.preferredSize

Stack(Modifier.drawBackground(Color.Gray)) {
    Box(Modifier.padding(all = 20.dp).preferredSize(50.dp), backgroundColor = Color.Blue)
}

padding

fun Modifier.padding(padding: InnerPadding): Modifier

Apply InnerPadding 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.ui.foundation.Box
import androidx.ui.foundation.drawBackground
import androidx.ui.layout.InnerPadding
import androidx.ui.layout.Stack
import androidx.ui.layout.padding
import androidx.ui.layout.preferredSize

val innerPadding = InnerPadding(top = 10.dp, start = 15.dp)
Stack(Modifier.drawBackground(Color.Gray)) {
    Box(Modifier.padding(innerPadding).preferredSize(50.dp), backgroundColor = 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.ui.foundation.Box
import androidx.ui.foundation.Text
import androidx.ui.layout.Row
import androidx.ui.layout.Stack
import androidx.ui.layout.fillMaxHeight
import androidx.ui.layout.preferredHeight
import androidx.ui.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.
Stack {
    Row(Modifier.preferredHeight(IntrinsicSize.Min)) {
        Text(
            text = "This is a really short text",
            modifier = Modifier.weight(1f).fillMaxHeight()
        )
        Box(Modifier.preferredWidth(1.dp).fillMaxHeight(), backgroundColor = 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.ui.foundation.Box
import androidx.ui.layout.Row
import androidx.ui.layout.Stack
import androidx.ui.layout.aspectRatio
import androidx.ui.layout.fillMaxHeight
import androidx.ui.layout.preferredHeight
import androidx.ui.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.
//
Stack {
    Row(Modifier.preferredHeight(IntrinsicSize.Max)) {
        val modifier = Modifier.fillMaxHeight().weight(1f)
        Box(modifier.aspectRatio(2f), backgroundColor = Color.Gray)
        Box(Modifier.preferredWidth(1.dp).fillMaxHeight(), backgroundColor = Color.Black)
        Box(modifier.aspectRatio(1f), backgroundColor = 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.ui.foundation.Box
import androidx.ui.layout.Stack
import androidx.ui.layout.aspectRatio
import androidx.ui.layout.preferredHeight

Stack {
    Box(Modifier.preferredHeight(100.dp).aspectRatio(1f), backgroundColor = Color.Blue)
}

preferredHeightIn

@Stable fun Modifier.preferredHeightIn(
    minHeight: Dp = Dp.Unspecified,
    maxHeight: Dp = Dp.Unspecified
): Modifier

Constrain the height of the content to be between minHeightdp and maxHeightdp 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.ui.foundation.Box
import androidx.ui.layout.Stack
import androidx.ui.layout.preferredSize

Stack {
    Box(Modifier.preferredSize(100.dp, 100.dp), backgroundColor = 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.ui.foundation.Box
import androidx.ui.layout.Stack
import androidx.ui.layout.preferredSize

Stack {
    Box(Modifier.preferredSize(100.dp, 100.dp), backgroundColor = Color.Red)
}

preferredSizeIn

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

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.ui.foundation.Box
import androidx.ui.layout.Column
import androidx.ui.layout.Stack
import androidx.ui.layout.fillMaxHeight
import androidx.ui.layout.fillMaxWidth
import androidx.ui.layout.preferredSize
import androidx.ui.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.
Stack {
    Column(Modifier.preferredWidth(IntrinsicSize.Min).fillMaxHeight()) {
        Box(
            modifier = Modifier.fillMaxWidth().preferredSize(20.dp, 10.dp),
            backgroundColor = Color.Gray
        )
        Box(
            modifier = Modifier.fillMaxWidth().preferredSize(30.dp, 10.dp),
            backgroundColor = Color.Blue
        )
        Box(
            modifier = Modifier.fillMaxWidth().preferredSize(10.dp, 10.dp),
            backgroundColor = Color.Magenta
        )
    }
}
Example usage for max intrinsic:
import androidx.ui.foundation.Box
import androidx.ui.foundation.Text
import androidx.ui.layout.Column
import androidx.ui.layout.Stack
import androidx.ui.layout.fillMaxHeight
import androidx.ui.layout.fillMaxWidth
import androidx.ui.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.

Stack {
    Column(Modifier.preferredWidth(IntrinsicSize.Max).fillMaxHeight()) {
        Box(Modifier.fillMaxWidth(), backgroundColor = Color.Gray) {
            Text("Short text")
        }
        Box(Modifier.fillMaxWidth(), backgroundColor = Color.Blue) {
            Text("Extremely long text giving the width of its siblings")
        }
        Box(Modifier.fillMaxWidth(), backgroundColor = 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.ui.foundation.Box
import androidx.ui.layout.Stack
import androidx.ui.layout.aspectRatio
import androidx.ui.layout.preferredWidth

Stack {
    Box(Modifier.preferredWidth(100.dp).aspectRatio(1f), backgroundColor = Color.Magenta)
}

preferredWidthIn

@Stable fun Modifier.preferredWidthIn(
    minWidth: Dp = Dp.Unspecified,
    maxWidth: Dp = Dp.Unspecified
): Modifier

Constrain the width of the content to be between minWidthdp and maxWidthdp 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 = 0.dp,
    after: Dp = 0.dp
): Modifier

Allow the content to be positioned according to the specified offset relative to the alignment line, subject to the incoming layout constraints.

The modified layout will include the needed padding, such that the distance from its borders to the alignmentLine of the content box will be before and after, respectively. The before and after values will be interpreted as offsets on the axis corresponding to the alignment line.

import androidx.ui.foundation.Text
import androidx.ui.layout.relativePaddingFrom

Text(
    text = "This is an example.",
    modifier = Modifier.relativePaddingFrom(FirstBaseline, before = 30.dp)
)
Parameters
alignmentLine: AlignmentLine the alignment line to be used for positioning the content
before: Dp = 0.dp the offset between the container's top edge and the horizontal alignment line, or the container's start edge and the vertical alignment line
after: Dp = 0.dp

the offset 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.ui.foundation.Box
import androidx.ui.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),
    backgroundColor = 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.ui.foundation.Box
import androidx.ui.layout.aspectRatio
import androidx.ui.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),
    backgroundColor = Color.Magenta
)

sizeIn

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

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.ui.foundation.Box
import androidx.ui.layout.aspectRatio
import androidx.ui.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),
    backgroundColor = Color.Magenta
)

widthIn

@Stable fun Modifier.widthIn(
    minWidth: Dp = Dp.Unspecified,
    maxWidth: Dp = Dp.Unspecified
): Modifier

Constrain the width of the content to be between minWidthdp and maxWidthdp. 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): Modifier

Allow the content to measure at its desired height without regard for the incoming measurement minimum height constraint. If the content's measured size is smaller than the minimum height constraint, align it within that minimum height space.

Example usage:

import androidx.ui.foundation.Box
import androidx.ui.layout.preferredHeight
import androidx.ui.layout.preferredSize
import androidx.ui.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),
    backgroundColor = Color.Blue
)

wrapContentSize

@Stable fun Modifier.wrapContentSize(align: Alignment = Alignment.Center): Modifier

Allow the content to measure at its desired size without regard for the incoming measurement minimum width or minimum height constraints. If the content's measured size is smaller than the minimum size constraint, align it within that minimum sized space.

Example usage:

import androidx.ui.foundation.Box
import androidx.ui.layout.preferredSize
import androidx.ui.layout.preferredSizeIn
import androidx.ui.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),
    backgroundColor = Color.Blue
)

wrapContentWidth

@Stable fun Modifier.wrapContentWidth(align: Alignment.Horizontal = Alignment.CenterHorizontally): Modifier

Allow the content to measure at its desired width without regard for the incoming measurement minimum width constraint. If the content's measured size is smaller than the minimum width constraint, align it within that minimum width space.

Example usage:

import androidx.ui.foundation.Box
import androidx.ui.layout.preferredSize
import androidx.ui.layout.preferredWidth
import androidx.ui.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),
    backgroundColor = 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

Whether or not the upper bound on the maximum height.

See Also

hasBoundedWidth

@Stable val DpConstraints.hasBoundedWidth: Boolean

Whether or not the upper bound on the maximum width.

See Also

hasFixedHeight

@Stable val DpConstraints.hasFixedHeight: Boolean

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

hasFixedWidth

@Stable val DpConstraints.hasFixedWidth: Boolean

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

isZero

@Stable val DpConstraints.isZero: Boolean

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.

ltr

val Modifier.ltr: Modifier

Modifier that changes the LayoutDirection of the wrapped layout to LayoutDirection.Ltr.

rtl

val Modifier.rtl: Modifier

Modifier that changes the LayoutDirection of the wrapped layout to LayoutDirection.Rtl.

satisfiable

@Stable val DpConstraints.satisfiable: Boolean

Whether there is any size that satisfies the current constraints.