Layout Basics in Jetpack Compose

Jetpack Compose is Google’s modern toolkit for building native Android user interfaces using declarative Kotlin code. It makes UI development faster and easier. One of the most important parts of designing any interface is understanding how to lay out your elements. Compose makes layouts flexible and powerful, offering a much simpler way to arrange UI elements compared to traditional XML. In this article, you'll learn the basics of layout in Jetpack Compose, explore the different layout containers available, and see how to create your own custom layout to fit your app's needs.

What is a Layout in Jetpack Compose?

In Jetpack Compose, a layout is a container that decides how child composables (UI elements) are arranged on the screen. It defines their size and position based on certain rules or constraints. Layouts are written in Kotlin code, making them easier to manage and more readable than traditional XML. Jetpack Compose also provides several built-in layout containers like - Row, Column, Box, and Lazy Layouts that are easy to use and cover most common layout needs.

Key Concepts of Jetpack Compose Layouts:

1. Composable Function: In Compose, you can think of every element in the UI as a composable function, and it’s a function that composes UI content.
2. Modifier: It is one of the fundamental ideas for establishing how a layout will act and look, including its size, margin, alignment, and background color.

Basic Layout Containers

1. Column

The Column composable arranges its child composables vertically, one below the other. It respects the constraints of its parent and will take up as much vertical space as it needs for its children.

@Preview(showBackground = true)
@Composable
fun ColumnExample() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text(text = "Item 1")
        Text(text = "Item 2")
        Text(text = "Item 3")
    }
}

Preview:

2. Row

Similar to Column, the Row composable arranges its children horizontally in a line, from left to right. It takes up as much horizontal space as necessary to fit its children.

@Preview(showBackground = true)
@Composable
fun RowExample() {
    Row(
        modifier = Modifier
            .fillMaxSize()
            .padding(12.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text(text = "Left")
        Text(text = "Center")
        Text(text = "Right")
    }
}

Preview:

3. Box

The Box composable allows children to be layered on top of each other, enabling overlays or stacking of elements. By default, each child will be positioned in the top-left corner unless specified otherwise.

@Preview(showBackground = true)
@Composable
fun BoxExample() {
    Box(
        modifier = Modifier
            .background(Color.Gray)
            .size(200.dp)
    ) {
        Text(
            text = "Top Text",
            modifier = Modifier.align(Alignment.TopStart)
        )
        Text(
            text = "Bottom Text",
            modifier = Modifier.align(Alignment.BottomEnd)
        )
    }
}

Preview:

Modifiers and Customization

Modifiers are fundamental in Compose as they allow you to define how your composables behave and appear. You can chain multiple modifiers to achieve a range of effects such as layout control, interaction handling, and appearance styling.

1. Basic Modifiers

• padding(): Adds space around the composable.
• size(): Sets the size of the composable.
• fillMaxSize(): Expands the composable to fill the maximum available space in both dimensions.
• background(): Sets a background color or drawable for the composable.
• clickable(): Makes the composable clickable.

@Preview(showBackground = true)
@Composable
fun ModifierExample() {
    Text(
        text = "Hello, Jetpack Compose!",
        modifier = Modifier
            .padding(16.dp)
            .background(Color.Green)
            .size(150.dp)
    )
}

Preview:

2. Alignment and Arrangement

Compose provides flexibility in aligning children within layout containers like Row, Column, and Box.

• Horizontal/Vertical Arrangement: Used in Row or Column to define the spacing between children.
• Alignment: Used in Box or individually on children within Row and Column to control how items align within their container.

@Preview(showBackground = true)
@Composable
fun AlignmentExample() {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "Centered Text")
    }
}

Preview:

Custom Layouts

Basically, predefined layouts should be enough in most cases, but sometimes you have to place elements with specific positioning rules into your layout. With the help of Layout composable, Compose let you design your own layouts.

Example of a Custom Layout:

Let’s create a simple custom layout that places one composable in the center and another one below it.

@Composable
fun CustomLayoutExample(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->

        // Measure children
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }

        // Set the layout size
        layout(constraints.maxWidth, constraints.maxHeight) {
            // Positioning child composables
            placeables.forEachIndexed { index, placeable ->
                if (index == 0) {
                    // Place first child at top-left
                    placeable.placeRelative(0, 0)
                } else {
                    // Place the second child below the first
                    placeable.placeRelative(0, placeables[0].height)
                }
            }
        }
    }
}

To use the custom layout:

@Preview(showBackground = true)
@Composable
fun Preview() {
    CustomLayoutExample (
        modifier = Modifier
            .padding(16.dp)
    ) {
        Text(text = "Top")
        Text(text = "Bottom")
    }
}

Preview:

Lazy Layouts

For dynamic and large data sets, LazyColumn and LazyRow are efficient alternatives to Column and Row. These layouts render only the visible items, significantly improving performance for scrollable lists.

LazyColumn

@Preview(showBackground = true)
@Composable
fun LazyColumnExample() {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(100) { index ->
            Text(text = "Item #$index", modifier = Modifier.padding(16.dp))
        }
    }
}

Preview:

LayRow

@Preview(showBackground = true)
@Composable
fun LazyRowExample() {
    LazyRow(
        modifier = Modifier.fillMaxSize()
    ) {
        items(100) { index ->
            Text(text = "Item #$index", modifier = Modifier.padding(16.dp))
        }
    }
}

Preview:

Conclusion

Better than using XML, the layout in Jetpack Compose is easier to create and adjust for UI layouts in android applications. Apart from basic UI containers such as Column, Row, Box and LazyColumn, it offers powerful modifiers with which you can create responsive and dynamic UI. Custom layouts are useful when needed to give an option for creating extremely targeted and unique designs for your app.With this foundation you will be able to start introducing Compose layouts to build smooth and beautiful user interfaces. It’s declarative which gives you the opportunity to write the UI code in a composing clear and consistently maintainable.