ConstraintLayoutBaseScope

Artifact: androidx.constraintlayout:constraintlayout-compose

Added in 1.1.0

abstract class ConstraintLayoutBaseScope

Known direct subclasses

ConstraintLayoutScope, ConstraintSetScope

`ConstraintLayoutScope`	Scope used by the inline DSL of `ConstraintLayout`.
`ConstraintSetScope`	Scope used by the `ConstraintSet` DSL.

Common scope for ConstraintLayoutScope and ConstraintSetScope, the content being shared between the inline DSL API and the ConstraintSet-based API.

Summary

Nested types
`data class ConstraintLayoutBaseScope.BaselineAnchor` Represents a horizontal anchor corresponding to the `FirstBaseline` of a layout that other layouts can link to in their `Modifier.constrainAs` or `constrain` blocks.
`data class ConstraintLayoutBaseScope.HorizontalAnchor` Represents a horizontal anchor (e.g. top/bottom of a layout, guideline) that layouts can link to in their `Modifier.constrainAs` or `constrain` blocks.
`data class ConstraintLayoutBaseScope.VerticalAnchor` Represents a vertical anchor (e.g. start/end of a layout, guideline) that layouts can link to in their `Modifier.constrainAs` or `constrain` blocks.

Public constructors
`ConstraintLayoutBaseScope()`

