Arrangement

object Arrangement

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

Below is an illustration of different horizontal arrangements in Rows:

Different vertical arrangements in Columns:

Properties

arrange

val Start =
    object : Horizontal {
        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) =
            if (layoutDirection == LayoutDirection.Ltr) {
                placeLeftOrTop(sizes, outPositions, reverseInput = false)
            } else {
                placeRightOrBottom(totalSize, sizes, outPositions, reverseInput = true)
            }

        override fun toString() = "Arrangement#Start"
    }

Place children horizontally such that they are as close as possible to the beginning of the horizontal axis (left if the layout direction is LTR, right otherwise). Visually: 123#### for LTR and ####321.

arrange

val End =
    object : Horizontal {
        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) =
            if (layoutDirection == LayoutDirection.Ltr) {
                placeRightOrBottom(totalSize, sizes, outPositions, reverseInput = false)
            } else {
                placeLeftOrTop(sizes, outPositions, reverseInput = true)
            }

        override fun toString() = "Arrangement#End"
    }

Place children horizontally such that they are as close as possible to the end of the main axis. Visually: ####123 for LTR and 321#### for RTL.

arrange

val Top =
    object : Vertical {
        override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
            placeLeftOrTop(sizes, outPositions, reverseInput = false)

        override fun toString() = "Arrangement#Top"
    }

Place children vertically such that they are as close as possible to the top of the main axis. Visually: (top) 123#### (bottom)

arrange

val Bottom =
    object : Vertical {
        override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
            placeRightOrBottom(totalSize, sizes, outPositions, reverseInput = false)

        override fun toString() = "Arrangement#Bottom"
    }

Place children vertically such that they are as close as possible to the bottom of the main axis. Visually: (top) ####123 (bottom)

arrange

val Center =
    object : HorizontalOrVertical {
        override val spacing = 0.dp

        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) =
            if (layoutDirection == LayoutDirection.Ltr) {
                placeCenter(totalSize, sizes, outPositions, reverseInput = false)
            } else {
                placeCenter(totalSize, sizes, outPositions, reverseInput = true)
            }

        override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
            placeCenter(totalSize, sizes, outPositions, reverseInput = false)

        override fun toString() = "Arrangement#Center"
    }

Place children such that they are as close as possible to the middle of the main axis. Visually: ##123## for LTR and ##321## for RTL.

arrange

val SpaceEvenly =
    object : HorizontalOrVertical {
        override val spacing = 0.dp

        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) =
            if (layoutDirection == LayoutDirection.Ltr) {
                placeSpaceEvenly(totalSize, sizes, outPositions, reverseInput = false)
            } else {
                placeSpaceEvenly(totalSize, sizes, outPositions, reverseInput = true)
            }

        override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
            placeSpaceEvenly(totalSize, sizes, outPositions, reverseInput = false)

        override fun toString() = "Arrangement#SpaceEvenly"
    }

Place children such that they are spaced evenly across the main axis, including free space before the first child and after the last child. Visually: #1#2#3# for LTR and #3#2#1# for RTL.

arrange

val SpaceBetween =
    object : HorizontalOrVertical {
        override val spacing = 0.dp

        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) =
            if (layoutDirection == LayoutDirection.Ltr) {
                placeSpaceBetween(totalSize, sizes, outPositions, reverseInput = false)
            } else {
                placeSpaceBetween(totalSize, sizes, outPositions, reverseInput = true)
            }

        override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
            placeSpaceBetween(totalSize, sizes, outPositions, reverseInput = false)

        override fun toString() = "Arrangement#SpaceBetween"
    }

Place children such that they are spaced evenly across the main axis, without free space before the first child or after the last child. Visually: 1##2##3 for LTR or 3##2##1 for RTL.

arrange

val SpaceAround =
    object : HorizontalOrVertical {
        override val spacing = 0.dp

        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) =
            if (layoutDirection == LayoutDirection.Ltr) {
                placeSpaceAround(totalSize, sizes, outPositions, reverseInput = false)
            } else {
                placeSpaceAround(totalSize, sizes, outPositions, reverseInput = true)
            }

        override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
            placeSpaceAround(totalSize, sizes, outPositions, reverseInput = false)

        override fun toString() = "Arrangement#SpaceAround"
    }

Place children such that they are spaced evenly across the main axis, including free space before the first child and after the last child, but half the amount of space existing otherwise between two consecutive children. Visually: #1##2##3# for LTR and #3##2##1# for RTL

Functions

spacedBy

fun spacedBy(space: Dp): HorizontalOrVertical

Place children such that each two adjacent ones are spaced by a fixed space distance across the main axis. The spacing will be subtracted from the available space that the children can occupy. The space can be negative, in which case children will overlap.

To change alignment of the spaced children horizontally or vertically, use spacedBy overloads with alignment parameter.

Parameters

spacedBy

fun spacedBy(space: Dp, alignment: Alignment.Horizontal): Horizontal

Place children horizontally such that each two adjacent ones are spaced by a fixed space distance. The spacing will be subtracted from the available width that the children can occupy. An alignment can be specified to align the spaced children horizontally inside the parent, in case there is empty width remaining. The space can be negative, in which case children will overlap.

Parameters

spacedBy

fun spacedBy(space: Dp, alignment: Alignment.Vertical): Vertical

Place children vertically such that each two adjacent ones are spaced by a fixed space distance. The spacing will be subtracted from the available height that the children can occupy. An alignment can be specified to align the spaced children vertically inside the parent, in case there is empty height remaining. The space can be negative, in which case children will overlap.

Parameters

aligned

fun aligned(alignment: Alignment.Horizontal): Horizontal

Place children horizontally one next to the other and align the obtained group according to an alignment.

Parameters

aligned

fun aligned(alignment: Alignment.Vertical): Vertical

Place children vertically one next to the other and align the obtained group according to an alignment.

Parameters