Arrangement vs Alignment in Jetpack Compose

Jetpack Compose uses two distinct concepts to position children inside layout containers: Arrangement controls spacing along the main axis, and Alignment controls positioning along the cross axis. Confusing the two is a common source of unexpected layout behavior, especially when switching between Row, Column, and Box. By the end of this lesson, you will be able to:

• Distinguish main axis from cross axis in Row and Column.
• Apply Arrangement options to control spacing and distribution of children.
• Apply Alignment options to position children along the cross axis and within Box.
• Combine both concepts to achieve precise layout control.

Main Axis and Cross Axis

Every linear layout has a main axis and a cross axis. In a Row, the main axis runs horizontally and the cross axis runs vertically. In a Column, the main axis runs vertically and the cross axis runs horizontally. Arrangement operates on the main axis. Alignment operates on the cross axis.

This distinction matters because the same visual outcome requires different parameters depending on the container. Centering children horizontally uses horizontalArrangement in a Row but horizontalAlignment in a Column.

Arrangement Along the Main Axis

Arrangement defines how children are distributed along the main axis. It controls both the positioning of items and the spacing between them. Common options include:

Row(
    horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier.fillMaxWidth()
) {
    Text("Start")
    Text("Middle")
    Text("End")
}

Arrangement.SpaceBetween places the first item at the start, the last item at the end, and distributes remaining space equally between items. Other options include:

• Arrangement.Start / Arrangement.Top: Pack children at the beginning.
• Arrangement.End / Arrangement.Bottom: Pack children at the end.
• Arrangement.Center: Group children at the center.
• Arrangement.SpaceEvenly: Equal space before, between, and after children.
• Arrangement.SpaceAround: Half space at edges, full space between children.
• Arrangement.spacedBy(8.dp): Fixed spacing between each child.

The spacedBy variant is useful when you want consistent gaps without managing padding on individual items. You can also combine spacedBy with an alignment parameter: Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally) distributes children with gaps and centers the group within the available space when the total child width is less than the container width.