Public functions
`Unit`	`applyTo(state: State)`
`ConstrainScope`	`constrain(ref: ConstrainedLayoutReference, constrainBlock: ConstrainScope.() -> Unit)` Specifies the constraints associated to the layout identified with `ref`.
`HorizontalChainScope`	`constrain(ref: HorizontalChainReference, constrainBlock: HorizontalChainScope.() -> Unit)` Specifies additional constraints associated to the horizontal chain identified with `ref`.
`VerticalChainScope`	`constrain(ref: VerticalChainReference, constrainBlock: VerticalChainScope.() -> Unit)` Specifies additional constraints associated to the vertical chain identified with `ref`.
`Unit`	`constrain( vararg refs: ConstrainedLayoutReference, constrainBlock: ConstrainScope.() -> Unit )` Convenient way to apply the same constraints to multiple `ConstrainedLayoutReference`s.
`ConstraintLayoutBaseScope.VerticalAnchor`	`createAbsoluteLeftBarrier(vararg elements: LayoutReference, margin: Dp)` Creates and returns a left barrier, containing the specified elements.
`ConstraintLayoutBaseScope.VerticalAnchor`	`createAbsoluteRightBarrier(vararg elements: LayoutReference, margin: Dp)` Creates and returns a right barrier, containing the specified elements.
`ConstraintLayoutBaseScope.HorizontalAnchor`	`createBottomBarrier(vararg elements: LayoutReference, margin: Dp)` Creates and returns a bottom barrier, containing the specified elements.
`ConstrainedLayoutReference`	`createColumn( vararg elements: LayoutReference, spacing: Dp, weights: FloatArray )` Creates a Grid based helper that lays out its elements in a single Column.
`ConstraintLayoutBaseScope.VerticalAnchor`	`createEndBarrier(vararg elements: LayoutReference, margin: Dp)` Creates and returns an end barrier, containing the specified elements.
`ConstrainedLayoutReference`	`createFlow( vararg elements: LayoutReference?, flowVertically: Boolean, verticalGap: Dp, horizontalGap: Dp, maxElement: Int, padding: Dp, wrapMode: Wrap, verticalAlign: VerticalAlign, horizontalAlign: HorizontalAlign, horizontalFlowBias: Float, verticalFlowBias: Float, verticalStyle: FlowStyle, horizontalStyle: FlowStyle )` Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns.
`ConstrainedLayoutReference`	`createFlow( vararg elements: LayoutReference?, flowVertically: Boolean, verticalGap: Dp, horizontalGap: Dp, maxElement: Int, paddingHorizontal: Dp, paddingVertical: Dp, wrapMode: Wrap, verticalAlign: VerticalAlign, horizontalAlign: HorizontalAlign, horizontalFlowBias: Float, verticalFlowBias: Float, verticalStyle: FlowStyle, horizontalStyle: FlowStyle )` Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns.
`ConstrainedLayoutReference`	createFlow( vararg elements: LayoutReference?, flowVertically: Boolean, verticalGap: Dp, horizontalGap: Dp, maxElement: Int, paddingLeft: Dp, paddingTop: Dp, paddingRight: Dp, paddingBottom: Dp, wrapMode: Wrap, verticalAlign: VerticalAlign, horizontalAlign: HorizontalAlign, horizontalFlowBias: Float, verticalFlowBias: Float, verticalStyle: FlowStyle, horizontalStyle: FlowStyle ) Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns.
`ConstrainedLayoutReference`	`createGrid( vararg elements: LayoutReference, rows: @IntRange(from = 1) Int, columns: @IntRange(from = 1) Int, isHorizontalArrangement: Boolean, verticalSpacing: Dp, horizontalSpacing: Dp, rowWeights: FloatArray, columnWeights: FloatArray, skips: Array<Skip>, spans: Array<Span>, flags: GridFlag )` Helper that creates a fixed Grid layout.
`ConstraintLayoutBaseScope.VerticalAnchor`	`createGuidelineFromAbsoluteLeft(fraction: Float)` Creates a guideline at a width fraction from the left of the `ConstraintLayout`.
`ConstraintLayoutBaseScope.VerticalAnchor`	`createGuidelineFromAbsoluteLeft(offset: Dp)` Creates a guideline at a specific offset from the left of the `ConstraintLayout`.
`ConstraintLayoutBaseScope.VerticalAnchor`	`createGuidelineFromAbsoluteRight(fraction: Float)` Creates a guideline at a width fraction from the right of the `ConstraintLayout`.
`ConstraintLayoutBaseScope.VerticalAnchor`	`createGuidelineFromAbsoluteRight(offset: Dp)` Creates a guideline at a specific offset from the right of the `ConstraintLayout`.
`ConstraintLayoutBaseScope.HorizontalAnchor`	`createGuidelineFromBottom(fraction: Float)` Creates a guideline at a height percentage from the bottom of the `ConstraintLayout`.
`ConstraintLayoutBaseScope.HorizontalAnchor`	`createGuidelineFromBottom(offset: Dp)` Creates a guideline at a specific offset from the bottom of the `ConstraintLayout`.
`ConstraintLayoutBaseScope.VerticalAnchor`	`createGuidelineFromEnd(fraction: Float)` Creates a guideline at a width fraction from the end of the `ConstraintLayout`.
`ConstraintLayoutBaseScope.VerticalAnchor`	`createGuidelineFromEnd(offset: Dp)` Creates a guideline at a specific offset from the end of the `ConstraintLayout`.
`ConstraintLayoutBaseScope.VerticalAnchor`	`createGuidelineFromStart(fraction: Float)` Creates a guideline at a specific offset from the start of the `ConstraintLayout`.
`ConstraintLayoutBaseScope.VerticalAnchor`	`createGuidelineFromStart(offset: Dp)` Creates a guideline at a specific offset from the start of the `ConstraintLayout`.
`ConstraintLayoutBaseScope.HorizontalAnchor`	`createGuidelineFromTop(fraction: Float)` Creates a guideline at a height fraction from the top of the `ConstraintLayout`.
`ConstraintLayoutBaseScope.HorizontalAnchor`	`createGuidelineFromTop(offset: Dp)` Creates a guideline at a specific offset from the top of the `ConstraintLayout`.
`HorizontalChainReference`	`createHorizontalChain( vararg elements: LayoutReference, chainStyle: ChainStyle )` Creates a horizontal chain including the referenced layouts.
`ConstrainedLayoutReference`	`createRow( vararg elements: LayoutReference, spacing: Dp, weights: FloatArray )` Creates a Grid based helper that lays out its elements in a single Row.
`ConstraintLayoutBaseScope.VerticalAnchor`	`createStartBarrier(vararg elements: LayoutReference, margin: Dp)` Creates and returns a start barrier, containing the specified elements.
`ConstraintLayoutBaseScope.HorizontalAnchor`	`createTopBarrier(vararg elements: LayoutReference, margin: Dp)` Creates and returns a top barrier, containing the specified elements.
`VerticalChainReference`	`createVerticalChain( vararg elements: LayoutReference, chainStyle: ChainStyle )` Creates a vertical chain including the referenced layouts.
`open operator Boolean`	`equals(other: Any?)`
`open Int`	`hashCode()`
`open Unit`	`reset()`
`LayoutReference`	`LayoutReference.withChainParams( startMargin: Dp, topMargin: Dp, endMargin: Dp, bottomMargin: Dp, startGoneMargin: Dp, topGoneMargin: Dp, endGoneMargin: Dp, bottomGoneMargin: Dp, weight: Float )` Sets the parameters that are used by chains to customize the resulting layout.
`LayoutReference`	`LayoutReference.withHorizontalChainParams( startMargin: Dp, endMargin: Dp, startGoneMargin: Dp, endGoneMargin: Dp, weight: Float )` Sets the parameters that are used by horizontal chains to customize the resulting layout.
`LayoutReference`	`LayoutReference.withVerticalChainParams( topMargin: Dp, bottomMargin: Dp, topGoneMargin: Dp, bottomGoneMargin: Dp, weight: Float )` Sets the parameters that are used by vertical chains to customize the resulting layout.

Protected properties
`MutableList<(State) -> Unit>`	`tasks` This property is deprecated. Tasks is unused, it breaks the immutability promise.

Public constructors

ConstraintLayoutBaseScope

Added in 1.1.0

ConstraintLayoutBaseScope()

