The second Android 11 Developer Preview is now available, test it out and share your feedback.

androidx.ui.layout

Classes

ColumnScope

A ColumnScope provides a scope for the children of a Column.

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.

EdgeInsets

Describes a set of offsets from each of the four sides of a box.

LayoutAspectRatio

A layout modifier that attempts to size a layout to match a specified aspect ratio.

LayoutHeight

Modifies the height of a Compose UI layout element.

LayoutOffset

A LayoutModifier that offsets the position of the wrapped layout with the given horizontal and vertical offsets.

LayoutPadding

A LayoutModifier that adds start, top, end and bottom padding to the wrapped layout.

LayoutSize

Modifies the width and height of a Compose UI layout element together.

LayoutWidth

Modifies the width of a Compose UI layout element.

RowColumnScope

Base class for scopes of Row and Column, containing scoped modifiers.

RowScope

A RowScope provides a scope for the children of a Row.

StackScope

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

TableChildren

Collects information about the children of a Table when its body is executed with a TableChildren as argument.

TableColumnWidth

Used to specify the size of a Table's column.

TableDecorationChildren

Collects the vertical/horizontal offsets of each row/column of a Table that are available to a TableDecoration when its body is executed on a TableDecorationChildren instance.

TableMeasurable

Collects measurements for the children of a column that are available to implementations of TableColumnWidth.

Type-aliases

FlowMainAxisAlignment

TableDecoration

Annotations

LayoutScopeMarker

Enums

FlowCrossAxisAlignment

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

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.None, before: Dp = 0.dp, after: Dp = 0.dp, children: () -> Unit)

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.

Unit
Center(children: () -> Unit)

Note: this composable is deprecated, please use LayoutAlign modifier instead.

Unit
CenterAlignmentLine(alignmentLine: AlignmentLine, modifier: Modifier = Modifier.None, children: () -> Unit)

Layout composable that takes a child and positions it within itself such that the specified alignment line is centered.

Unit
Column(modifier: Modifier = Modifier.None, arrangement: Arrangement.Vertical = Arrangement.Top, children: ColumnScope.() -> Unit)

A layout composable that places its children in a vertical sequence.

Unit
Container(modifier: Modifier = Modifier.None, padding: EdgeInsets = EdgeInsets(0.dp), alignment: Alignment = Alignment.Center, expanded: Boolean = false, constraints: DpConstraints = DpConstraints(), width: Dp? = null, height: Dp? = null, children: () -> Unit)

A convenience composable that combines common layout composables for one child:

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.

LayoutPadding

Layout modifier that applies the same padding of all dp on each side of the wrapped layout.

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.None, arrangement: Arrangement.Horizontal = Arrangement.Start, 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.None, children: StackScope.() -> Unit)

A composable that positions its children relative to its edges.

Unit
Table(columns: Int, alignment: (columnIndex: Int) -> Alignment = { Alignment.TopStart }, columnWidth: (columnIndex: Int) -> TableColumnWidth = { TableColumnWidth.Flex(1f) }, children: TableChildren.() -> Unit)

Layout model that arranges its children into rows and columns.

Unit
Wrap(alignment: Alignment = Alignment.TopStart, children: () -> Unit)

A layout that expects a child and places it within itself.

Extension functions summary

For Density
Constraints

Creates the Constraints corresponding to the current DpConstraints.

DpConstraints

Creates the DpConstraints corresponding to the current Constraints.

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

Top-level functions

AlignmentLineOffset

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

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

Center

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

Note: this composable is deprecated, please use LayoutAlign modifier instead.

A layout that takes a child and centers it within itself. The layout will be as large as possible for finite incoming constraints, or wrap content otherwise.

For a composable that supports other alignments than just center, see Align.

See Also

CenterAlignmentLine

@Composable fun CenterAlignmentLine(
    alignmentLine: AlignmentLine,
    modifier: Modifier = Modifier.None,
    children: () -> Unit
): Unit

