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

androidx.ui.layout

Classes

Arrangement

Used to specify the arrangement of the layout's children in Row or Column in the main axis direction (horizontal and vertical, respectively).

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.

FlexScope

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

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.

LayoutPadding

A LayoutModifier that adds left, top, right 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.

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
Align(alignment: Alignment, children: () -> Unit)

A layout that takes a child and aligns it within itself, according to the alignment parameter.

Unit
AlignmentLineOffset(alignmentLine: AlignmentLine, 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)

A layout that takes a child and centers it within itself.

Unit
CenterAlignmentLine(alignmentLine: AlignmentLine, 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 = Arrangement.Begin, 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 target 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 = Arrangement.Begin, 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.TopLeft }, 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.TopLeft, 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

Align

@Composable fun Align(
    alignment: Alignment,
    children: () -> Unit
): Unit

A layout that takes a child and aligns it within itself, according to the alignment parameter. The layout will be as large as possible for finite incoming constraints, or wrap content otherwise.

Example usage:

import androidx.ui.layout.Align

Align(Alignment.BottomRight) {
    SizedRectangle(color = Color.Blue, width = 20.dp, height = 20.dp)
}
For a composable that just does center alignment, see Center.For a composable that does alignment and tries to be the same size as its child, see Wrap.

See Also

AlignmentLineOffset

