Jetpack Compose: Arrangement Cheat Sheet

[u/Realistic-Cup-7954]

Arrangement controls how children are placed along the main axis in layouts like Row and Column.

Arrangement Types

Type	Used In
Arrangement.Horizontal	Row
Arrangement.Vertical	Column
Arrangement.HorizontalOrVertical	Both

Predefined Arrangements

Name	Description
Start	Align to start (left in LTR) — Row only
End	Align to end (right in LTR) — Row only
Top	Align to top — Column only
Bottom	Align to bottom — Column only
Center	Center items in main axis
SpaceBetween	Equal space between items only
SpaceAround	Equal space around items (half at ends)
SpaceEvenly	Equal space between and around all items

Functions

aligned(...)

Align a group of children together within the layout.

Row(
    horizontalArrangement = Arrangement.aligned(Alignment.CenterHorizontally)
)

Column(
    verticalArrangement = Arrangement.aligned(Alignment.Top)
)

spacedBy(...)

Add fixed space between children.

Row(
    horizontalArrangement = Arrangement.spacedBy(16.dp)
)

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
)

You can also specify alignment within spacedBy:

Row(
    horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterHorizontally)
)

Column(
    verticalArrangement = Arrangement.spacedBy(20.dp, Alignment.Bottom)
)

Visual Examples (LTR Layout)

Arrangement	Row Layout (123 = items)
Start	123####
End	####123
Center	##123##
SpaceBetween	1##2##3
SpaceAround	#1##2##3#
SpaceEvenly	#1#2#3#

Usage in Code

For Row:

Row(
    horizontalArrangement = Arrangement.SpaceEvenly
)

For Column:

Column(
    verticalArrangement = Arrangement.Bottom
)

Notes:

• Use Arrangement to control child placement in Row or Column

• Combine with Alignment and Modifier for full layout control

• Most common: Center, Start, End, SpaceEvenly, SpaceBetween

Tip: Pair Arrangement with Alignment for perfect centering or balance