Public functions

applyTo

Added in 1.1.0

fun applyTo(state: State): Unit

constrain

Added in 1.1.0

fun constrain(ref: ConstrainedLayoutReference, constrainBlock: ConstrainScope.() -> Unit): ConstrainScope

Specifies the constraints associated to the layout identified with ref.

constrain

Added in 1.1.0

fun constrain(ref: HorizontalChainReference, constrainBlock: HorizontalChainScope.() -> Unit): HorizontalChainScope

Specifies additional constraints associated to the horizontal chain identified with ref.

constrain

Added in 1.1.0

fun constrain(ref: VerticalChainReference, constrainBlock: VerticalChainScope.() -> Unit): VerticalChainScope

Specifies additional constraints associated to the vertical chain identified with ref.

constrain

fun constrain(
    vararg refs: ConstrainedLayoutReference,
    constrainBlock: ConstrainScope.() -> Unit
): Unit

Convenient way to apply the same constraints to multiple ConstrainedLayoutReferences.

createAbsoluteLeftBarrier

fun createAbsoluteLeftBarrier(
    vararg elements: LayoutReference,
    margin: Dp = 0.dp
): ConstraintLayoutBaseScope.VerticalAnchor

Creates and returns a left barrier, containing the specified elements.

createAbsoluteRightBarrier

fun createAbsoluteRightBarrier(
    vararg elements: LayoutReference,
    margin: Dp = 0.dp
): ConstraintLayoutBaseScope.VerticalAnchor

Creates and returns a right barrier, containing the specified elements.

createBottomBarrier

fun createBottomBarrier(vararg elements: LayoutReference, margin: Dp = 0.dp): ConstraintLayoutBaseScope.HorizontalAnchor

Creates and returns a bottom barrier, containing the specified elements.

createColumn

fun createColumn(
    vararg elements: LayoutReference,
    spacing: Dp = 0.dp,
    weights: FloatArray = floatArrayOf()
): ConstrainedLayoutReference

Creates a Grid based helper that lays out its elements in a single Column.

Example:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension

ConstraintLayout(
    constraintSet =
        ConstraintSet {
            val (a, b, c, d, e) = createRefsFor(0, 1, 2, 3, 4)
            val column =
                createColumn(
                    a,
                    b,
                    c,
                    d,
                    e,
                    spacing = 10.dp,
                    weights = floatArrayOf(3f, 3f, 2f, 2f, 1f),
                )
            constrain(column) {
                width = Dimension.matchParent
                height = Dimension.matchParent
            }

            constrain(a, b, c, d, e) { height = Dimension.fillToConstraints }
        },
    modifier = Modifier.fillMaxSize()
) {
    repeat(5) {
        Text(text = "item$it", modifier = Modifier.layoutId(it).background(Color.LightGray))
    }
}

Parameters
`vararg elements: LayoutReference`	`LayoutReference`s to be laid out by the Grid-based Column helper
`spacing: Dp = 0.dp`	Defines the vertical spacing between each item in the Column.
`weights: FloatArray = floatArrayOf()`	Defines the weight for each element in the Column. Note that the number of weights provided are expected to match the number of `elements` given.

Throws
`kotlin.IllegalArgumentException`	When non empty `weights` don't match the number of elements.

See also
`createGrid`

createEndBarrier

fun createEndBarrier(vararg elements: LayoutReference, margin: Dp = 0.dp): ConstraintLayoutBaseScope.VerticalAnchor

Creates and returns an end barrier, containing the specified elements.

createFlow

fun createFlow(
    vararg elements: LayoutReference?,
    flowVertically: Boolean = false,
    verticalGap: Dp = 0.dp,
    horizontalGap: Dp = 0.dp,
    maxElement: Int = 0,
    padding: Dp = 0.dp,
    wrapMode: Wrap = Wrap.None,
    verticalAlign: VerticalAlign = VerticalAlign.Center,
    horizontalAlign: HorizontalAlign = HorizontalAlign.Center,
    horizontalFlowBias: Float = 0.0f,
    verticalFlowBias: Float = 0.0f,
    verticalStyle: FlowStyle = FlowStyle.Packed,
    horizontalStyle: FlowStyle = FlowStyle.Packed
): ConstrainedLayoutReference

Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns.

