Composing Alignment & Arrangement

Alignment & Arrangement in Jetpack Compose

Andoird Stuidio Code with Jetpack Compose Preview

Jetpack Compose offers several options for aligning and arranging your UI elements within containers like Row, Column, and Box. Understanding these options empowers you to create visually appealing and intuitive layouts for your apps.

Alignment

Horizontal

Determines how elements are positioned within their available horizontal space in the container.

• Alignment.Center: Centers the element horizontally within its container.
• Alignment.Start: Aligns the element to the left edge of its container.
• Alignment.End: Aligns the element to the right edge of its container.
• Alignment.CenterVertically: Vertically centers the element within its container.

Vertical

Determines how elements are positioned within their available vertical space in the container.

• Alignment.Top: Aligns the element to the top edge of its container.
• Alignment.Bottom: Aligns the element to the bottom edge of its container.
• Alignment.CenterHorizontally: Horizontally centers the element within its container.

Arrangement

Horizontal

Defines how the horizontal space available in the container is distributed among its children.

• Arrangement.SpaceBetween: Distributes the space evenly between the children, with equal padding on the left and right sides.
• Arrangement.Start: Places all children together on the left side of the container, with any remaining space on the right.
• Arrangement.End: Places all children together on the right side of the container, with any remaining space on the left.
• Arrangement.SpaceEvenly: Distributes the space evenly between the children and the container edges, resulting in equal padding between all elements.

Vertical

Defines how the vertical space available in the container is distributed among its children.

• Arrangement.Top: Places all children together at the top of the container, with any remaining space at the bottom.
• Arrangement.Bottom: Places all children together at the bottom of the container, with any remaining space at the top.
• Arrangement.Center: Vertically centers all children within the container, with any remaining space equally distributed above and below them.
• Arrangement.SpaceBetween: Distributes the space evenly between the children, with equal padding on the top and bottom sides.

Modifiers

• modifier = Modifier.align(alignment: Alignment): Applies the specified alignment to the element.
• modifier = Modifier.gravity(alignment: Alignment): Similar to align but also considers gravity when positioning the element.

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text(
        text = "Text 1",
        modifier = Modifier.align(Alignment.CenterVertically)
    )
    Text(
        text = "Text 2",
        modifier = Modifier.gravity(Alignment.Center)
    )
}

Column(
    modifier = Modifier.fillMaxHeight(),
    verticalArrangement = Arrangement.Bottom
) {
    Text(text = "Top Text")
    Spacer(modifier = Modifier.height(16.dp))
    Text(text = "Bottom Text", modifier = Modifier.align(Alignment.CenterHorizontally))
}

Look for more tips about Compose Layout coming soon.

Thanks,

~Ash