Layout composable that takes a child and positions it within itself such that the specified alignment line is centered. The layout will expand to fill the available space in the alignment line axis. If infinite space is available, the layout will wrap the child and add the least possible amount of padding such that the centering will work, assuming that the child provides the alignment line. The layout will wrap the child in the axis opposite to the alignment line axis. If the child does not provide the specified alignment line, the child will be centered in the parent (same behavior as Center). Similarly, if the child decides to be smaller than the min constraints of the layout in the axis opposite to the alignment line axis, the child will be centered with respect to that axis. To make the layout expand to fill the available space in the axis opposite to the alignment line, consider wrapping this composable in an Align.

Parameters
alignmentLine: AlignmentLine the alignment line to be centered in the container

See Also

Column

@Composable fun Column(
    modifier: Modifier = Modifier.None,
    arrangement: Arrangement.Vertical = Arrangement.Top,
    children: ColumnScope.() -> Unit
): Unit

A layout composable that places its children in a vertical sequence.

The layout model is able to assign children heights according to their weights provided using the androidx.ui.layout.RowColumnScope.LayoutWeight 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 size of the Column, use the LayoutHeight modifiers; e.g. to make it fill the available height LayoutWidth.Fill can be used. If at least one child of a Column has a weight, the Column will fill the available space, so there is no need for LayoutWidth.Fill. However, if Column's size should be limited, the LayoutHeight or LayoutHeight.Max layout modifiers should be applied.

When the size of the Column is larger than the sum of of its children sizes, an arrangement 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.LayoutHeight
import androidx.ui.layout.LayoutSize
import androidx.ui.layout.LayoutWidth

Column {
    // The child with no weight will have the specified size.
    Box(LayoutSize(40.dp, 80.dp), backgroundColor = Color.Magenta)
    // Has weight, the child will occupy half of the remaining height.
    Box(LayoutWidth(40.dp) + LayoutWeight(1f), backgroundColor = Color.Yellow)
    // Has weight and does not fill, the child will occupy at most half of the remaining height.
    Box(
        LayoutHeight(80.dp) + LayoutWeight(1f, fill = false),
        backgroundColor = Color.Green
    )
}
Parameters
modifier: Modifier = Modifier.None The modifier to be applied to the Column.
arrangement: Arrangement.Vertical = Arrangement.Top The vertical arrangement of the layout's children.

Container

@Composable fun Container(
    modifier: Modifier = Modifier.None,
    padding: EdgeInsets = EdgeInsets(0.dp),
    alignment: Alignment = Alignment.Center,
    expanded: Boolean = false,
    constraints: DpConstraints = DpConstraints(),
    width: Dp? = null,
    height: Dp? = null,
    children: () -> Unit
): Unit

A convenience composable that combines common layout composables for one child:

  • padding: the padding to be applied to the child
  • alignment: how to position the padded child if the Container is larger than the child
  • constraints: additional Constraints to be enforced when measuring the Container
  • width: the width to be used for the Container
  • height: the height to be used for the Container

When constraints, width and/or height are provided, these will be applied to the constraints incoming from the Container's parent, and might not always be satisfied if this is impossible.

By default, the Container will try to be the size of its child (including padding), or as small as possible within the incoming constraints if that is not possible. If expanded is true, the Container will be as large as possible for bounded incoming constraints. If the padded child is smaller, regardless of the value of expanded, the provided alignment will be used to position it. For unbounded incoming constraints, the Container will wrap its child (same behavior as if expanded was false). Also, note that the measurement information passed for the Container (constraints, width and height) will not be satisfied if the incoming Constraints do not allow it.

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