Parameters
`vararg elements: LayoutReference?`	`LayoutReference`s to be laid out by the Flow helper
`flowVertically: Boolean = false`	if set to true arranges the Composables from top to bottom. Normally they are arranged from left to right.
`verticalGap: Dp = 0.dp`	defines the gap between views in the y axis
`horizontalGap: Dp = 0.dp`	defines the gap between views in the x axis
`maxElement: Int = 0`	defines the maximum element on a row before it if the
`padding: Dp = 0.dp`	sets padding around the content
`wrapMode: Wrap = Wrap.None`	sets the way reach maxElements is handled `Wrap.None` (default) -- no wrap behavior, `Wrap.Chain` - create additional chains
`verticalAlign: VerticalAlign = VerticalAlign.Center`	set the way elements are aligned vertically. Center is default
`horizontalAlign: HorizontalAlign = HorizontalAlign.Center`	set the way elements are aligned horizontally. Center is default
`horizontalFlowBias: Float = 0.0f`	set the way elements are aligned vertically Center is default
`verticalFlowBias: Float = 0.0f`	sets the top bottom bias of the vertical chain
`verticalStyle: FlowStyle = FlowStyle.Packed`	sets the style of a vertical chain (Spread,Packed, or SpreadInside)
`horizontalStyle: FlowStyle = FlowStyle.Packed`	set the style of the horizontal chain (Spread, Packed, or SpreadInside)

createFlow

fun createFlow(
    vararg elements: LayoutReference?,
    flowVertically: Boolean = false,
    verticalGap: Dp = 0.dp,
    horizontalGap: Dp = 0.dp,
    maxElement: Int = 0,
    paddingHorizontal: Dp = 0.dp,
    paddingVertical: Dp = 0.dp,
    wrapMode: Wrap = Wrap.None,
    verticalAlign: VerticalAlign = VerticalAlign.Center,
    horizontalAlign: HorizontalAlign = HorizontalAlign.Center,
    horizontalFlowBias: Float = 0.0f,
    verticalFlowBias: Float = 0.0f,
    verticalStyle: FlowStyle = FlowStyle.Packed,
    horizontalStyle: FlowStyle = FlowStyle.Packed
): ConstrainedLayoutReference

Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns.

Parameters
`vararg elements: LayoutReference?`	`LayoutReference`s to be laid out by the Flow helper
`flowVertically: Boolean = false`	if set to true aranges the Composables from top to bottom. Normally they are arranged from left to right.
`verticalGap: Dp = 0.dp`	defines the gap between views in the y axis
`horizontalGap: Dp = 0.dp`	defines the gap between views in the x axis
`maxElement: Int = 0`	defines the maximum element on a row before it if the
`paddingHorizontal: Dp = 0.dp`	sets paddingLeft and paddingRight of the content
`paddingVertical: Dp = 0.dp`	sets paddingTop and paddingBottom of the content
`wrapMode: Wrap = Wrap.None`	sets the way reach maxElements is handled `Wrap.None` (default) -- no wrap behavior, `Wrap.Chain` - create additional chains
`verticalAlign: VerticalAlign = VerticalAlign.Center`	set the way elements are aligned vertically. Center is default
`horizontalAlign: HorizontalAlign = HorizontalAlign.Center`	set the way elements are aligned horizontally. Center is default
`horizontalFlowBias: Float = 0.0f`	set the way elements are aligned vertically Center is default
`verticalFlowBias: Float = 0.0f`	sets the top bottom bias of the vertical chain
`verticalStyle: FlowStyle = FlowStyle.Packed`	sets the style of a vertical chain (Spread,Packed, or SpreadInside)
`horizontalStyle: FlowStyle = FlowStyle.Packed`	set the style of the horizontal chain (Spread, Packed, or SpreadInside)

createFlow

fun createFlow(
    vararg elements: LayoutReference?,
    flowVertically: Boolean = false,
    verticalGap: Dp = 0.dp,
    horizontalGap: Dp = 0.dp,
    maxElement: Int = 0,
    paddingLeft: Dp = 0.dp,
    paddingTop: Dp = 0.dp,
    paddingRight: Dp = 0.dp,
    paddingBottom: Dp = 0.dp,
    wrapMode: Wrap = Wrap.None,
    verticalAlign: VerticalAlign = VerticalAlign.Center,
    horizontalAlign: HorizontalAlign = HorizontalAlign.Center,
    horizontalFlowBias: Float = 0.0f,
    verticalFlowBias: Float = 0.0f,
    verticalStyle: FlowStyle = FlowStyle.Packed,
    horizontalStyle: FlowStyle = FlowStyle.Packed
): ConstrainedLayoutReference

Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns.

