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

LayoutAlign

object LayoutAlign
kotlin.Any
   ↳ androidx.ui.layout.LayoutAlign

Provides alignment options for a target layout where the alignment is handled by the modifier itself (rather than by the layout's parent). The modifier will occupy as little space as possible to satisfy the minimum incoming constraints in the alignment direction(s), while also being at least as large as the wrapped layout. Consequently, in order for the alignment to work, the incoming min constraints have to be larger than the size of the wrapped layout; in this case, the modifier will align the target layout within itself, and the modifier will occupy the size of the min constraints in the alignment direction(s). Note that, in order to make sure that the alignment happens due to the min incoming constraints, size modifiers such as LayoutSize, LayoutWidth or LayoutHeight can be specified before LayoutAlign - otherwise, the min icoming constraints can also be enforced by the parent layout model.

Example usage:

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

// Here, the blue rectangle prefers to have a 20.dp size, subject to the incoming constraints.
// Because of the LayoutSize.Min modifier, if LayoutAlign was not present, the blue rectangle
// would actually be 40.dp x 40.dp to satisfy the min size set by the modifier. However,
// because we also provide LayoutAlign, the blue rectangle is allowed to be smaller than the min
// constraints, and it will be aligned in the 40.dp x 40.dp space. Note the example would not
// work if LayoutAlign was specified before LayoutSize in the modifier chain.
Box(
    modifier = LayoutSize(20.dp) + LayoutSize.Min(40.dp, 40.dp) + LayoutAlign.TopCenter,
    backgroundColor = Color.Blue
)
import androidx.ui.foundation.Box
import androidx.ui.layout.LayoutSize

// Here, the blue rectangle prefers to have a 50.dp height, subject to the incoming constraints.
// Because of the LayoutSize.Fill modifier, if LayoutAlign was not present, the blue rectangle
// would actually fill the available height to satisfy the min height set by the modifier.
// However, because we also provide LayoutAlign, the blue rectangle is allowed to be smaller
// than the min height, and it will be centered vertically in the available height.
// The width of the rectangle will still fill the available width, because the
// LayoutAlign.CenterVertically modifier is only concerned with vertical alignment.
// Note the example would not work if LayoutAlign was specified before LayoutSize
// in the modifier chain.
Box(
    LayoutSize(50.dp) + LayoutSize.Fill + LayoutAlign.CenterVertically,
    backgroundColor = Color.Blue
)

Summary

Properties

LayoutModifier

A layout modifier that positions the target component inside its parent to the bottom in vertical direction and wraps the component in horizontal direction.

LayoutModifier

A layout modifier that positions the target component bottom-center inside its parent.

LayoutModifier

A layout modifier that positions the target component bottom-right inside its parent.

LayoutModifier

A layout modifier that positions the target component bottom-left inside its parent.

LayoutModifier

A layout modifier that positions the target component in the center of its parent.

LayoutModifier

A layout modifier that positions the target component center-right inside its parent.

LayoutModifier

A layout modifier that positions the target component in the center of the parent in horizontal direction and wraps the component in vertical direction.

LayoutModifier

A layout modifier that positions the target component center-left inside its parent.

LayoutModifier

A layout modifier that positions the target component in the center of the parent in vertical direction and wraps the component in horizontal direction.

LayoutModifier

A layout modifier that positions the target component inside its parent to the end edge in horizontal direction and wraps the component in vertical direction.

LayoutModifier

A layout modifier that positions the target component inside its parent to the start edge in horizontal direction and wraps the component in vertical direction.

LayoutModifier

A layout modifier that positions the target component inside its parent to the top in vertical direction and wraps the component in horizontal direction.

LayoutModifier

A layout modifier that positions the target component top-center inside its parent.

LayoutModifier

A layout modifier that positions the target component top-right inside its parent.

LayoutModifier

A layout modifier that positions the target component top-left inside its parent.

Properties

Bottom

val Bottom: LayoutModifier

A layout modifier that positions the target component inside its parent to the bottom in vertical direction and wraps the component in horizontal direction.

BottomCenter

val BottomCenter: LayoutModifier

A layout modifier that positions the target component bottom-center inside its parent.

BottomEnd

val BottomEnd: LayoutModifier

A layout modifier that positions the target component bottom-right inside its parent.

BottomStart

val BottomStart: LayoutModifier

A layout modifier that positions the target component bottom-left inside its parent.

Center

val Center: LayoutModifier

A layout modifier that positions the target component in the center of its parent.

CenterEnd

val CenterEnd: LayoutModifier

A layout modifier that positions the target component center-right inside its parent.

CenterHorizontally

val CenterHorizontally: LayoutModifier

A layout modifier that positions the target component in the center of the parent in horizontal direction and wraps the component in vertical direction.

CenterStart

val CenterStart: LayoutModifier

A layout modifier that positions the target component center-left inside its parent.

CenterVertically

val CenterVertically: LayoutModifier

A layout modifier that positions the target component in the center of the parent in vertical direction and wraps the component in horizontal direction.

End

val End: LayoutModifier

A layout modifier that positions the target component inside its parent to the end edge in horizontal direction and wraps the component in vertical direction.

Start

val Start: LayoutModifier

A layout modifier that positions the target component inside its parent to the start edge in horizontal direction and wraps the component in vertical direction.

Top

val Top: LayoutModifier

A layout modifier that positions the target component inside its parent to the top in vertical direction and wraps the component in horizontal direction.

TopCenter

val TopCenter: LayoutModifier

A layout modifier that positions the target component top-center inside its parent.

TopEnd

val TopEnd: LayoutModifier

A layout modifier that positions the target component top-right inside its parent.

TopStart

val TopStart: LayoutModifier

A layout modifier that positions the target component top-left inside its parent.