FlowColumn(
    mainAxisSpacing = 10.dp,
    crossAxisSpacing = 10.dp
) {
    sizes.forEach { size ->
        Box(LayoutSize(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.LayoutSize

FlowRow(
    mainAxisSpacing = 10.dp,
    crossAxisSpacing = 10.dp
) {
    sizes.forEach { size ->
        Box(LayoutSize(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.

LayoutPadding

fun LayoutPadding(all: Dp): LayoutPadding

Layout modifier that applies the same padding of all dp on each side of the wrapped layout. The requested padding will be subtracted from the available space before the wrapped layout has the chance to choose its own size, so conceptually the padding has higher priority to occupy the available space than the content. If you only need to modify the position of the wrapped layout without affecting its size as described above, you should use the LayoutOffset modifier instead. Also note that padding must be non-negative. If you consider using negative (or positive) padding to offset the wrapped layout, LayoutOffset should be used.

Example usage:

import androidx.ui.foundation.Box
import androidx.ui.foundation.DrawBackground
import androidx.ui.layout.LayoutPadding
import androidx.ui.layout.LayoutSize
import androidx.ui.layout.Stack

Stack(modifier = DrawBackground(Color.Gray)) {
    Box(LayoutPadding(all = 20.dp) + LayoutSize(50.dp), backgroundColor = Color.Blue)
}

See Also

MaxIntrinsicHeight

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

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.

Example usage:

import androidx.ui.foundation.Box
import androidx.ui.layout.LayoutAspectRatio
import androidx.ui.layout.LayoutWidth
import androidx.ui.layout.MaxIntrinsicHeight
import androidx.ui.layout.Row
import androidx.ui.layout.Stack

Stack {
    MaxIntrinsicHeight {
        Row {
            val modifier = LayoutHeight.Fill + LayoutWeight(1f)
            Box(modifier + LayoutAspectRatio(2f), backgroundColor = Color.Gray)
            Box(LayoutWidth(1.dp) + LayoutHeight.Fill, backgroundColor = Color.Black)
            Box(modifier + LayoutAspectRatio(1f), backgroundColor = Color.Blue)
        }
    }
}

The sample builds a layout containing two LayoutAspectRatios separated by a divider, where the divider is sized according to the height of the taller LayoutAspectRatio.

Here MaxIntrinsicHeight is adding a speculative height measurement pass for the Row, whose maximum intrinsic height will correspond to the height of the taller AspectRatio. Then MaxIntrinsicHeight will measure the Row with tight height, the same as the premeasured maximum intrinsic height, which due to LayoutHeight.Fill will force the AspectRatios and the divider to use the same height.

MaxIntrinsicWidth

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

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.

Example usage:

import androidx.ui.core.Text
import androidx.ui.foundation.Box
import androidx.ui.layout.Column
import androidx.ui.layout.MaxIntrinsicWidth
import androidx.ui.layout.Stack

Stack {
    MaxIntrinsicWidth {
        Column(LayoutHeight.Fill) {
            Box(LayoutWidth.Fill, backgroundColor = Color.Gray) {
                Text("Short text")
            }
            Box(LayoutWidth.Fill, backgroundColor = Color.Blue) {
                Text("Extremely long text giving the width of its siblings")
            }
            Box(LayoutWidth.Fill, backgroundColor = Color.Magenta) {
                Text("Medium length text")
            }
        }
    }
}

The sample builds a layout containing three Text boxes having the same width as the widest one.

Here MaxIntrinsicWidth is adding a speculative width measurement pass for the Column, whose maximum intrinsic width will correspond to the preferred width of the largest Container. Then MaxIntrinsicWidth will measure the Column with tight width, the same as the premeasured maximum intrinsic width, which due to LayoutWidth.Fill will force the Containers to use the same width. The sample is a layout containing three composables having the same width as the widest one.

MinIntrinsicHeight

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

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.

Example usage:

import androidx.ui.core.Text
import androidx.ui.foundation.Box
import androidx.ui.layout.LayoutWidth
import androidx.ui.layout.MinIntrinsicHeight
import androidx.ui.layout.Row
import androidx.ui.layout.Stack

Stack {
    MinIntrinsicHeight {
        Row {
            Text(
                text = "This is a really short text",
                modifier = LayoutWeight(1f) + LayoutHeight.Fill
            )
            Box(LayoutWidth(1.dp) + LayoutHeight.Fill, 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 = LayoutWeight(1f) + LayoutHeight.Fill
            )
        }
    }
}

The sample 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 MinIntrinsicHeight is adding a speculative height measurement pass for the Row, whose minimum intrinsic height will correspond to the height of the largest Text. Then MinIntrinsicHeight will measure the Row with tight height, the same as the premeasured minimum intrinsic height, which due to LayoutHeight.Fill will force the Texts and the divider to use the same height.

MinIntrinsicWidth

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

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.

Example usage:

import androidx.ui.foundation.Box
import androidx.ui.layout.Column
import androidx.ui.layout.LayoutSize
import androidx.ui.layout.MinIntrinsicWidth
import androidx.ui.layout.Stack

Stack {
    MinIntrinsicWidth {
        Column(LayoutHeight.Fill) {
            Box(
                modifier = LayoutWidth.Fill + LayoutSize(20.dp, 10.dp),
                backgroundColor = Color.Gray
            )
            Box(
                modifier = LayoutWidth.Fill + LayoutSize(30.dp, 10.dp),
                backgroundColor = Color.Blue
            )
            Box(
                modifier = LayoutWidth.Fill + LayoutSize(10.dp, 10.dp),
                backgroundColor = Color.Magenta
            )
        }
    }
}

The sample builds a layout containing three Container having the same width as the widest one.

Here MinIntrinsicWidth is adding a speculative width measurement pass for the Column, whose minimum intrinsic width will correspond to the preferred width of the largest Container. Then MinIntrinsicWidth will measure the Column with tight width, the same as the premeasured minimum intrinsic width.

Row

@Composable fun Row(
    modifier: Modifier = Modifier.None,
    arrangement: Arrangement.Horizontal = Arrangement.Start,
    children: RowScope.() -> Unit
): Unit

A layout composable that places its children in a horizontal sequence.

The layout model is able to assign children widths according to their weights provided using the androidx.ui.layout.RowColumnScope.LayoutWeight 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 size of the Row, use the LayoutWidth modifiers; e.g. to make it fill the available width LayoutWidth.Fill can be used. If at least one child of a Row has a weight, the Row will fill the available space, so there is no need for LayoutWidth.Fill. However, if Row's size should be limited, the LayoutWidth or LayoutWidth.Max layout modifiers should be applied.

When the size of the Row is larger than the sum of of its children sizes, an arrangement 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.LayoutHeight
import androidx.ui.layout.LayoutSize
import androidx.ui.layout.Row

Row {
    // The child with no weight will have the specified size.
    Box(LayoutSize(40.dp, 80.dp), backgroundColor = Color.Magenta)
    // Has weight, the child will occupy half of the remaining width.
    Box(LayoutHeight(40.dp) + LayoutWeight(1f), backgroundColor = Color.Yellow)
    // Has weight and does not fill, the child will occupy at most half of the remaining width.
    Box(
        LayoutHeight(80.dp) + LayoutWeight(1f, fill = false),
        backgroundColor = Color.Green
    )
}
Parameters
modifier: Modifier = Modifier.None The modifier to be applied to the Row.
arrangement: Arrangement.Horizontal = Arrangement.Start The horizontal arrangement of the layout's children.

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.LayoutSize
import androidx.ui.layout.LayoutWidth
import androidx.ui.layout.Row
import androidx.ui.layout.Spacer

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

Stack

@Composable fun Stack(
    modifier: Modifier = Modifier.None,
    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 LayoutGravity options to define how to position a target component inside the Stack box.

Example usage:

import androidx.ui.foundation.Box
import androidx.ui.layout.LayoutPadding
import androidx.ui.layout.LayoutSize
import androidx.ui.layout.Stack

Stack {
    Box(LayoutSize.Fill, backgroundColor = Color.Cyan)
    Box(
        LayoutGravity.Stretch + LayoutPadding(top = 20.dp, bottom = 20.dp),
        backgroundColor = Color.Yellow
    )
    Box(LayoutGravity.Stretch + LayoutPadding(40.dp), backgroundColor = Color.Magenta)
    Box(LayoutGravity.Center + LayoutSize(300.dp, 300.dp), backgroundColor = Color.Green)
    Box(LayoutGravity.TopStart + LayoutSize(150.dp, 150.dp), backgroundColor = Color.Red)
    Box(
        LayoutGravity.BottomEnd + LayoutSize(150.dp, 150.dp),
        backgroundColor = Color.Blue
    )
}

Table

@Composable fun Table(
    columns: Int,
    alignment: (columnIndex: Int) -> Alignment = { Alignment.TopStart },
    columnWidth: (columnIndex: Int) -> TableColumnWidth = { TableColumnWidth.Flex(1f) },
    children: TableChildren.() -> Unit
): Unit

Layout model that arranges its children into rows and columns.

Example usage:

import androidx.ui.foundation.Box
import androidx.ui.layout.LayoutAspectRatio
import androidx.ui.layout.LayoutPadding
import androidx.ui.layout.Table

Table(columns = 8) {
    for (i in 0 until 8) {
        tableRow {
            for (j in 0 until 8) {
                Box(
                    LayoutPadding(2.dp) + LayoutAspectRatio(1f),
                    backgroundColor = Color.Magenta
                )
            }
        }
    }
}
import androidx.ui.foundation.Box
import androidx.ui.layout.LayoutHeight
import androidx.ui.layout.LayoutPadding
import androidx.ui.layout.LayoutSize
import androidx.ui.layout.Table

val padding = LayoutPadding(2.dp)
Table(
    columns = 5,
    columnWidth = { columnIndex ->
        when (columnIndex) {
            0 -> TableColumnWidth.Wrap
            1 -> TableColumnWidth.Flex(flex = 1f)
            2 -> TableColumnWidth.Flex(flex = 3f)
            3 -> TableColumnWidth.Fixed(width = 50.dp)
            else -> TableColumnWidth.Fraction(fraction = 0.5f)
        }
    }
) {
    for (i in 0 until 8) {
        tableRow {
            Box(padding + LayoutSize(25.dp, 25.dp), backgroundColor = Color.Magenta)
            for (j in 1 until 5) {
                Box(padding + LayoutHeight(25.dp), backgroundColor = Color.Magenta)
            }
        }
    }
}

Wrap

@Composable fun Wrap(
    alignment: Alignment = Alignment.TopStart,
    children: () -> Unit
): Unit

Deprecated.

A layout that expects a child and places it within itself. The child will be measured with the same max constraints received by the parent, and 0 ipx min constraints. The parent will try to size itself to be as large as the child. If this is not possible (the child is too small and does not satisfy the min constraints of the parent), the parent will size itself to min constraints and the child will be aligned according to the alignment.

For a composable that does alignment and tries to be as large as possible, see Align.

Extension functions

Constraints

fun Density.Constraints(dpConstraints: DpConstraints): Constraints

Creates the Constraints corresponding to the current DpConstraints.

DpConstraints

fun Density.DpConstraints(constraints: Constraints): DpConstraints

Creates the DpConstraints corresponding to the current Constraints.

enforce

fun DpConstraints.enforce(otherConstraints: DpConstraints): DpConstraints

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

offset

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.

Extension properties

hasBoundedHeight

val DpConstraints.hasBoundedHeight: Boolean

Whether or not the upper bound on the maximum height.

See Also

hasBoundedWidth

val DpConstraints.hasBoundedWidth: Boolean

Whether or not the upper bound on the maximum width.

See Also

hasFixedHeight

val DpConstraints.hasFixedHeight: Boolean

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

hasFixedWidth

val DpConstraints.hasFixedWidth: Boolean

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

isZero

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.

satisfiable

val DpConstraints.satisfiable: Boolean

Whether there is any size that satisfies the current constraints.