Jetpack Compose Alignment and Arrangement (with Examples)

If you have started working with Jetpack Compose, chances are you have seen alignment and arrangement a lot. They are used to specify the position of the children in a layout. In this article, we will learn how to use them to get the desired output.

Prerequisites:

• Row and Column in Jetpack Compose

First, let’s look at the Column and Row definitions.

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
) {
}

As you can see, there are two parameters – verticalArrangement and horizontalAlignment.

This is the Row definition.

@Composable
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
) {
}

It has horizontalArrangement and verticalAlignment. The goal of this article is to make you understand when to use these four parameters.

Let’s get started.

When it comes to arranging the children, we need to think in terms of two axes – the main axis and the cross axis.

The Main Axis:

It is the primary axis along which the children are placed. We need to use the Arrangement object when dealing with it.

For example, the Column places the children vertically. So, the main axis is the vertical axis (y-axis). This is why it has the verticalArrangement parameter. Use it whenever you want to set the children vertically.

The Row places the children horizontally. So, for the Row, the main axis is the horizontal axis (x-axis). This is why it has the horizontalArrangement parameter. Use it when placing the children horizontally.

The Cross Axis:

It is the axis that is perpendicular to the main axis. We need to use the Alignment object while placing the children along this axis.

For example, in the case of the Column, the cross axis is the horizontal axis (x-axis). This is why it has the horizontalAlignment parameter. Use it whenever you want to set the children horizontally.

For the Row, the cross axis is the vertical axis (y-axis). This is why it has the verticalAlignment parameter. Use it when placing the children vertically.

If you are getting confused, you don’t need to remember all the above things. The first word in each parameter’s name describes the axis along which the children are placed.

For example, you are using the Column layout and want to set the children along the vertical axis. Use the verticalArrangement parameter. If you want to set them horizontally, use the horizontalAlignment parameter. Notice that the axis you are dealing with and the first word in the parameter’s name are the same. You can also apply the same trick with the Row layout.

There are different ways to position the children inside a layout. Let us look at them with examples.

Jetpack Compose Column:

Declare a Column layout and set the size to fillMaxSize(). It makes the Column occupy the whole width and height of the available space. Next, create 3 texts using the Text composable inside the Column.

Column(modifier = Modifier.fillMaxSize()) {
    Text(text = "SemicolonSpace 1")
    Text(text = "SemicolonSpace 2")
    Text(text = "SemicolonSpace 3")
}

Run the project. The output looks like this.

To understand what is going on, add borders to the elements.

Column(
    modifier = Modifier
        .fillMaxSize()
        .border(width = 1.dp, color = Color.Magenta)
) {
    Text(
        modifier = Modifier.border(width = 1.dp, color = Color.Green),
        text = "SemicolonSpace 1"
    )
    Text(
        modifier = Modifier.border(width = 1.dp, color = Color.Green),
        text = "SemicolonSpace 2"
    )
    Text(
        modifier = Modifier.border(width = 1.dp, color = Color.Green),
        text = "SemicolonSpace 3"
    )
}

Output:

The Column layout is filling the whole device’s width and height. The children are placed in the top left corner. Let’s change their position along the vertical axis. From the trick above, the parameter name should start with vertical. So, it should be verticalArrangement. Start typing Arrangement, you will see all the available options.

Arrangement.Top:

It places children at the top. It is the default value.

Arrangement.Bottom:

It places children at the bottom.

Arrangement.Center:

It places the children at the center.

Arrangement.SpaceBetween:

It places the children such that they are spaced evenly across the main axis.

Arrangement.SpaceEvenly:

It places children such that they are spaced evenly across the main axis. It also adds a free space before the first child and after the last child. The free space is equal to the space between the children.

Arrangement.SpaceAround:

It places children such that they are spaced evenly across the main axis. It also adds a free space before the first child and after the last child. But, in this case, the free space is equal to half of the space between the children.

Now, let’s place the children horizontally. We need to use the horizontalAlignment parameter. First, remove the verticalArrangement and start typing Alignment. You will find 3 values.

Alignment.Start:

It places the children at the beginning of the cross axis. It is the default value.

Alignment.End:

It places the children at the end of the cross axis.

Alignment.CenterHorizontally:

It places the children at the center of the cross axis.

Row Layout:

Let’s arrange the elements in the Row. Change the Column to Row in the above code. Remove the Text() and add 3 boxes with size 56 dp. Set a padding of 2 dp and background color to the boxes.

Row(
    modifier = Modifier
        .fillMaxSize()
        .border(width = 2.dp, color = Color.Green)
) {
    Box(
        modifier = Modifier
            .padding(all = 2.dp)
            .size(56.dp)
            .background(color = Color.Magenta)
    ) {
    }
    Box(
        modifier = Modifier
            .padding(all = 2.dp)
            .size(56.dp)
            .background(color = Color.Magenta)
    ) {
    }
    Box(
        modifier = Modifier
            .padding(all = 2.dp)
            .size(56.dp)
            .background(color = Color.Magenta)
    ) {
    }
}

Currently, it looks like this.

