Understanding Alignment and Arrangement in Jetpack Compose

jetpack compose alignment arrangement

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 they work and how to use them to get the desired output.

Prerequisites:

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.

arrangement Column Row

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.

alignment android compose

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.

Column layout

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:

border element

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.

column vertical arrangement
Arrangement.Top:

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

Arrangement.Bottom:

It places children at the bottom.

arrangement bottom
Arrangement.Center:

It places the children at the center.

arrangement center
Arrangement.SpaceBetween:

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

arrangement spacebetween
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 spaceevenly
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.

arrangement spacearound

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.

column horizontal alignment
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.

alignmentend
Alignment.CenterHorizontally:

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

center horizontally

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.

jetpack compose row layout

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.

horizontal arrangement
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 end
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.

arrangement center

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 spaceevenly row
Arrangement.SpaceBetween:
arrangement spacebetween row
Arrangement.SpaceAround:
arrangement spacearound row

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

vertical 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 bottom
Alignment.CenterVertically:

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

alignment centervertically

Box Layout:

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

box content alignment

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:

box border content

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.

box alignment

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

top 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 above 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:

box alignment children

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.

Leave a Comment