🌈 Create new beautiful Compose Gradients with our new wesite ->
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).

Source set: Common
public 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: Row arrangements

Different vertical arrangements in Columns: Column arrangements

Properties

Start

Source set: Common
public val Start: Horizontal =
        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.

End

Source set: Common
public val End: Horizontal =
        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.

Top

Source set: Common
public val Top: Vertical =
        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)

Bottom

Source set: Common
public val Bottom: Vertical =
        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)

Center

Source set: Common
public val Center: HorizontalOrVertical =
        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.

SpaceEvenly

Source set: Common
public val SpaceEvenly: HorizontalOrVertical =
        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.

SpaceBetween

Source set: Common
public val SpaceBetween: HorizontalOrVertical =
        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.

SpaceAround

Source set: Common
public val SpaceAround: HorizontalOrVertical =
        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

Source set: Common
public 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

space The space between adjacent children.

spacedBy

Source set: Common
public 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

space The space between adjacent children.
alignment The alignment of the spaced children inside the parent.

spacedBy

Source set: Common
public 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

space The space between adjacent children.
alignment The alignment of the spaced children inside the parent.

aligned

Source set: Common
public fun aligned(alignment: Alignment.Horizontal): Horizontal

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

Parameters

alignment The alignment of the children inside the parent.

aligned

Source set: Common
public fun aligned(alignment: Alignment.Vertical): Vertical

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

Parameters

alignment The alignment of the children inside the parent.

Members

Horizontal

Source set: Common
public interface Horizontal

Used to specify the horizontal arrangement of the layout's children in layouts like Row.

Properties

spacing

Source set: Common
public val spacing: Dp

Spacing that should be added between any two adjacent layout children.

Functions

arrange

Source set: Common
public fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        )

Horizontally places the layout children.

Parameters

totalSize Available space that can be occupied by the children, in pixels.
sizes An array of sizes of all children, in pixels.
layoutDirection A layout direction, left-to-right or right-to-left, of the parent layout that should be taken into account when determining positions of the children.
outPositions An array of the size of sizes that returns the calculated positions relative to the left, in pixels.

Vertical

Source set: Common
public interface Vertical

Used to specify the vertical arrangement of the layout's children in layouts like Column.

Properties

spacing

Source set: Common
public val spacing: Dp

Spacing that should be added between any two adjacent layout children.

Functions

arrange

Source set: Common
public fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray)

Vertically places the layout children.

Parameters

totalSize Available space that can be occupied by the children, in pixels.
sizes An array of sizes of all children, in pixels.
outPositions An array of the size of sizes that returns the calculated positions relative to the top, in pixels.

HorizontalOrVertical

Source set: Common
public interface HorizontalOrVertical : Horizontal, Vertical

Used to specify the horizontal arrangement of the layout's children in horizontal layouts like Row, or the vertical arrangement of the layout's children in vertical layouts like Column.

Properties

spacing

Source set: Common
override val spacing: Dp

Spacing that should be added between any two adjacent layout children.

Absolute

Source set: Common
public object Absolute

Properties

Left

Source set: Common
public val Left: Horizontal =
            object : Horizontal {
                override fun Density.arrange(
                    totalSize: Int,
                    sizes: IntArray,
                    layoutDirection: LayoutDirection,
                    outPositions: IntArray,
                ) = placeLeftOrTop(sizes, outPositions, reverseInput = false)

                override fun toString() = "AbsoluteArrangement#Left"
            }

Place children horizontally such that they are as close as possible to the left edge of the Row.

Unlike Arrangement.Start, when the layout direction is RTL, the children will not be mirrored and as such children will appear in the order they are composed inside the Row.

Visually: 123####

Center