@Composable fun AlignmentLineOffset(
    alignmentLine: AlignmentLine,
    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

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.

Example usage:

import androidx.ui.layout.Center

Center {
    SizedRectangle(color = Color.Blue, width = 20.dp, height = 20.dp)
}
For a composable that supports other alignments than just center, see Align.For a composable that does alignment and tries to be the same size as its child, see Wrap.

See Also

CenterAlignmentLine

@Composable fun CenterAlignmentLine(
    alignmentLine: AlignmentLine,
    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 = Arrangement.Begin,
    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 flex weights provided using the androidx.ui.layout.FlexScope.LayoutFlexible modifier. If a child is not flexible, it will be considered inflexible and will be sized to its preferred width.

When all children of a Column are inflexible, it 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; to make it fill the available height LayoutWidth.Fill can be used. If at least one child of a Column is flexible, 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.layout.Column

Column {
    // The child with no flexibility modifier is inflexible and will have the specified size.
    SizedRectangle(color = Color.Magenta, width = 40.dp, height = 80.dp)
    // Flexible, the child will occupy have of the remaining height.
    SizedRectangle(LayoutFlexible(1f), color = Color.Yellow, width = 40.dp)
    // Flexible not tight, the child will occupy at most half of the remaining height.
    SizedRectangle(LayoutFlexible(1f, tight = false), color = Color.Green, width = 80.dp)
}
Parameters
modifier: Modifier = Modifier.None The modifier to be applied to the Column.
arrangement: Arrangement = Arrangement.Begin 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.layout.FlowColumn

FlowColumn(
    mainAxisSpacing = 10.dp,
    crossAxisSpacing = 10.dp
) {
    sizes.forEach { size ->
        SizedRectangle(color = Color.Magenta, width = 20.dp, height = size)
    }
}
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.layout.FlowRow

FlowRow(
    mainAxisSpacing = 10.dp,
    crossAxisSpacing = 10.dp
) {
    sizes.forEach { size ->
        SizedRectangle(color = Color.Magenta, width = size, height = 20.dp)
    }
}
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 target layout.

Example usage:

import androidx.ui.layout.Align
import androidx.ui.layout.Container
import androidx.ui.layout.LayoutPadding

Align(Alignment.TopLeft) {
    Container {
        DrawRectangle(Color.Gray)
        SizedRectangle(
            modifier = LayoutPadding(all = 20.dp),
            color = Color.Blue,
            width = 50.dp,
            height = 50.dp
        )
    }
}

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.shape.DrawShape
import androidx.ui.layout.LayoutAspectRatio
import androidx.ui.layout.Container
import androidx.ui.layout.MaxIntrinsicHeight
import androidx.ui.layout.Row
import androidx.ui.layout.Wrap

Wrap {
    MaxIntrinsicHeight {
        Row {
            val modifier = LayoutHeight.Fill + LayoutFlexible(1f)
            Container(modifier + LayoutAspectRatio(2f)) {
                DrawShape(RectangleShape, Color.Gray)
            }
            Container(width = 1.dp, modifier = LayoutHeight.Fill) {
                DrawShape(RectangleShape, Color.Black)
            }
            Container(modifier + LayoutAspectRatio(1f)) {
                DrawShape(RectangleShape, 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.shape.DrawShape
import androidx.ui.layout.Column
import androidx.ui.layout.Container
import androidx.ui.layout.MaxIntrinsicWidth
import androidx.ui.layout.Wrap

Wrap {
    MaxIntrinsicWidth {
        Column(LayoutHeight.Fill) {
            Container(LayoutWidth.Fill) {
                DrawShape(RectangleShape, Color.Gray)
                Text("Short text")
            }
            Container(LayoutWidth.Fill) {
                DrawShape(RectangleShape, Color.Blue)
                Text("Extremely long text giving the width of its siblings")
            }
            Container(LayoutWidth.Fill) {
                DrawShape(RectangleShape, 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.shape.DrawShape
import androidx.ui.layout.Container
import androidx.ui.layout.MinIntrinsicHeight
import androidx.ui.layout.Row
import androidx.ui.layout.Wrap

Wrap {
    MinIntrinsicHeight {
        Row {
            Text(
                text = "This is a really short text",
                modifier = LayoutFlexible(1f) + LayoutHeight.Fill
            )
            Container(width = 1.dp, modifier = LayoutHeight.Fill) {
                DrawShape(RectangleShape, 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 = LayoutFlexible(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.shape.DrawShape
import androidx.ui.layout.Column
import androidx.ui.layout.Container
import androidx.ui.layout.LayoutSize
import androidx.ui.layout.MinIntrinsicWidth
import androidx.ui.layout.Wrap

Wrap {
    MinIntrinsicWidth {
        Column(LayoutHeight.Fill) {
            Container(modifier = LayoutWidth.Fill + LayoutSize(20.dp, 10.dp)) {
                DrawShape(RectangleShape, Color.Gray)
            }
            Container(modifier = LayoutWidth.Fill + LayoutSize(30.dp, 10.dp)) {
                DrawShape(RectangleShape, Color.Blue)
            }
            Container(modifier = LayoutWidth.Fill + LayoutSize(10.dp, 10.dp)) {
                DrawShape(RectangleShape, 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 = Arrangement.Begin,
    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 flex weights provided using the androidx.ui.layout.FlexScope.LayoutFlexible modifier. If a child is not flexible, it will be considered inflexible and will be sized to its preferred width.

When all children of a Row are inflexible, it 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; to make it fill the available width LayoutWidth.Fill can be used. If at least one child of a Row is flexible, 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.layout.Row

Row {
    // The child with no flexibility modifier is inflexible and will have the specified size.
    SizedRectangle(color = Color.Magenta, width = 40.dp, height = 80.dp)
    // Flexible, the child will occupy have of the remaining width.
    SizedRectangle(LayoutFlexible(1f), color = Color.Yellow, height = 40.dp)
    // Flexible not tight, the child will occupy at most half of the remaining width.
    SizedRectangle(LayoutFlexible(1f, tight = false), color = Color.Green, height = 80.dp)
}
Parameters
modifier: Modifier = Modifier.None The modifier to be applied to the Row.
arrangement: Arrangement = Arrangement.Begin 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.layout.LayoutWidth
import androidx.ui.layout.Row
import androidx.ui.layout.Spacer

Row {
    SizedRectangle(color = Color.Red, width = 100.dp, height = 100.dp)
    Spacer(modifier = LayoutWidth(20.dp))
    SizedRectangle(color = Color.Magenta, width = 100.dp, height = 100.dp)
    Spacer(modifier = LayoutFlexible(1f))
    SizedRectangle(color = Color.Black, width = 100.dp, height = 100.dp)
}
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.layout.LayoutPadding
import androidx.ui.layout.LayoutSize
import androidx.ui.layout.Stack

Stack {
    SizedRectangle(LayoutSize.Fill, color = Color.Cyan)
    SizedRectangle(
        LayoutGravity.Stretch + LayoutPadding(top = 20.dp, bottom = 20.dp),
        color = Color.Yellow
    )
    SizedRectangle(LayoutGravity.Stretch + LayoutPadding(40.dp), color = Color.Magenta)
    SizedRectangle(LayoutGravity.Center + LayoutSize(300.dp, 300.dp), color = Color.Green)
    SizedRectangle(LayoutGravity.TopLeft + LayoutSize(150.dp, 150.dp), color = Color.Red)
    SizedRectangle(
        LayoutGravity.BottomRight + LayoutSize(150.dp, 150.dp),
        color = Color.Blue
    )
}

Table

@Composable fun Table(
    columns: Int,
    alignment: (columnIndex: Int) -> Alignment = { Alignment.TopLeft },
    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.layout.LayoutPadding
import androidx.ui.layout.Table

Table(columns = 8) {
    for (i in 0 until 8) {
        tableRow {
            for (j in 0 until 8) {
                SizedSquare(color = Color.Magenta, modifier = LayoutPadding(2.dp))
            }
        }
    }
}
import androidx.ui.layout.LayoutPadding
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 {
            SizedRectangle(
                color = Color.Magenta,
                width = 25.dp,
                height = 25.dp,
                modifier = padding
            )
            for (j in 1 until 5) {
                SizedRectangle(color = Color.Magenta, height = 25.dp, modifier = padding)
            }
        }
    }
}

Wrap

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

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.