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.

FlexChildren

Collects information about the children of a FlexColumn or FlexColumn when its body is executed with a FlexChildren instance as argument.

FlexScope

A FlexScope provides a scope for Inflexible/Flexible functions.

RowScope

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

StackChildren

Collects information about the children of a Stack when its body is executed with a StackChildren instance as argument.

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.

LayoutSize

Used to specify how a layout chooses its own size when multiple behaviors are possible.

MainAxisAlignment

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

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.

LayoutModifier

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

Unit
AspectRatio(aspectRatio: Float, children: () -> Unit)

Layout composable that attempts to size itself and a potential layout child to match a specified aspect ratio.

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 composable that places its children in a vertical sequence and is able to assign them heights according to their flex weights provided through androidx.ui.layout.FlexScope.Flexible modifiers.

Unit
ConstrainedBox(constraints: DpConstraints, modifier: Modifier = Modifier.None, children: () -> Unit)

Composable that enforces additional Constraints to its only child.

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
FixedSpacer(width: Dp, height: Dp)

Component that represents an empty space with given width and height.

Unit
FlexColumn(modifier: Modifier = Modifier.None, mainAxisAlignment: MainAxisAlignment = MainAxisAlignment.Start, crossAxisAlignment: CrossAxisAlignment = CrossAxisAlignment.Start, crossAxisSize: LayoutSize = LayoutSize.Wrap, block: FlexChildren.() -> Unit)

A composable that places its children in a vertical sequence, assigning children heights according to their flex weights.

Unit
FlexRow(modifier: Modifier = Modifier.None, mainAxisAlignment: MainAxisAlignment = MainAxisAlignment.Start, crossAxisAlignment: CrossAxisAlignment = CrossAxisAlignment.Start, crossAxisSize: LayoutSize = LayoutSize.Wrap, block: FlexChildren.() -> Unit)

A composable that places its children in a horizontal sequence, assigning children widths according to their flex weights.