Source set: Common
public val Center: Horizontal =
            object : Horizontal {
                override fun Density.arrange(
                    totalSize: Int,
                    sizes: IntArray,
                    layoutDirection: LayoutDirection,
                    outPositions: IntArray,
                ) = placeCenter(totalSize, sizes, outPositions, reverseInput = false)

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

Place children such that they are as close as possible to the middle of the Row.

Unlike Arrangement.Center, when the layout direction is RTL, the children will not be mirrored and as such children will appear in the order they are composed inside the Row.

Visually: ##123##

Right

Source set: Common
public val Right: Horizontal =
            object : Horizontal {
                override fun Density.arrange(
                    totalSize: Int,
                    sizes: IntArray,
                    layoutDirection: LayoutDirection,
                    outPositions: IntArray,
                ) = placeRightOrBottom(totalSize, sizes, outPositions, reverseInput = false)

                override fun toString() = "AbsoluteArrangement#Right"
            }

Place children horizontally such that they are as close as possible to the right edge of the Row.

Unlike Arrangement.End, when the layout direction is RTL, the children will not be mirrored and as such children will appear in the order they are composed inside the Row.

Visually: ####123

SpaceBetween

Source set: Common
public val SpaceBetween: Horizontal =
            object : Horizontal {
                override fun Density.arrange(
                    totalSize: Int,
                    sizes: IntArray,
                    layoutDirection: LayoutDirection,
                    outPositions: IntArray,
                ) = placeSpaceBetween(totalSize, sizes, outPositions, reverseInput = false)

                override fun toString() = "AbsoluteArrangement#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.

Unlike Arrangement.SpaceBetween, when the layout direction is RTL, the children will not be mirrored and as such children will appear in the order they are composed inside the Row.

Visually: 1##2##3

SpaceEvenly

Source set: Common
public val SpaceEvenly: Horizontal =
            object : Horizontal {
                override fun Density.arrange(
                    totalSize: Int,
                    sizes: IntArray,
                    layoutDirection: LayoutDirection,
                    outPositions: IntArray,
                ) = placeSpaceEvenly(totalSize, sizes, outPositions, reverseInput = false)

                override fun toString() = "AbsoluteArrangement#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.

Unlike Arrangement.SpaceEvenly, when the layout direction is RTL, the children will not be mirrored and as such children will appear in the order they are composed inside the Row.

Visually: #1#2#3#

SpaceAround

Source set: Common
public val SpaceAround: Horizontal =
            object : Horizontal {
                override fun Density.arrange(
                    totalSize: Int,
                    sizes: IntArray,
                    layoutDirection: LayoutDirection,
                    outPositions: IntArray,
                ) = placeSpaceAround(totalSize, sizes, outPositions, reverseInput = false)

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

Place children such that they are spaced evenly horizontally, including free space before the first child and after the last child, but half the amount of space existing otherwise between two consecutive children.

Unlike Arrangement.SpaceAround, when the layout direction is RTL, the children will not be mirrored and as such children will appear in the order they are composed inside the Row.

Visually: #1##2##3##4#

Functions

spacedBy

Source set: Common
public 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.

Unlike Arrangement.spacedBy, when the layout direction is RTL, the children will not be mirrored and as such children will appear in the order they are composed inside the Row.

Parameters

space The space between adjacent children.

spacedBy

Source set: Common
public 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.

Unlike Arrangement.spacedBy, when the layout direction is RTL, the children will not be mirrored and as such children will appear in the order they are composed inside the Row.

Parameters

space The space between adjacent children.
alignment The alignment of the spaced children inside the parent.

spacedBy

Source set: Common
public 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.

Unlike Arrangement.spacedBy, when the layout direction is RTL, the children will not be mirrored and as such children will appear in the order they are composed inside the Row.

Parameters

space The space between adjacent children.
alignment The alignment of the spaced children inside the parent.

aligned

Source set: Common
public fun aligned(alignment: Alignment.Horizontal): Horizontal

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

Unlike Arrangement.aligned, when the layout direction is RTL, the children will not be mirrored and as such children will appear in the order they are composed inside the Row.

Parameters

alignment The alignment of the children inside the parent.

Content updated: