# Arrangement

Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Arrangement.kt+class:androidx.compose.foundation.layout.Arrangement) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0) Common/AllAndroid/JVM
- Cmn

  ```
  object Arrangement
  ```

*** ** * ** ***

Used to specify the arrangement of the layout's children in layouts like `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)` in the main axis direction (horizontal and vertical, respectively).

Below is an illustration of different horizontal arrangements in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`s: ![Row
arrangements](https://developer.android.com/images/reference/androidx/compose/foundation/layout/row_arrangement_visualization.gif)

Different vertical arrangements in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)`s: ![Column
arrangements](https://developer.android.com/images/reference/androidx/compose/foundation/layout/column_arrangement_visualization.gif)

## Summary

| ### Nested types |
|---|
| `object https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Absolute` |
| `interface https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal` Used to specify the horizontal arrangement of the layout's children in layouts like `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. |
| `interface https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.HorizontalOrVertical : https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal, https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical` Used to specify the horizontal arrangement of the layout's children in horizontal layouts like `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`, or the vertical arrangement of the layout's children in vertical layouts like `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)`. |
| `interface https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical` Used to specify the vertical arrangement of the layout's children in layouts like `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)`. |

| ### Public functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#aligned(androidx.compose.ui.Alignment.Horizontal)(alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal)` Place children horizontally one next to the other and align the obtained group according to an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#aligned(androidx.compose.ui.Alignment.Horizontal)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#aligned(androidx.compose.ui.Alignment.Vertical)(alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical)` Place children vertically one next to the other and align the obtained group according to an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#aligned(androidx.compose.ui.Alignment.Vertical)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.HorizontalOrVertical` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp)(space: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Place children such that each two adjacent ones are spaced by a fixed `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp)` distance across the main axis. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal)(space: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal)` Place children horizontally such that each two adjacent ones are spaced by a fixed `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal)` distance. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical)(space: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical)` Place children vertically such that each two adjacent ones are spaced by a fixed `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical)` distance. | Cmn |

| ### Public properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#Bottom()` Place children vertically such that they are as close as possible to the bottom of the main axis. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.HorizontalOrVertical` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#Center()` Place children such that they are as close as possible to the middle of the main axis. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#End()` Place children horizontally such that they are as close as possible to the end of the main axis. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.HorizontalOrVertical` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/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. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.HorizontalOrVertical` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/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. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.HorizontalOrVertical` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/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. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/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). | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#Top()` Place children vertically such that they are as close as possible to the top of the main axis. | Cmn |

## Public functions

### aligned

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
fun aligned(alignment: Alignment.Horizontal): Arrangement.Horizontal
```

Place children horizontally one next to the other and align the obtained group according to an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#aligned(androidx.compose.ui.Alignment.Horizontal)`.

| Parameters |
|---|---|
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal` | The alignment of the children inside the parent. |

### aligned

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
fun aligned(alignment: Alignment.Vertical): Arrangement.Vertical
```

Place children vertically one next to the other and align the obtained group according to an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#aligned(androidx.compose.ui.Alignment.Vertical)`.

| Parameters |
|---|---|
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical` | The alignment of the children inside the parent. |

### spacedBy

Cmn Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.10.0)

```
fun spacedBy(space: Dp): Arrangement.HorizontalOrVertical
```

Place children such that each two adjacent ones are spaced by a fixed `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp)` distance across the main axis. The spacing will be subtracted from the available space that the children can occupy. The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp)` can be negative, in which case children will overlap.

To change alignment of the spaced children horizontally or vertically, use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp)` overloads with `alignment` parameter.

| Parameters |
|---|---|
| `space: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | The space between adjacent children. |

### spacedBy

Cmn Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.10.0)

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

Place children horizontally such that each two adjacent ones are spaced by a fixed `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal)` distance. The spacing will be subtracted from the available width that the children can occupy. An `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal)` can be specified to align the spaced children horizontally inside the parent, in case there is empty width remaining. The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal)` can be negative, in which case children will overlap.

| Parameters |
|---|---|
| `space: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | The space between adjacent children. |
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal` | The alignment of the spaced children inside the parent. |

### spacedBy

Cmn Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.10.0)

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

Place children vertically such that each two adjacent ones are spaced by a fixed `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical)` distance. The spacing will be subtracted from the available height that the children can occupy. An `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical)` can be specified to align the spaced children vertically inside the parent, in case there is empty height remaining. The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#spacedBy(androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical)` can be negative, in which case children will overlap.

| Parameters |
|---|---|
| `space: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | The space between adjacent children. |
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical` | The alignment of the spaced children inside the parent. |

## Public properties

### Bottom

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
val Bottom: Arrangement.Vertical
```

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

### Center

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
val Center: Arrangement.HorizontalOrVertical
```

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.

### End

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
val End: Arrangement.Horizontal
```

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.

### SpaceAround

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
val SpaceAround: Arrangement.HorizontalOrVertical
```

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

### SpaceBetween

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
val SpaceBetween: Arrangement.HorizontalOrVertical
```

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.

### SpaceEvenly

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
val SpaceEvenly: Arrangement.HorizontalOrVertical
```

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.

### Start

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
val Start: Arrangement.Horizontal
```

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.

### Top

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
val Top: Arrangement.Vertical
```

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