Parameters
`vararg elements: LayoutReference?`	`LayoutReference`s to be laid out by the Flow helper
`flowVertically: Boolean = false`	if set to true aranges the Composables from top to bottom. Normally they are arranged from left to right.
`verticalGap: Dp = 0.dp`	defines the gap between views in the y axis
`horizontalGap: Dp = 0.dp`	defines the gap between views in the x axis
`maxElement: Int = 0`	defines the maximum element on a row before it if the
`paddingLeft: Dp = 0.dp`	sets paddingLeft of the content
`paddingTop: Dp = 0.dp`	sets paddingTop of the content
`paddingRight: Dp = 0.dp`	sets paddingRight of the content
`paddingBottom: Dp = 0.dp`	sets paddingBottom of the content
`wrapMode: Wrap = Wrap.None`	sets the way reach maxElements is handled `Wrap.None` (default) -- no wrap behavior, `Wrap.Chain` - create additional chains
`verticalAlign: VerticalAlign = VerticalAlign.Center`	set the way elements are aligned vertically. Center is default
`horizontalAlign: HorizontalAlign = HorizontalAlign.Center`	set the way elements are aligned horizontally. Center is default
`horizontalFlowBias: Float = 0.0f`	set the way elements are aligned vertically Center is default
`verticalFlowBias: Float = 0.0f`	sets the top bottom bias of the vertical chain
`verticalStyle: FlowStyle = FlowStyle.Packed`	sets the style of a vertical chain (Spread,Packed, or SpreadInside)
`horizontalStyle: FlowStyle = FlowStyle.Packed`	set the style of the horizontal chain (Spread, Packed, or SpreadInside)

createGrid

fun createGrid(
    vararg elements: LayoutReference,
    rows: @IntRange(from = 1) Int,
    columns: @IntRange(from = 1) Int,
    isHorizontalArrangement: Boolean = true,
    verticalSpacing: Dp = 0.dp,
    horizontalSpacing: Dp = 0.dp,
    rowWeights: FloatArray = floatArrayOf(),
    columnWeights: FloatArray = floatArrayOf(),
    skips: Array<Skip> = arrayOf(),
    spans: Array<Span> = arrayOf(),
    flags: GridFlag = GridFlag.None
): ConstrainedLayoutReference

Helper that creates a fixed Grid layout.

A grid is defined by a set number of rows and columns. By default the given elements are arranged horizontally first (left to right, then top to bottom).

Either rowWeights or columnWeights may be provided to modify their size in the grid relative to each other.

You may provide Spans to define size of each cell within the grid.

To avoid placing Layouts in specific cells (or an area within the grid), you may provide skips. Note that if the provided Spans and Skips overlap, the Skips will take priority, ignoring the overlapping Span definition.

Here's an example showing how to build a calculator layout using a couple of Spans:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
import androidx.constraintlayout.compose.Span
import androidx.constraintlayout.compose.atMost

// For most of the keys we can just use the displayed text as the ID.
val ids =
    arrayOf(
        // Text box will span all 4 columns and the first 2 of rows
        "textBox",
        "C",
        "+/-",
        "%",
        "/",
        "7",
        "8",
        "9",
        "*",
        "4",
        "5",
        "6",
        "-",
        "1",
        "2",
        "3",
        "+",
        // The '0' will span two columns, note that it's on the 24th position in the grid
        "0",
        ".",
        "="
    )
ConstraintLayout(
    constraintSet =
        ConstraintSet {
            val idRefs = Array(ids.size) { createRefFor(ids[it]) }

            val g1 =
                createGrid(
                    elements = idRefs,
                    rows = 7,
                    columns = 4,
                    verticalSpacing = 10.dp,
                    horizontalSpacing = 10.dp,
                    spans =
                        arrayOf(
                            // textBox
                            Span(position = 0, rows = 2, columns = 4),
                            // '0' key
                            Span(position = 24, rows = 1, columns = 2)
                        )
                )

            constrain(g1) {
                width = Dimension.matchParent
                height = Dimension.matchParent
            }

            constrain(*idRefs) {
                // Make all the layouts fill up their space, you may still use coercing methods
                // such as `atMost(Dp)` or `atMostWrapContent()` to further limit their size.
                width = Dimension.fillToConstraints
                height = Dimension.fillToConstraints
            }
        },
    modifier = Modifier.fillMaxSize()
) {
    ids.forEach { id ->
        when (id) {
            "textBox" -> {
                Box(
                    modifier =
                        Modifier.background(Color.Gray)
                            // As usual, IDs should only be assigned on top-level children
                            .layoutId(id),
                    contentAlignment = Alignment.BottomEnd
                ) {
                    Text(text = "100", fontSize = 80.sp)
                }
            }
            else -> {
                Button(onClick = {}, Modifier.layoutId(id)) {
                    Text(text = id, fontSize = 30.sp)
                }
            }
        }
    }
}

Here's another example using Skips to easily lay out the typical Keyboard navigation pad:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
import androidx.constraintlayout.compose.Skip
import androidx.constraintlayout.compose.atMost

val keys =
    arrayOf("Insert", "Home", "Page Up", "Delete", "End", "Page Down", "↑", "←", "↓", "→")
