Jetpack Compose Row&Column Cheat Sheet

Photo by Andreas Dress on Unsplash

Row

A Row is a layout used to display child components in a horizontal manner.

If you wished to display three texts a row you can create a Row like below:

Row() {
    Text("Text1", Modifier.background(Color.Cyan), fontSize = 24.sp)
    Text("Text2", Modifier.background(Color.Gray), fontSize = 24.sp)
    Text("Text3", Modifier.background(Color.Blue), fontSize = 24.sp)
}

Column

A Column is a layout used to display child components in a vertical manner.

If you wished to display three texts a column you can create a Column like below:

Column has verticalArrangement and horizontalAlignment properties. Row has horizontalArrangement and verticalAlignment.

Let’s start working with Row.

We can change verticalAlignment property and we get different result.

If you want to change location of the texts in horizontal axis, you should set horizontalArrangement.

Continue work with Column.

We can change horizontalAlignment property and we get different result.

If you want to change location of the texts in vertical axis, you should set verticalArrangement.

I showed you some basic examples where content is located together, but there are some cases, where we have to place content separately. I’ll demonstrate it.

Arrangement.SpaceBetween

Place children such that they are spaced evenly across the main axis, without free space before the first child or after the last child.

Arrangement.SpaceAround

Place children such that they are spaced evenly across the main axis, including free space before the first child and after the last child, but half the amount of space existing otherwise between two consecutive children.

Arrangement.SpaceEvenly

Place children such that they are spaced evenly across the main axis, including free space before the first child and after the last child.