Site icon Howtodoandroid

Getting started with jetpack compose – Layouts

Velmurugan

The Jetpack Compose implementation of the layout system has two main goals: being high-performant, and making it easy to write custom layouts. High performance is achieved in Compose by prohibiting measuring layout children more than once.

A Composable function might emit several UI elements. However, if you don’t provide guidance on how they should be arranged, Compose might arrange the elements in a way you don’t like.

If you’re new to Compose, I highly recommend going through the following articles:

Getting started with jetpack compose – Basic components

Getting started with jetpack compose – ConstraintLayout

Getting started with jetpack compose – Modifiers

Getting started with jetpack compose – Scaffold layout

Getting started with jetpack compose – Theming

Composable function without layout

@Composable
fun DisplayTitle() {
    Text(text = "Title Welcome", fontSize = 30.sp)
    Text(text = "Jetpack compose")
}
Code language: JavaScript (javascript)

Without guidance on how you want them arranged, Compose stacks the text elements on top of each other, making them unreadable.

Standard layout components in jetpack

Column

The Column Composable provides us with the functionality of displaying a collection of composable in a vertically sequenced format, where each composable is displayed simultaneously one after the other.

Their counterpart in the XML world would be the LinearLayout (vertical and horizontal orientations).

column

Declaring a Column

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

There are four arguments which the constructor can take,

Modifiers

The modifier is an ordered, immutable collection of modifier elements that decorate or add behavior to Compose UI elements. For example, backgrounds, padding, and click event listeners decorate or add behavior to rows, text, or buttons.

I will explain more about the modifiers in another post.

Getting started with jetpack compose – Modifiers

Vertical Arrangement

Using the verticalArrangement, we can arrange the child of the layout in the vertical axis. by default, they are laid out to be arranged at the top of the column.

Top – align children to the top of the column

@Composable
fun DisplayTitle() {
    Column(verticalArrangement = Arrangement.Top, modifier = Modifier.fillMaxWidth()
        .height(170.dp)
        .padding(8.dp)
        .border(2.dp, Color.Black)
        .padding(8.dp)) {
        Text(text = "Title Welcome")
        Text(text = "Jetpack compose")
    }
}
Code language: JavaScript (javascript)
Vertical arrangement top

Center – align children at the center of the column

@Composable
fun DisplayTitle() {
    Column(verticalArrangement = Arrangement.Center, modifier = Modifier.fillMaxWidth()
        .height(170.dp)
        .padding(8.dp)
        .border(2.dp, Color.Black)
        .padding(8.dp)) {
        Text(text = "Title Welcome")
        Text(text = "Jetpack compose")
    }
}
Code language: JavaScript (javascript)
Vertical arrangement center

Bottom – align children to the bottom of the column

@Composable
fun DisplayTitle() {
    Column(verticalArrangement = Arrangement.Bottom, modifier = Modifier.fillMaxWidth()
        .height(170.dp)
        .padding(8.dp)
        .border(2.dp, Color.Black)
        .padding(8.dp)) {
        Text(text = "Title Welcome")
        Text(text = "Jetpack compose")
    }
}
Code language: JavaScript (javascript)
Vertical arrangement bottom

Space Around – evenly distribute the children within the column. As well as adding space before the first child and after the last child, half of that spacing will also be added between each consecutive child.

@Composable
fun DisplayTitle() {
    Column(verticalArrangement = Arrangement.SpaceAround, modifier = Modifier.fillMaxWidth()
        .height(170.dp)
        .padding(8.dp)
        .border(2.dp, Color.Black)
        .padding(8.dp)) {
        Text(text = "Title Welcome")
        Text(text = "Jetpack compose")
    }
}
Code language: JavaScript (javascript)
vertical arrangement Space Around

Space Between – evenly distribute the children within the column, without adding space before the first child or after the last child

@Composable
fun DisplayTitle() {
    Column(verticalArrangement = Arrangement.SpaceBetween, modifier = Modifier.fillMaxWidth()
        .height(170.dp)
        .padding(8.dp)
        .border(2.dp, Color.Black)
        .padding(8.dp)) {
        Text(text = "Title Welcome")
        Text(text = "Jetpack compose")
    }
}
Code language: JavaScript (javascript)
vertical arrangement Space between

