Jetpack Compose Layout Basics
A layout is a systematic arrangement of items within certain limits. Certain limits in this case is the screen of our device. Jetpack compose layouts helps us to structurally arrange UI elements.
In this article, we will examine 3 standard jetpack compose layouts — Column, Row, and a Box.
Column
A column arranges its UI elements in a vertical sequence on the screen. What this means is that without specifying any alignment modifiers for its children, the first UI element in the Column will be the topmost element shown on the screen, and the second element will be shown next.
For example let us create a column with 3 Text elements as shown below.
@Composable
fun ColumnLayout(
modifier: Modifier = Modifier
) {
Column{
Text(
modifier = Modifier.background(color = Color.LightGray),
text = "Hello",
)
Text(
modifier = Modifier.background(color = Color.Blue),
text = "Android,"
)
Text(
modifier = Modifier.background(color = Color.Cyan),
text = "Jetpack Compose.")
}
}
Without specifying any alignment modifiers for the children, this is what we get.
We can take advantage of two parameters of the column composable that help in aligning and arranging the children according to our needs.
1. VerticalArrangement — As the name suggests, this is the vertical arrangement of the layouts children. We already know that the column composable places it’s children vertically. The verticalArrangement parameter gives us the option to specify how we want to arrange the children vertically. For example how much space do we want between the elements, should we evenly arrange the children, should we place them as close to the top as possible, and so forth. The following are the options
a. Arrangement.Top — Places the children as close to the top as possible.
b. Arrangement.Bottom — Places the children as close to the bottom as possible.
c. Arrangement.SpaceBetween — This evenly spreads the children in the layout but with the first and last element as close to the top and bottom respectively.
d. Arrangement.SpaceEvenly — Unlike the Arrangement.SpaceBetween, this adds space before the first item and after the last item.
e. Arrangement.Center — This centers the children.
f. Arrangement.SpaceAround — This evenly spreads the children but with the first and last element leaving half the space to the top and bottom respectively that is between the children. Visually this would be _A__B__C_
g. Arrangement.spacedBy() — We can specify the amount of space we want between the element.
Here are all these arrangements visually.
2. HorizontalAlignment — This helps us to define how we want to horizontally align the elements, either to the right, left or horizontal center of the screen.
A child element can override this parameter if it specifies how it wants to be placed in the parent. For example if the horizontal alignment is set to Alignment.CenterHorizontally and a child elements modifier is set to Align.Start, the child’s alignment modifier will take priority over the parent’s.
Row
This arranges it’s children in horizontal sequence. What this means is that without specifying any alignment modifiers for its children, the first UI element in the Row will be the first element on the left ofthe screen, and the second element will be shown next.
@Composable
fun RowLayout(
modifier: Modifier = Modifier
) {
Row (
modifier = Modifier.fillMaxSize(),
horizontalArrangement = Arrangement.SpaceEvenly,
verticalAlignment = Alignment.Bottom
){
Text(
modifier = Modifier
.background(color = Color.LightGray),
text = "Hello",
)
Text(
modifier = Modifier.background(color = Color.Blue),
text = "Android,"
)
Text(
modifier = Modifier.background(color = Color.Cyan),
text = "Jetpack Compose.")
}
}
As you may have guessed, this is just the opposite of how Column lays out it’s children. The two parameters we can adjust are horizontalArrangement and verticalAlignment. Feel free to play around with the different arrangements and alignments at your disposal.
- horizontalArrangement — Similar to the verticalArrangement, this p gives us the option to specify how we want to arrange the children horizontally. For example how much space do we want between the elements, should we evenly arrange the children, should we place them as close to the start/left or end/right as possible, and so forth. The following are the options;
a. Arrangement.Start — Places the children as close to the start/left as possible.
b. Arrangement.End — Places the children as close to the end/right as possible.
c. Arrangement.SpaceBetween — This evenly spreads the children in the layout but with the first and last element as close to the start and end respectively.
d. Arrangement.SpaceEvenly — Unlike the Arrangement.SpaceBetween, this adds space before the first item and after the last item.
e. Arrangement.Center — This centers the children.
f. Arrangement.SpaceAround — This evenly spreads the children but with the first and last element leaving half the space to the start and end respectively that is between the children. Visually this would be _A__B__C_
g. Arrangement.spacedBy() — We can specify the amount of space we want between the elements.
2. verticalAlignment — This helps us to define how we want to vertically align the elements, either to the top, bottom or vertical center of the screen.
A child element can override this parameter if it specifies how it wants to be placed in the parent.
For example if the vertical alignment is set to Alignment.CenterVertically and a child element’s modifier is set to Align.Bottom, the child’s alignment modifier will take priority over the parent’s.
Box
Unlike the Column and Row Composables, the Box Composable gives us the option to place UI elements on top of another. The ContentAlignment parameter defines the default parameter for the children. This can be overridden by the children.
The Box composable layout help us create beautiful layouts. As shown below, we can create profile like pages using the Box layout.
@Composable
fun BoxLayout(
modifier: Modifier = Modifier
) {
Box(
modifier = modifier.height(140.dp),
contentAlignment = Alignment.TopCenter,
){
Column {
Image(
modifier = Modifier.fillMaxWidth() ,
painter = painterResource(id = R.drawable.ic_launcher_background),
contentDescription = null,
contentScale = ContentScale.FillBounds
)
}
Image(
modifier = Modifier
.padding(start = 16.dp)
.clip(CircleShape)
.size(60.dp)
.background(color = Color.Magenta)
.align(Alignment.BottomStart)
.border(shape = CircleShape, width = 2.dp, color = Color.White),
imageVector = Icons.Default.Person,
contentDescription = null,
contentScale = ContentScale.FillBounds
)
}
}
Feel free to practice the different alignments and see what you will come up with.
As shown in the code above, we can also nest these layouts to create sophisticated layouts. With only these three layouts, the only limit is your imagination.
For more content like this, please follow me.
Follow me on X @drew_phiri https://twitter.com/drew_phiri