ConstraintLayout(
    constraintSet =
        ConstraintSet {
            val keyRefs = Array(keys.size) { createRefFor(keys[it]) }

            val g1 =
                createGrid(
                    elements = keyRefs,
                    rows = 5,
                    columns = 3,
                    verticalSpacing = 8.dp,
                    horizontalSpacing = 8.dp,
                    skips =
                        arrayOf(
                            // These positions follow the expected Grid cells indexing
                            // Arranged horizontally by default:
                            //   - 0 is top-left
                            //   - 14 is bottom-right (5 rows x 3 columns - 1)
                            Skip(position = 6, rows = 1, columns = 3),
                            Skip(position = 9, rows = 1, columns = 1),
                            Skip(position = 11, rows = 1, columns = 1)
                        )
                )
            constrain(g1) {
                width = Dimension.matchParent
                height = Dimension.matchParent
            }

            constrain(*keyRefs) {
                width = Dimension.fillToConstraints.atMost(100.dp)
                height = Dimension.fillToConstraints.atMost(100.dp)
            }
        },
    modifier = Modifier.fillMaxSize()
) {
    keys.forEachIndexed { index, key ->
        Box(
            modifier = Modifier.layoutId(key).background(Color.LightGray),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = key,
                textAlign = TextAlign.Center,
                // Make fontSize bigger for the arrow keys
                fontSize = if (index >= 6) 24.sp else TextUnit.Unspecified
            )
        }
    }
}

Parameters
`vararg elements: LayoutReference`	`LayoutReference`s to be laid out by the Grid helper. By default, they are positioned in the given order based on the arrangement. Horizontal arrangement by default.
`rows: @IntRange(from = 1) Int`	Sets the number of rows in the Grid
`columns: @IntRange(from = 1) Int`	Sets the number of columns in the Grid
`isHorizontalArrangement: Boolean = true`	Whether to place the given `elements` horizontally, filling the cells from left to right and top to bottom. Otherwise, the `elements` are placed vertically, filling each cell from top to bottom and left to right. `true` by default.
`verticalSpacing: Dp = 0.dp`	Defines the gap between each row.
`horizontalSpacing: Dp = 0.dp`	Defines the gap between each column.
`rowWeights: FloatArray = floatArrayOf()`	Defines the weight for each row. The weight specifies how much space each row takes relative to each other. Should be either an empty array (all rows are the same size), or have a value corresponding for each row.
`columnWeights: FloatArray = floatArrayOf()`	Defines the weight for each column. The weight specifies how much space each column takes relative to each other. Should be either an empty array (all columns are the same size), or have a value corresponding for each column.
`skips: Array<Skip> = arrayOf()`	A `Skip` defines an area within the Grid where Layouts may not be placed. So, as the `elements` are being placed, they will skip any cell covered by the given skips.
`spans: Array<Span> = arrayOf()`	A `Span` defines how much area should each cell occupy when placing an item on it. Keep in mind that when laying out, the Grid won't place any overlapping items over the spanned area. In that sense, a `Span` works similarly to a `Skip`, except that an item will be placed at the original spanned cell position. Also note, `skips` take priority over spans, meaning that defining a `Span` that overlaps a `Skip` is a no-op.
`flags: GridFlag = GridFlag.None`	A `GridFlag` definition that may change certain behaviors of the Grid helper. `GridFlag.None` by default.

Throws
`kotlin.IllegalArgumentException`	When non empty weights don't match the number of columns or rows respectively.

See also
`createColumn`
`createRow`

createGuidelineFromAbsoluteLeft

Added in 1.1.0

fun createGuidelineFromAbsoluteLeft(fraction: Float): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a width fraction from the left of the ConstraintLayout. A fraction of 0f will correspond to the left of the ConstraintLayout, while 1f will correspond to the right.

createGuidelineFromAbsoluteLeft

fun createGuidelineFromAbsoluteLeft(offset: Dp): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a specific offset from the left of the ConstraintLayout.

createGuidelineFromAbsoluteRight

Added in 1.1.0

fun createGuidelineFromAbsoluteRight(fraction: Float): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a width fraction from the right of the ConstraintLayout. A fraction of 0f will correspond to the right of the ConstraintLayout, while 1f will correspond to the left.

createGuidelineFromAbsoluteRight

fun createGuidelineFromAbsoluteRight(offset: Dp): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a specific offset from the right of the ConstraintLayout.

createGuidelineFromBottom

Added in 1.1.0

fun createGuidelineFromBottom(fraction: Float): ConstraintLayoutBaseScope.HorizontalAnchor

Creates a guideline at a height percentage from the bottom of the ConstraintLayout. A fraction of 0f will correspond to the bottom of the ConstraintLayout, while 1f will correspond to the top.

createGuidelineFromBottom

fun createGuidelineFromBottom(offset: Dp): ConstraintLayoutBaseScope.HorizontalAnchor

Creates a guideline at a specific offset from the bottom of the ConstraintLayout.

createGuidelineFromEnd

Added in 1.1.0

fun createGuidelineFromEnd(fraction: Float): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a width fraction from the end of the ConstraintLayout. A fraction of 0f will correspond to the end of the ConstraintLayout, while 1f will correspond to the start.

createGuidelineFromEnd

fun createGuidelineFromEnd(offset: Dp): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a specific offset from the end of the ConstraintLayout.

createGuidelineFromStart

Added in 1.1.0

fun createGuidelineFromStart(fraction: Float): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a specific offset from the start of the ConstraintLayout. A fraction of 0f will correspond to the start of the ConstraintLayout, while 1f will correspond to the end.

createGuidelineFromStart

fun createGuidelineFromStart(offset: Dp): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a specific offset from the start of the ConstraintLayout.

createGuidelineFromTop

Added in 1.1.0

fun createGuidelineFromTop(fraction: Float): ConstraintLayoutBaseScope.HorizontalAnchor

Creates a guideline at a height fraction from the top of the ConstraintLayout. A fraction of 0f will correspond to the top of the ConstraintLayout, while 1f will correspond to the bottom.

createGuidelineFromTop

fun createGuidelineFromTop(offset: Dp): ConstraintLayoutBaseScope.HorizontalAnchor

Creates a guideline at a specific offset from the top of the ConstraintLayout.

createHorizontalChain

fun createHorizontalChain(
    vararg elements: LayoutReference,
    chainStyle: ChainStyle = ChainStyle.Spread
): HorizontalChainReference

Creates a horizontal chain including the referenced layouts.

Use constrain with the resulting HorizontalChainReference to modify the start/left and end/right constraints of this chain.

createRow

fun createRow(
    vararg elements: LayoutReference,
    spacing: Dp = 0.dp,
    weights: FloatArray = floatArrayOf()
): ConstrainedLayoutReference

Creates a Grid based helper that lays out its elements in a single Row.

Example:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension

ConstraintLayout(
    constraintSet =
        ConstraintSet {
            val (a, b, c, d, e) = createRefsFor(0, 1, 2, 3, 4)
            val row =
                createRow(
                    a,
                    b,
                    c,
                    d,
                    e,
                    spacing = 10.dp,
                    weights = floatArrayOf(3f, 3f, 2f, 2f, 1f),
                )
            constrain(row) {
                width = Dimension.matchParent
                height = Dimension.matchParent
            }

            constrain(a, b, c, d, e) { width = Dimension.fillToConstraints }
        },
    modifier = Modifier.fillMaxSize()
) {
    repeat(5) {
        Text(text = "item$it", modifier = Modifier.layoutId(it).background(Color.LightGray))
    }
}

Parameters
`vararg elements: LayoutReference`	`LayoutReference`s to be laid out by the Grid-based Row helper.
`spacing: Dp = 0.dp`	Defines the horizontal spacing between each item in the Row.
`weights: FloatArray = floatArrayOf()`	Defines the weight for each element in the Row. Note that the number of weights provided are expected to match the number of `elements` given.

Throws
`kotlin.IllegalArgumentException`	When non empty `weights` don't match the number of elements.

See also
`createGrid`

createStartBarrier

fun createStartBarrier(vararg elements: LayoutReference, margin: Dp = 0.dp): ConstraintLayoutBaseScope.VerticalAnchor

Creates and returns a start barrier, containing the specified elements.

createTopBarrier

fun createTopBarrier(vararg elements: LayoutReference, margin: Dp = 0.dp): ConstraintLayoutBaseScope.HorizontalAnchor

Creates and returns a top barrier, containing the specified elements.

createVerticalChain

fun createVerticalChain(
    vararg elements: LayoutReference,
    chainStyle: ChainStyle = ChainStyle.Spread
): VerticalChainReference

Creates a vertical chain including the referenced layouts.

Use constrain with the resulting VerticalChainReference to modify the top and bottom constraints of this chain.

equals

open operator fun equals(other: Any?): Boolean

hashCode

open fun hashCode(): Int

reset

Added in 1.1.0

open fun reset(): Unit

withChainParams

Artifact: androidx.constraintlayout:constraintlayout-compose

View Source

fun LayoutReference.withChainParams(
    startMargin: Dp = 0.dp,
    topMargin: Dp = 0.dp,
    endMargin: Dp = 0.dp,
    bottomMargin: Dp = 0.dp,
    startGoneMargin: Dp = 0.dp,
    topGoneMargin: Dp = 0.dp,
    endGoneMargin: Dp = 0.dp,
    bottomGoneMargin: Dp = 0.dp,
    weight: Float = Float.NaN
): LayoutReference

Sets the parameters that are used by chains to customize the resulting layout.

Use margins to customize the space between widgets in the chain.

Use weight to distribute available space to each widget when their dimensions are not fixed.

Similarly named parameters available from ConstrainScope.linkTo are ignored in Chains.

Since margins are only for widgets within the chain: Top, Start and End, Bottom margins are ignored when the widget is the first or the last element in the chain, respectively.