Space Evenly – evenly distribute the children within the column, also adding space before the first child and after the last child

@Composable
fun DisplayTitle() {
    Column(verticalArrangement = Arrangement.SpaceEvenly, modifier = Modifier.fillMaxWidth()
        .height(170.dp)
        .padding(8.dp)
        .border(2.dp, Color.Black)
        .padding(8.dp)) {
        Text(text = "Title Welcome")
        Text(text = "Jetpack compose")
    }
}
Code language: JavaScript (javascript)
vertical arrangement Space evenly

horizontal alignment

this allows us to position all of the Column children on the horizontal axis.

The horizontalAlignment parameter can be assigned one of three values:

Start – align the children to the start of the horizontal axis

@Composable
fun DisplayTitle() {
    Column(horizontalAlignment = Alignment.Start, modifier = Modifier.fillMaxWidth()
        .height(170.dp)
        .padding(8.dp)
        .border(2.dp, Color.Black)
        .padding(8.dp)) {
        Text(text = "Title Welcome")
        Text(text = "Jetpack compose")
    }
}
Code language: JavaScript (javascript)
horizontal alignment start

CenterHorizontally – align the children at the center of the horizontal axis

@Composable
fun DisplayTitle() {
    Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxWidth()
        .height(170.dp)
        .padding(8.dp)
        .border(2.dp, Color.Black)
        .padding(8.dp)) {
        Text(text = "Title Welcome")
        Text(text = "Jetpack compose")
    }
}
Code language: JavaScript (javascript)
horizontal alignment center

End – align the children at the end of the horizontal axis

@Composable
fun DisplayTitle() {
    Column(horizontalAlignment = Alignment.End, modifier = Modifier.fillMaxWidth()
        .height(170.dp)
        .padding(8.dp)
        .border(2.dp, Color.Black)
        .padding(8.dp)) {
        Text(text = "Title Welcome")
        Text(text = "Jetpack compose")
    }
}
Code language: JavaScript (javascript)
horizontal alignment end

Children

We can declare a collection of any composable for the children’s argument.

@Composable
fun DisplayTitle() {
    Column {
        Text(text = "Title Welcome")
        Text(text = "Jetpack compose")
    }
}
Code language: JavaScript (javascript)

In this case, Text() is the children’s of the column. We can add multiple children to the column layout.

Row

A Row will show each child next to the previous children. It’s similar to a LinearLayout with a horizontal orientation.

@Composable
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    : Alignment.Vertical = Alignment.Top,
    content: RowScope.() -> Unit
): @Composable Unit
Code language: CSS (css)

Using Row,

@Composable
fun DisplayRowLayout() {
    Row(Modifier.fillMaxWidth()
        .height(150.dp)
        .padding(8.dp).border(2.dp, Color.Blue).padding(8.dp)) {
        Text(text = "Title Welcome", Modifier.padding(8.dp).border(1.dp, Color.Black))
        Text(text = "Jetpack compose", Modifier.padding(8.dp).border(1.dp, Color.Black))
    }
}
Code language: JavaScript (javascript)
Row layout

Row takes the four parameters.

horizontalArrangement

It’s the same as the column’s vericalArrangement, but the direction will be in the vertical axis.

Start– align children to the start of the row

it’s the default arrangement. Please check the above code for the example.

Center – align children at the center of the row

@Composable
fun DisplayRowLayout() {
    Row(Modifier.fillMaxWidth()
        .height(150.dp)
        .padding(8.dp).border(2.dp, Color.Blue).padding(8.dp), horizontalArrangement = Arrangement.Center) {
        Text(text = "Title Welcome", Modifier.padding(8.dp).border(1.dp, Color.Black))
        Text(text = "Jetpack compose", Modifier.padding(8.dp).border(1.dp, Color.Black))
    }
}
Code language: JavaScript (javascript)
horizontal Arrangement center

End – align the children at the end of the row