Let’s change the children’s position along the horizontal axis. The parameter name should be horizontalArrangement. Start typing Arrangement, you will see the values it accepts.

Arrangement.Start:

It places the children at the beginning of the main axis. It is the default value.

Arrangement.End:

It places the children at the end of the main axis.

Arrangement.Center:

It places the children at the center of the main axis. This is similar to the one we have seen in the Column.

The remaining values are Arrangement.SpaceEvenly, Arrangement.SpaceBetween, and Arrangement.SpaceAround. They arrange the children in the same way as they do in the Column, but along the horizontal axis.

Arrangement.SpaceEvenly:

Arrangement.SpaceBetween:

Arrangement.SpaceAround:

Now, let’s look at the verticalAlignment parameter. Remove the horizontalArrangement and start typing Alignment.

It has 3 values. Let’s assign them one by one.

Alignment.Top:

This is the default value. It places the children at the beginning of the cross axis.

Alignment.Bottom:

It places the children at the end of the cross axis.

Alignment.CenterVertically:

It places the children at the center of the cross axis.

Placing Children in the Box Layout:

Let’s look at the Box. Start typing Box in the Android Studio and select the one with the contentAlignment parameter.

Set its size to fillMaxSize() and add a border. Create a Text() inside the Box.

Box(
    modifier = Modifier
        .fillMaxSize()
        .border(width = 2.dp, color = Color.Magenta),
) {
    Text(text = "SemicolonSpace")
}

Output:

The contentAlignment parameter is used to specify the position of the content inside the Box. Type Alignment and the IDE shows all the possible values.

The names are self-explanatory. For example, Alignment.TopCenter places the children at the top and center.

Instead of using the contentAlignment parameter, we can also set the alignment on the children using the Modifier.align() method.

Box(
    modifier = Modifier
        .fillMaxSize()
        .border(width = 2.dp, color = Color.Magenta)
) {
    Text(
        text = "SemicolonSpace",
        modifier = Modifier.align(Alignment.TopCenter)
    )
}

Run it. You will see the same output as the previous one.

Here is the code that summarizes all the alignment types.

Box(
    modifier = Modifier
        .fillMaxSize()
        .border(width = 2.dp, color = Color.Magenta)
) {
    Text(
        text = "TopStart",
        modifier = Modifier.align(Alignment.TopStart)
    )
    Text(
        text = "TopCenter",
        modifier = Modifier.align(Alignment.TopCenter)
    )
    Text(
        text = "TopEnd",
        modifier = Modifier.align(Alignment.TopEnd)
    )

    Text(
        text = "CenterStart",
        modifier = Modifier.align(Alignment.CenterStart)
    )
    Text(
        text = "CenterEnd",
        modifier = Modifier.align(Alignment.CenterEnd)
    )
    Text(
        text = "Center",
        modifier = Modifier.align(Alignment.Center)
    )

    Text(
        text = "BottomStart",
        modifier = Modifier.align(Alignment.BottomStart)
    )
    Text(
        text = "BottomEnd",
        modifier = Modifier.align(Alignment.BottomEnd)
    )
    Text(
        text = "BottomCenter",
        modifier = Modifier.align(Alignment.BottomCenter)
    )
}

Output:

How to Set a Fixed Gap Between the Child Components in Row and Column Layouts?

Jetpack Compose provides Arrangement.spacedBy() method. It helps us to set a fixed gap between the children. The method has 3 overloads.

1. fun spacedBy(space: Dp): HorizontalOrVertical

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

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

There are two parameters:

space – It is the gap between the children in Dp.

alignment – It is optional. It specifies the position of the children.

Column Example:

Column(
    modifier = Modifier
        .fillMaxSize()
        .border(width = 1.dp, color = Color.Magenta),
    verticalArrangement = Arrangement.spacedBy(
        space = 32.dp, // space between children 
        alignment = Alignment.CenterVertically
    )
) {
    Text(
        modifier = Modifier.border(width = 1.dp, color = Color.Green),
        text = "SemicolonSpace 1"
    )
    Text(
        modifier = Modifier.border(width = 1.dp, color = Color.Green),
        text = "SemicolonSpace 2"
    )
    Text(
        modifier = Modifier.border(width = 1.dp, color = Color.Green),
        text = "SemicolonSpace 3"
    )
}

Output:

Row Example:

Row(
    modifier = Modifier
        .fillMaxSize()
        .border(width = 2.dp, color = Color.Green),
    horizontalArrangement = Arrangement.spacedBy(
        space = 32.dp, // space between children
        alignment = Alignment.CenterHorizontally
    )
) {
    Box(
        modifier = Modifier
            .size(56.dp)
            .background(color = Color.Magenta)
    ) {
    }
    Box(
        modifier = Modifier
            .size(56.dp)
            .background(color = Color.Magenta)
    ) {
    }
    Box(
        modifier = Modifier
            .size(56.dp)
            .background(color = Color.Magenta)
    ) {
    }
}

Output:

This is all about Arrangement and Alignment in Jetpack Compose. I hope you learned something new. If you have any doubts, let me know in the comments below.

Explore Jetpack Compose:

References:

• Android docs