Unit
FlowColumn(mainAxisSize: LayoutSize = LayoutSize.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: LayoutSize = LayoutSize.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.

LayoutModifier
Height(value: Dp)

A layout modifier that sets the exact height of the component.

Unit
HeightSpacer(height: Dp)

Component that represents an empty space with fixed height and zero width.

LayoutModifier
MaxHeight(value: Dp)

A layout modifier that sets the maximum height of the component.

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.

LayoutModifier
MaxSize(maxWidth: Dp, maxHeight: Dp)

A layout modifier that sets the maximum width and height of the component.

LayoutModifier
MaxWidth(value: Dp)

A layout modifier that sets the maximum width of the component.

LayoutModifier
MinHeight(value: Dp)

A layout modifier that sets the minimum height of the component.

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.

LayoutModifier
MinSize(minWidth: Dp, minHeight: Dp)

A layout modifier that sets the minimum width and height of the component.

LayoutModifier
MinWidth(value: Dp)

A layout modifier that sets the minimum width of the component.

Unit
Padding(padding: EdgeInsets, children: () -> Unit)

Layout composable that takes a child composable and applies whitespace padding around it.

Unit
Padding(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp, children: () -> Unit)

Layout composable that takes a child composable and applies whitespace padding around it.

Unit
Padding(padding: Dp, children: () -> Unit)

Layout composable that takes a child composable and applies the same amount of whitespace padding around it.

Unit
Row(modifier: Modifier = Modifier.None, arrangement: Arrangement = Arrangement.Begin, children: RowScope.() -> Unit)

A composable that places its children in a horizontal sequence and is able to assign them widths according to their flex weights provided through androidx.ui.layout.FlexScope.Flexible modifier.

LayoutModifier
Size(width: Dp, height: Dp)

A layout modifier that sets the exact width and height of the component.

LayoutModifier
Spacing(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp)

Layout modifier that applies whitespace spacing on specified sides of the target layout.

LayoutModifier
Spacing(all: Dp = 0.dp)

Layout modifier that applies the same whitespace spacing of all dp on each side of the target layout.

Unit
Stack(modifier: Modifier = Modifier.None, children: StackChildren.() -> 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.

LayoutModifier
Width(value: Dp)

A layout modifier that sets the exact width of the component.

Unit
WidthSpacer(width: Dp)

Component that represents an empty space with fixed width and zero height.

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

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

Top-level properties summary

LayoutModifier

A layout modifier that forces a target component to fill all available space.

LayoutModifier

A layout modifier that forces a a target component to fill all available height.

LayoutModifier

A layout modifier that forces a target component to fill all available width.

Extension functions summary

For DensityScope
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

Returns a copy of the current instance with no max constraints.

DpConstraints

Returns a copy of the current instance with no min 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.

DpConstraints

Returns a copy of the current instance with the constraints tightened to their largest size.

DpConstraints

Returns a copy of the current instance with the constraints tightened to their smallest size.

DpConstraints
DpConstraints.withTight(width: Dp? = null, height: Dp? = null)

Returns a copy of the current instance, overriding the specified values to be tight.

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 there is exactly one size that satisfies the constraints.

Boolean

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

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

AspectRatio

fun AspectRatio(value: Float): LayoutModifier

A layout modifier that attempts to size a layout to match a specified aspect ratio. The layout modifier will try to match one of the incoming constraints, in the following order: maxWidth, maxHeight, minWidth, minHeight. The size in the other dimension will then be computed according to the aspect ratio. Note that the provided aspectRatio will always correspond to the width/height ratio.

If a valid size that satisfies the constraints is found this way, the modifier will size the target layout to it: the layout will be measured with the tight constraints to match the size. If a child is present, it will be measured with tight constraints to match the size. If no valid size is found, the aspect ratio will not be satisfied, and the target layout will be measured with the original constraints.

Example usage:

import androidx.ui.foundation.ColoredRect
import androidx.ui.layout.AspectRatio
import androidx.ui.layout.Container

Container(constraints = DpConstraints.tightConstraintsForWidth(100.dp)) {
    ColoredRect(color = Color.Gray, modifier = AspectRatio(2f))
}
Parameters
value: Float A positive non-zero value representing the aspect ratio.

AspectRatio

@Composable fun AspectRatio(
    aspectRatio: Float,
    children: () -> Unit
): Unit

Deprecated.

Layout composable that attempts to size itself and a potential layout child to match a specified aspect ratio. The composable will try to match one of the incoming constraints, in the following order: maxWidth, maxHeight, minWidth, minHeight. The size in the other dimension will then be computed according to the aspect ratio. Note that the provided aspectRatio will always correspond to the width/height ratio.

If a valid size that satisfies the constraints is found this way, the composable will size itself to this size. If a child is present, this will be measured with tight constraints to match the size. If no valid size is found, the aspect ratio will not be satisfied, and the composable will wrap its child, which is measured with the same constraints. If there is no child, the composable will size itself to the incoming min constraints.

Example usage: AspectRatio(2f) { DrawRectangle(color = Color.Blue) Container(padding = EdgeInsets(20.dp)) { SizedRectangle(color = Color.Black) } } The AspectRatio composable will make the Container have the width twice its height.

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 composable that places its children in a vertical sequence and is able to assign them heights according to their flex weights provided through androidx.ui.layout.FlexScope.Flexible modifiers. If androidx.ui.layout.FlexScope.Inflexible or no modifier is provided, the child will be treated as inflexible, and will be sized to its preferred height.

Example usage:

import androidx.ui.layout.Column

Column {
    // The child with no flexibility modifier is inflexible by default, will have the specified
    // size.
    SizedRectangle(color = Color.Magenta, width = 40.dp, height = 80.dp)
    // Inflexible, the child will have the specified size.
    SizedRectangle(Inflexible, color = Color.Red, width = 80.dp, height = 40.dp)
    // Flexible, the child will occupy have of the remaining height.
    SizedRectangle(Flexible(1f), color = Color.Yellow, width = 40.dp)
    // Flexible not tight, the child will occupy at most half of the remaining height.
    SizedRectangle(Flexible(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.

ConstrainedBox

@Composable fun ConstrainedBox(
    constraints: DpConstraints,
    modifier: Modifier = Modifier.None,
    children: () -> Unit
): Unit

Composable that enforces additional Constraints to its only child. The ConstrainedBox will itself create a Layout which will take the same size that the child chooses. If there is no child, the ConstrainedBox will size itself to the min constraints that would have been passed to the child. Note that, if the incoming constraints from the parent of the ConstrainedBox do not allow it, the intrinsic ConstrainedBox constraints will not be satisfied - these will always be coerced inside the incoming constraints.

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.

FixedSpacer

@Composable fun FixedSpacer(
    width: Dp,
    height: Dp
): Unit

Component that represents an empty space with given width and height.

Parameters
width: Dp width of the empty space
height: Dp height of the empty space

FlexColumn

@Composable fun FlexColumn(
    modifier: Modifier = Modifier.None,
    mainAxisAlignment: MainAxisAlignment = MainAxisAlignment.Start,
    crossAxisAlignment: CrossAxisAlignment = CrossAxisAlignment.Start,
    crossAxisSize: LayoutSize = LayoutSize.Wrap,
    block: FlexChildren.() -> Unit
): Unit

A composable that places its children in a vertical sequence, assigning children heights according to their flex weights.

FlexColumn children can be:

  • inflexible meaning that the child is not flex, and it should be measured first to determine its size, before the expanded and flexible children are measured
  • expanded meaning that the child is flexible, and it should be assigned a height according to its flex weight relative to its flexible children. The child is forced to occupy the entire height assigned by the parent
  • flexible similar to expanded, but the child can leave unoccupied height.

Example usage:

import androidx.ui.graphics.Color
import androidx.ui.layout.Center
import androidx.ui.layout.FlexColumn

FlexColumn {
    expanded(flex = 2f) {
        Center {
            SizedRectangle(color = Color(0xFF0000FF), width = 40.dp, height = 40.dp)
        }
    }
    inflexible {
        SizedRectangle(color = Color(0xFFFF0000), height = 40.dp)
    }
    expanded(flex = 1f) {
        SizedRectangle(color = Color(0xFF00FF00))
    }
}
Parameters
mainAxisAlignment: MainAxisAlignment = MainAxisAlignment.Start The alignment of the layout's children in main axis direction. Default is MainAxisAlignment.Start.
crossAxisAlignment: CrossAxisAlignment = CrossAxisAlignment.Start The alignment of the layout's children in cross axis direction. Default is CrossAxisAlignment.Start.
crossAxisSize: LayoutSize = LayoutSize.Wrap The size of the layout in the cross axis dimension. Default is LayoutSize.Wrap.

FlexRow

@Composable fun FlexRow(
    modifier: Modifier = Modifier.None,
    mainAxisAlignment: MainAxisAlignment = MainAxisAlignment.Start,
    crossAxisAlignment: CrossAxisAlignment = CrossAxisAlignment.Start,
    crossAxisSize: LayoutSize = LayoutSize.Wrap,
    block: FlexChildren.() -> Unit
): Unit

A composable that places its children in a horizontal sequence, assigning children widths according to their flex weights.

FlexRow children can be:

  • inflexible meaning that the child is not flex, and it should be measured first to determine its size, before the expanded and flexible children are measured
  • expanded meaning that the child is flexible, and it should be assigned a width according to its flex weight relative to its flexible children. The child is forced to occupy the entire width assigned by the parent
  • flexible similar to expanded, but the child can leave unoccupied width.

Example usage:

import androidx.ui.graphics.Color
import androidx.ui.layout.Center
import androidx.ui.layout.FlexRow

FlexRow {
    expanded(flex = 2f) {
        Center {
            SizedRectangle(color = Color(0xFF0000FF), width = 40.dp, height = 40.dp)
        }
    }
    inflexible {
        SizedRectangle(color = Color(0xFFFF0000), width = 40.dp)
    }
    expanded(flex = 1f) {
        SizedRectangle(color = Color(0xFF00FF00))
    }
}
Parameters
mainAxisAlignment: MainAxisAlignment = MainAxisAlignment.Start The alignment of the layout's children in main axis direction. Default is MainAxisAlignment.Start.
crossAxisAlignment: CrossAxisAlignment = CrossAxisAlignment.Start The alignment of the layout's children in cross axis direction. Default is CrossAxisAlignment.Start.
crossAxisSize: LayoutSize = LayoutSize.Wrap The size of the layout in the cross axis dimension. Default is LayoutSize.Wrap.

FlowColumn

@Composable fun FlowColumn(
    mainAxisSize: LayoutSize = LayoutSize.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 or FlexColumn, 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: LayoutSize = LayoutSize.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: LayoutSize = LayoutSize.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 or FlexRow, 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: LayoutSize = LayoutSize.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.

Height

fun Height(value: Dp): LayoutModifier

A layout modifier that sets the exact height of the component.

import androidx.ui.foundation.shape.DrawShape
import androidx.ui.layout.AspectRatio
import androidx.ui.layout.Center
import androidx.ui.layout.Container
import androidx.ui.layout.Height

Center {
    Container(modifier = Height(100.dp) wraps AspectRatio(1f)) {
        DrawShape(shape = RectangleShape, color = Color.Blue)
    }
}
If the Height modifier's target layout is measured with constraints that do not allow thespecified height, the height will be coerced inside the incoming constraints.

HeightSpacer

@Composable fun HeightSpacer(height: Dp): Unit

Component that represents an empty space with fixed height and zero width.

Parameters
height: Dp height of the empty space

MaxHeight

fun MaxHeight(value: Dp): LayoutModifier

A layout modifier that sets the maximum height of the component.

If the MaxHeight modifier's target layout is measured with constraints that do not allow the specified maximum height, the maximum height will be coerced inside the incomingL constraints.

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.AspectRatio
import androidx.ui.layout.Container
import androidx.ui.layout.FlexRow
import androidx.ui.layout.MaxIntrinsicHeight
import androidx.ui.layout.Wrap

Wrap {
    MaxIntrinsicHeight {
        FlexRow(crossAxisAlignment = CrossAxisAlignment.Stretch) {
            expanded(flex = 1f) {
                Container(AspectRatio(2f)) { DrawShape(RectangleShape, Color.Gray) }
            }
            inflexible {
                Container(width = 1.dp) { DrawShape(RectangleShape, Color.Black) }
            }
            expanded(flex = 1f) {
                Container(AspectRatio(1f)) { DrawShape(RectangleShape, Color.Blue) }
            }
        }
    }
}

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

Here MaxIntrinsicHeight is adding a speculative height measurement pass for the FlexRow, whose maximum intrinsic height will correspond to the height of the taller AspectRatio. Then MaxIntrinsicHeight will measure the FlexRow with tight height, the same as the premeasured maximum intrinsic height, which due to CrossAxisAlignment.Stretch 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(ExpandedHeight) {
            Container(ExpandedWidth) {
                DrawShape(RectangleShape, Color.Gray)
                Text("Short text")
            }
            Container(ExpandedWidth) {
                DrawShape(RectangleShape, Color.Blue)
                Text("Extremely long text giving the width of its siblings")
            }
            Container(ExpandedWidth) {
                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 ConstrainedBox. Then MaxIntrinsicWidth will measure the Column with tight width, the same as the premeasured maximum intrinsic width, which due to CrossAxisAlignment.Stretch will force the ConstrainedBoxs to use the same width. The sample is a layout containing three composables having the same width as the widest one.

MaxSize

fun MaxSize(
    maxWidth: Dp,
    maxHeight: Dp
): LayoutModifier

A layout modifier that sets the maximum width and height of the component.

If the MaxSize modifier's target layout is measured with constraints that do not allow the specified maximum width and/or height, the maximum size will be coerced inside the incoming constraints.

MaxWidth

fun MaxWidth(value: Dp): LayoutModifier

A layout modifier that sets the maximum width of the component.

If the MaxWidth modifier's target layout is measured with constraints that do not allow the specified maximum width, the maximum width will be coerced inside the incoming constraints.

MinHeight

fun MinHeight(value: Dp): LayoutModifier

A layout modifier that sets the minimum height of the component.

If the MinHeight modifier's target layout is measured with constraints that do not allow the specified minimum height, the minimum height will be coerced inside the incoming constraints.

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.FlexRow
import androidx.ui.layout.MinIntrinsicHeight
import androidx.ui.layout.Wrap

Wrap {
    MinIntrinsicHeight {
        FlexRow(crossAxisAlignment = CrossAxisAlignment.Stretch) {
            expanded(flex = 1f) {
                Text("This is a really short text")
            }
            inflexible {
                Container(width = 1.dp) { DrawShape(RectangleShape, Color.Black) }
            }
            expanded(flex = 1f) {
                Text("This is a much much much much much much much much much much" +
                        " much much much much much much longer text")
            }
        }
    }
}

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 FlexRow, whose minimum intrinsic height will correspond to the height of the largest Text. Then MinIntrinsicHeight will measure the FlexRow with tight height, the same as the premeasured minimum intrinsic height, which due to CrossAxisAlignment.Stretch 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.ConstrainedBox
import androidx.ui.layout.MinIntrinsicWidth
import androidx.ui.layout.Wrap

Wrap {
    MinIntrinsicWidth {
        Column(ExpandedHeight) {
            ConstrainedBox(
                constraints = DpConstraints.tightConstraints(width = 20.dp, height = 10.dp),
                modifier = ExpandedWidth
            ) {
                DrawShape(RectangleShape, Color.Gray)
            }
            ConstrainedBox(
                constraints = DpConstraints.tightConstraints(width = 30.dp, height = 10.dp),
                modifier = ExpandedWidth
            ) {
                DrawShape(RectangleShape, Color.Blue)
            }
            ConstrainedBox(
                constraints = DpConstraints.tightConstraints(width = 10.dp, height = 10.dp),
                modifier = ExpandedWidth
            ) {
                DrawShape(RectangleShape, Color.Magenta)
            }
        }
    }
}

The sample builds a layout containing three ConstrainedBox 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 ConstrainedBox. Then MinIntrinsicWidth will measure the Column with tight width, the same as the premeasured minimum intrinsic width, which due to CrossAxisAlignment.Stretch will force the ConstrainedBoxs to use the same width.

MinSize

fun MinSize(
    minWidth: Dp,
    minHeight: Dp
): LayoutModifier

A layout modifier that sets the minimum width and height of the component.

If the MinSize modifier's target layout is measured with constraints that do not allow the specified minimum width and/or height, the minimum size will be coerced inside the incoming constraints.

MinWidth

fun MinWidth(value: Dp): LayoutModifier

A layout modifier that sets the minimum width of the component.

If the MinWidth modifier's target layout is measured with constraints that do not allow the specified minimum width, the minimum width will be coerced inside the incoming constraints.

Padding

@Composable fun Padding(
    padding: EdgeInsets,
    children: () -> Unit
): Unit

Layout composable that takes a child composable and applies whitespace padding around it. When passing layout constraints to its child, Padding shrinks the constraints by the requested padding, causing the child to layout at a smaller size.

Example usage:

import androidx.ui.layout.Align
import androidx.ui.layout.Container
import androidx.ui.layout.EdgeInsets
import androidx.ui.layout.Padding

Align(Alignment.TopLeft) {
    Container {
        DrawRectangle(Color.Gray)
        Padding(EdgeInsets(left = 20.dp, top = 30.dp, right = 20.dp, bottom = 30.dp)) {
            SizedRectangle(color = Color.Blue, width = 50.dp, height = 50.dp)
        }
    }
}

Padding

@Composable fun Padding(
    left: Dp = 0.dp,
    top: Dp = 0.dp,
    right: Dp = 0.dp,
    bottom: Dp = 0.dp,
    children: () -> Unit
): Unit

Layout composable that takes a child composable and applies whitespace padding around it.

When passing layout constraints to its child, Padding shrinks the constraints by the requested padding, causing the child to layout at a smaller size.

Example usage:

import androidx.ui.layout.Align
import androidx.ui.layout.Container
import androidx.ui.layout.Padding

Align(Alignment.TopLeft) {
    Container {
        DrawRectangle(Color.Gray)
        Padding(left = 20.dp, top = 30.dp, right = 20.dp, bottom = 30.dp) {
            SizedRectangle(color = Color.Blue, width = 50.dp, height = 50.dp)
        }
    }
}

Padding

@Composable fun Padding(
    padding: Dp,
    children: () -> Unit
): Unit

Layout composable that takes a child composable and applies the same amount of whitespace padding around it.

When passing layout constraints to its child, Padding shrinks the constraints by the requested padding, causing the child to layout at a smaller size.

Example usage:

import androidx.ui.layout.Align
import androidx.ui.layout.Container
import androidx.ui.layout.Padding

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

Row

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

A composable that places its children in a horizontal sequence and is able to assign them widths according to their flex weights provided through androidx.ui.layout.FlexScope.Flexible modifier. If androidx.ui.layout.FlexScope.Inflexible or no modifier is provided, the child will be treated as inflexible, and will be sized to its preferred width.

Example usage:

import androidx.ui.layout.Row

Row {
    // The child with no flexibility modifier is inflexible by default, will have the specified
    // size.
    SizedRectangle(color = Color.Magenta, width = 40.dp, height = 80.dp)
    // Inflexible, the child will have the specified size.
    SizedRectangle(Inflexible, color = Color.Red, width = 80.dp, height = 40.dp)
    // Flexible, the child will occupy have of the remaining width.
    SizedRectangle(Flexible(1f), color = Color.Yellow, height = 40.dp)
    // Flexible not tight, the child will occupy at most half of the remaining width.
    SizedRectangle(Flexible(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.

Size

fun Size(
    width: Dp,
    height: Dp
): LayoutModifier

A layout modifier that sets the exact width and height of the component.

import androidx.ui.foundation.shape.DrawShape
import androidx.ui.layout.Center
import androidx.ui.layout.Container
import androidx.ui.layout.Size

Center {
    Container(modifier = Size(width = 100.dp, height = 100.dp)) {
        DrawShape(shape = RectangleShape, color = Color.Red)
    }
}
If the Size modifier's target layout is measured with constraints that do not allow thespecified width and/or height, the size will be coerced inside the incoming constraints.

Spacing

fun Spacing(
    left: Dp = 0.dp,
    top: Dp = 0.dp,
    right: Dp = 0.dp,
    bottom: Dp = 0.dp
): LayoutModifier

Layout modifier that applies whitespace spacing on specified sides of the target layout.

Example usage:

import androidx.ui.layout.Align
import androidx.ui.layout.Container
import androidx.ui.layout.Spacing

Align(Alignment.TopLeft) {
    Container {
        DrawRectangle(Color.Gray)
        SizedRectangle(
            modifier = Spacing(
                left = 20.dp, top = 30.dp, right = 20.dp, bottom = 30.dp
            ),
            color = Color.Blue,
            width = 50.dp,
            height = 50.dp
        )
    }
}

Spacing

fun Spacing(all: Dp = 0.dp): LayoutModifier

Layout modifier that applies the same whitespace spacing 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.Spacing

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

Stack

@Composable fun Stack(
    modifier: Modifier = Modifier.None,
    children: StackChildren.() -> 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.

Stack children can be:

  • aligned, which are aligned in the box of the Stack. These are also the children that define the size of the Stack box: this will be the maximum between the minimum constraints and the size of the largest child.
  • positioned, which are positioned in the box defined as above, according to their specified insets. When the positioning of these is ambiguous in one direction (the component has null left and right or top and bottom insets), the positioning in this direction will be resolved according to the positioned child's fallbackAlignment argument.
  • expanded, which are forced to expand to fill the box of the Stack.

Example usage:

import androidx.ui.graphics.Color
import androidx.ui.layout.Stack

Stack {
    expanded {
        SizedRectangle(color = Color(0xFFFFFFFF.toInt()))
    }
    aligned(Alignment.Center) {
        SizedRectangle(color = Color(0xFF0000FF), width = 300.dp, height = 300.dp)
    }
    aligned(Alignment.TopLeft) {
        SizedRectangle(color = Color(0xFF00FF00), width = 150.dp, height = 150.dp)
    }
    aligned(Alignment.BottomRight) {
        SizedRectangle(color = Color(0xFFFF0000), width = 150.dp, height = 150.dp)
    }
    positioned(null, 20.dp, null, 20.dp) {
        SizedRectangle(color = Color(0xFFFFA500), width = 80.dp)
        SizedRectangle(color = Color(0xFFA52A2A), width = 20.dp)
    }
}

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.Padding
import androidx.ui.layout.Table

Padding(2.dp) {
    Table(columns = 8) {
        for (i in 0 until 8) {
            tableRow {
                for (j in 0 until 8) {
                    Padding(2.dp) {
                        SizedSquare(color = Color.Magenta)
                    }
                }
            }
        }
    }
}
import androidx.ui.layout.Padding
import androidx.ui.layout.Table

Padding(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 {
                Padding(2.dp) {
                    SizedRectangle(color = Color.Magenta, width = 25.dp, height = 25.dp)
                }
                for (j in 1 until 5) {
                    Padding(2.dp) {
                        SizedRectangle(color = Color.Magenta, height = 25.dp)
                    }
                }
            }
        }
    }
}

Width

fun Width(value: Dp): LayoutModifier

A layout modifier that sets the exact width of the component.

import androidx.ui.foundation.shape.DrawShape
import androidx.ui.layout.AspectRatio
import androidx.ui.layout.Center
import androidx.ui.layout.Container
import androidx.ui.layout.Width

Center {
    Container(modifier = Width(100.dp) wraps AspectRatio(1f)) {
        DrawShape(shape = RectangleShape, color = Color.Magenta)
    }
}
If the Width modifier's target layout is measured with constraints that do not allow thespecified width, the width will be coerced inside the incoming constraints.

WidthSpacer

@Composable fun WidthSpacer(width: Dp): Unit

Component that represents an empty space with fixed width and zero height.

Parameters
width: Dp width of the empty space

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.

Top-level properties

Expanded

val Expanded: LayoutModifier

A layout modifier that forces a target component to fill all available space.

Example usage:

import androidx.ui.foundation.ColoredRect
import androidx.ui.foundation.shape.DrawShape
import androidx.ui.layout.Align
import androidx.ui.layout.Container

Align(alignment = Alignment.TopLeft) {
    Container(modifier = Expanded) {
        DrawShape(RectangleShape, Color.Red)
        ColoredRect(color = Color.Magenta, width = 100.dp, height = 100.dp)
    }
}

ExpandedHeight

val ExpandedHeight: LayoutModifier

A layout modifier that forces a a target component to fill all available height.

Example usage:

import androidx.ui.foundation.ColoredRect
import androidx.ui.foundation.shape.DrawShape
import androidx.ui.layout.Align
import androidx.ui.layout.Container

Align(alignment = Alignment.TopLeft) {
    Container(modifier = ExpandedHeight) {
        DrawShape(RectangleShape, Color.Red)
        ColoredRect(color = Color.Magenta, width = 100.dp, height = 100.dp)
    }
}

ExpandedWidth

val ExpandedWidth: LayoutModifier

A layout modifier that forces a target component to fill all available width.

Example usage:

import androidx.ui.foundation.ColoredRect
import androidx.ui.foundation.shape.DrawShape
import androidx.ui.layout.Container

Container(modifier = ExpandedWidth) {
    DrawShape(RectangleShape, Color.Red)
    ColoredRect(color = Color.Magenta, width = 100.dp, height = 100.dp)
}

Extension functions

Constraints

fun DensityScope.Constraints(dpConstraints: DpConstraints): Constraints

Creates the Constraints corresponding to the current DpConstraints.

DpConstraints

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

looseMax

fun DpConstraints.looseMax(): DpConstraints

Returns a copy of the current instance with no max constraints.

looseMin

fun DpConstraints.looseMin(): DpConstraints

Returns a copy of the current instance with no min 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.

tightMax

fun DpConstraints.tightMax(): DpConstraints

Returns a copy of the current instance with the constraints tightened to their largest size. Note that if any of the constraints are unbounded, they will be left unchanged.

tightMin

fun DpConstraints.tightMin(): DpConstraints

Returns a copy of the current instance with the constraints tightened to their smallest size.

withTight

fun DpConstraints.withTight(
    width: Dp? = null,
    height: Dp? = null
): DpConstraints

Returns a copy of the current instance, overriding the specified values to be tight.

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

hasTightHeight

val DpConstraints.hasTightHeight: Boolean

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

hasTightWidth

val DpConstraints.hasTightWidth: Boolean

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

isTight

val DpConstraints.isTight: Boolean

Whether there is exactly one size that satisfies the constraints.

isZero

val DpConstraints.isZero: Boolean

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

satisfiable

val DpConstraints.satisfiable: Boolean

Whether there is any size that satisfies the current constraints.