@Composable
fun DisplayRowLayout() {
    Row(Modifier.fillMaxWidth()
        .height(150.dp)
        .padding(8.dp).border(2.dp, Color.Blue).padding(8.dp), horizontalArrangement = Arrangement.End) {
        Text(text = "Title Welcome", Modifier.padding(8.dp).border(1.dp, Color.Black))
        Text(text = "Jetpack compose", Modifier.padding(8.dp).border(1.dp, Color.Black))
    }
}
Code language: JavaScript (javascript)
horizontal Arrangement end

Space Around – evenly distribute the children within the row. As well as adding space before the first child and after the last child, half of that spacing will also be added between each consecutive child.

@Composable
fun DisplayRowLayout() {
    Row(Modifier.fillMaxWidth()
        .height(150.dp)
        .padding(8.dp).border(2.dp, Color.Blue).padding(8.dp), horizontalArrangement = Arrangement.SpaceAround) {
        Text(text = "Title Welcome", Modifier.padding(8.dp).border(1.dp, Color.Black))
        Text(text = "Jetpack compose", Modifier.padding(8.dp).border(1.dp, Color.Black))
    }
}
Code language: JavaScript (javascript)
horizontal Arrangement space around

Space Between – evenly distribute the children within the row, without adding space before the first child or after the last child.

@Composable
fun DisplayRowLayout() {
    Row(Modifier.fillMaxWidth()
        .height(150.dp)
        .padding(8.dp).border(2.dp, Color.Blue).padding(8.dp), horizontalArrangement = Arrangement.SpaceBetween) {
        Text(text = "Title Welcome", Modifier.padding(8.dp).border(1.dp, Color.Black))
        Text(text = "Jetpack compose", Modifier.padding(8.dp).border(1.dp, Color.Black))
    }
}
Code language: JavaScript (javascript)

Space Evenly – evenly distribute the children within the row, also adding space before the first child and after the last child.

@Composable
fun DisplayRowLayout() {
    Row(Modifier.fillMaxWidth()
        .height(150.dp)
        .padding(8.dp).border(2.dp, Color.Blue).padding(8.dp), horizontalArrangement = Arrangement.SpaceEvenly) {
        Text(text = "Title Welcome", Modifier.padding(8.dp).border(1.dp, Color.Black))
        Text(text = "Jetpack compose", Modifier.padding(8.dp).border(1.dp, Color.Black))
    }
}
Code language: JavaScript (javascript)

vertical Alignment

Allows us to position all of the row children on the vertical axis.

The vertical Alignment parameter can be assigned one of three values.

Top – Align the top of the row. It’s default alignment.

CenterVertically – Align the vertically center of the row.

Bottom – Align the vertically bottom of the row.

Box

The children of the Box layout will be stacked over each other. You can use the align modifier to specify where the composable should be drawn.

@Composable
fun DisplayBoxLayout() {
    Box(modifier = Modifier
        .size(150.dp,150.dp)
        .background(Color.Green)) {
        Text(text = "Hello")
        Text(text = "jetpack compose")
    }
}
Code language: JavaScript (javascript)

If you run this code, you can clearly see that the view are stacked one after another.

We can use Alignments to place child elements in different positions of the parent box layout.

@Composable
fun boxLayout() {
    Box(modifier = Modifier
        .size(150.dp,150.dp)
        .background(Color.Green)) {
        Text(text = "Hello", modifier = Modifier.align(Alignment.TopCenter))
        Text(text = "jetpack compose", modifier = Modifier.align(Alignment.BottomCenter))
    }
}
Code language: JavaScript (javascript)

In the above code, I have added TopCenter alignment for the “Hello” text and BottomCenter alignment for the “jetpack compose” text. this is how we need to change the alignment of the views inside the box layout.

Child elements of a box layout can have 9 different alignments. 

Constraint Layout

ConstraintLayout can help place composable relative to others on the screen and is an alternative to using multiple nested Row, Column, Box, and custom layout elements. ConstraintLayout is useful when implementing larger layouts with more complicated alignment requirements.

Check the below link to learn constraint Layout in jetpack compose

Getting started with jetpack compose – ConstraintLayout

Scaffold

A Scaffold is a layout that implements the basic material design layout structure. You can add things like a TopBar, BottomBar, FAB, or a Drawer.

I have explained the scaffold layout in another post.

Getting started with jetpack compose – Scaffold layout

That’s it. Thanks for reading.

You can download this example on Github.

Exit mobile version