Parameters
`startMargin: Dp = 0.dp`	Added space from the start of this widget to the previous widget
`topMargin: Dp = 0.dp`	Added space from the top of this widget to the previous widget
`endMargin: Dp = 0.dp`	Added space from the end of this widget to the next widget
`bottomMargin: Dp = 0.dp`	Added space from the bottom of this widget to the next widget
`startGoneMargin: Dp = 0.dp`	Added space from the start of this widget when the previous widget has `Visibility.Gone`
`topGoneMargin: Dp = 0.dp`	Added space from the top of this widget when the previous widget has `Visibility.Gone`
`endGoneMargin: Dp = 0.dp`	Added space from the end of this widget when the next widget has `Visibility.Gone`
`bottomGoneMargin: Dp = 0.dp`	Added space from the bottom of this widget when the next widget has `Visibility.Gone`
`weight: Float = Float.NaN`	Defines the proportion of space (relative to the total weight) occupied by this layout when the corresponding dimension is not a fixed value.

Returns
`LayoutReference`	The same `LayoutReference` instance with the applied values

withHorizontalChainParams

Artifact: androidx.constraintlayout:constraintlayout-compose

View Source

fun LayoutReference.withHorizontalChainParams(
    startMargin: Dp = 0.dp,
    endMargin: Dp = 0.dp,
    startGoneMargin: Dp = 0.dp,
    endGoneMargin: Dp = 0.dp,
    weight: Float = Float.NaN
): LayoutReference

Sets the parameters that are used by horizontal chains to customize the resulting layout.

Use margins to customize the space between widgets in the chain.

Use weight to distribute available space to each widget when their horizontal dimension is not fixed.

Similarly named parameters available from ConstrainScope.linkTo are ignored in Chains.

Since margins are only for widgets within the chain: Start and End margins are ignored when the widget is the first or the last element in the chain, respectively.

Parameters
`startMargin: Dp = 0.dp`	Added space from the start of this widget to the previous widget
`endMargin: Dp = 0.dp`	Added space from the end of this widget to the next widget
`startGoneMargin: Dp = 0.dp`	Added space from the start of this widget when the previous widget has `Visibility.Gone`
`endGoneMargin: Dp = 0.dp`	Added space from the end of this widget when the next widget has `Visibility.Gone`
`weight: Float = Float.NaN`	Defines the proportion of space (relative to the total weight) occupied by this layout when the width is not a fixed dimension.

Returns
`LayoutReference`	The same `LayoutReference` instance with the applied values

withVerticalChainParams

Artifact: androidx.constraintlayout:constraintlayout-compose

View Source

fun LayoutReference.withVerticalChainParams(
    topMargin: Dp = 0.dp,
    bottomMargin: Dp = 0.dp,
    topGoneMargin: Dp = 0.dp,
    bottomGoneMargin: Dp = 0.dp,
    weight: Float = Float.NaN
): LayoutReference

Sets the parameters that are used by vertical chains to customize the resulting layout.

Use margins to customize the space between widgets in the chain.

Use weight to distribute available space to each widget when their vertical dimension is not fixed.

Similarly named parameters available from ConstrainScope.linkTo are ignored in Chains.

Since margins are only for widgets within the chain: Top and Bottom margins are ignored when the widget is the first or the last element in the chain, respectively.

Parameters
`topMargin: Dp = 0.dp`	Added space from the top of this widget to the previous widget
`bottomMargin: Dp = 0.dp`	Added space from the bottom of this widget to the next widget
`topGoneMargin: Dp = 0.dp`	Added space from the top of this widget when the previous widget has `Visibility.Gone`
`bottomGoneMargin: Dp = 0.dp`	Added space from the bottom of this widget when the next widget has `Visibility.Gone`
`weight: Float = Float.NaN`	Defines the proportion of space (relative to the total weight) occupied by this layout when the height is not a fixed dimension.

Returns
`LayoutReference`	The same `LayoutReference` instance with the applied values

Protected properties

tasks

Added in 1.1.0

Deprecated in 1.1.0

protected val tasks: MutableList<(State) -> Unit>

ConstraintLayoutBaseScope

Summary

Nested types

Public constructors

Public functions

Protected properties

Public constructors

ConstraintLayoutBaseScope

Public functions

applyTo

constrain

constrain

constrain

constrain

createAbsoluteLeftBarrier

createAbsoluteRightBarrier

createBottomBarrier

createColumn

createEndBarrier

createFlow

createFlow

createFlow

createGrid

createGuidelineFromAbsoluteLeft

createGuidelineFromAbsoluteLeft

createGuidelineFromAbsoluteRight

createGuidelineFromAbsoluteRight

createGuidelineFromBottom

createGuidelineFromBottom

createGuidelineFromEnd

createGuidelineFromEnd

createGuidelineFromStart

createGuidelineFromStart

createGuidelineFromTop

createGuidelineFromTop

createHorizontalChain

createRow

createStartBarrier

createTopBarrier

createVerticalChain

equals

hashCode

reset

withChainParams

withHorizontalChainParams

withVerticalChainParams

Protected properties

tasks