Welcome to the layout basics tutorial in Jetpack Compose. Jetpack Compose uses Kotlin code to make layouts. In this article, we will learn about rows and columns in Jetpack Compose and make a small demo app that looks like this:

Note that compose version is 1.1.1

1. Rows

Rows are the first main layout you will use when building apps with Jetpack Compose. Rows are oriented from left to right. In our app we will now create a Composable function that will return a row that we will add to our column.

A row can be built the following way:

Row(
    modifier = Modifier.fillMaxWidth().padding(8.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(
        text = "Pizza",
        style = MaterialTheme.typography.h4,
        modifier = Modifier.padding(start = 20.dp)
    )
    Text(
        text = "$5",
        style = MaterialTheme.typography.h6,
        modifier = Modifier.padding(start = 20.dp)
    )
}

Chaining Elements in Rows

As you can see, a Row can have several parameters. We assign it a Modifier and with our Modifier we are able to chain elements. For instance, we can specify our width, padding, and background as we see in our preview.

Aligning Row Elements

In rows elements flow from left to right. To align elements vertically, we simply add the verticalAlignment parameter and set it equal to one of the constants from Alignment.

2. Columns

Columns are the second main layout you will encounter with Jetpack Compose. Columns are oriented vertically. A column can be built like this:

Column(
    modifier = Modifier
    .fillMaxSize()
    .background(MaterialTheme.colors.surface),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(
        text = "Column Layout",
        style = MaterialTheme.typography.h4,
        color = MaterialTheme.colors.primary
    )
    Text(
        text = "Pizza",
        style = MaterialTheme.typography.h6,
        color = MaterialTheme.colors.primary
    )
    Text(
        text = "$5",
        style = MaterialTheme.typography.h6,
        color = MaterialTheme.colors.primary
    )
}

Chaining Elements in Columns

Just like Rows, we can chain elements in columns. Again, we can use a Modifier and add multiple properties that we can adjust like width, height, and padding.

Aligning elements in Columns

To position elements horizontally in a Column, we can use horizontalAlignment property and assign it a constant value from Alignment to change how items will be positioned.

3. Boxes

Boxes are the third main layout in Jetpack Compose. The main use for boxes is to stack child elements on top of each other.

Chaining Properties in Boxes

Like Rows and Columns, we can chain multiple properties with our Modifier to alter the size and appearance of Boxes.

Aligning Child Elements in Boxes

With Boxes, we can specify where we would like to align our child elements on our box. Our three vertical options are top, center, and bottom. Our horizontal options are start, center, and end. The following code shows the nine possible alignments in action.

Box(
    modifier = Modifier
    .fillMaxWidth()
    .height(140.dp)
) {
    Text(text = "Top Start", modifier = Modifier.align(Alignment.TopStart))
    Text(text = "Top Center", modifier = Modifier.align(Alignment.TopCenter))
    Text(text = "Top End", modifier = Modifier.align(Alignment.TopEnd))
    Text(text = "Center Start", modifier = Modifier.align(Alignment.CenterStart))
    Text(text = "Center", modifier = Modifier.align(Alignment.Center))
    Text(text = "Center End", modifier = Modifier.align(Alignment.CenterEnd))
    Text(text = "Bottom Start", modifier = Modifier.align(Alignment.BottomStart))
    Text(text = "Bottom Center", modifier = Modifier.align(Alignment.BottomCenter))
    Text(text = "Bottom End", modifier = Modifier.align(Alignment.BottomEnd))
}

4. Nested Layouts

When one layout is positioned inside another layout, this creates a nested layout. For example, the following function for our demo application will nest a column inside a row.

@Composable
fun CustomRow(
    name:String,
    cost:String,
    painter: Painter,
    icon: Painter
){
    Row(
        modifier = Modifier
            .padding(12.dp)
            .clip(RoundedCornerShape(8.dp))
            .background(MaterialTheme.colors.surface)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
            modifier = Modifier
                .padding(start = 20.dp)
                .clip(RoundedCornerShape(8.dp))
                .size(72.dp)
        ) {
            Image(
                modifier = Modifier.fillMaxSize(1f),
                painter = painter, contentDescription = "Food",
            )
            Image(
                modifier = Modifier.size(20.dp).align(Alignment.BottomEnd),
                painter = icon, contentDescription = "icon"
            )
        }
        Column {
            Text(
                text = name,
                style = MaterialTheme.typography.h4,
                modifier = Modifier.padding(start = 20.dp)
            )
            Text(
                text = cost,
                style = MaterialTheme.typography.h4,
                modifier = Modifier.padding(start = 20.dp)
            )
        }
    }
}

Our CustomRow function takes four parameters. The first represents the name of the food we will add to the list. The second is the cost, and the third is a Painter object which we will use to create an image to go along with the food that we added to our list. Finally, we add a Painter to act as an icon. The first object created with this function is a row Also, we will align the contents of our row to the center on our vertical axis and change the background of our row to our surface color from MaterialTheme. Next, we will add a Box with two Images and stack them. Then, we will add a column with two Text fields.

Our demo application uses a column as its main layout and repeatedly uses the CustomRow function to nest rows inside our column.

@Composable
fun AndroidCafe() {

    Surface(
        color = MaterialTheme.colors.background
    ) {
        Scaffold(
            topBar = {
                Text(
                    text = "Android Cafe",
                    modifier = Modifier.padding(12.dp),
                    style = MaterialTheme.typography.h4
                )
            }
        ) {
            Column(
                modifier = Modifier.fillMaxSize()
            ) {
                CustomRow(
                    name = "Pizza","$5", 
                    painter = painterResource(id = R.drawable.pizza)
                )
                CustomRow(
                    name = "Coffee","$1", 
                    painter = painterResource(id = R.drawable.coffee)
                )
                CustomRow(
                    name = "Salad","$2", 
                    painter = painterResource(id = R.drawable.salad)
                )
                CustomRow(
                    name = "Ice Cream","$.63", 
                    painter = painterResource(id = R.drawable.ice_cream)
                )
            }
        }
    }
}

5. Conclusion

That’s all for this app!. Even with just Rows, Columns, and Boxes you can create intuitive user interfaces in Jetpack Compose. if you would like to access the full repository for this app, click the Button below for the GitHub repository for this project.

Documentation for Jetpack Compose layouts

Here is the full Github repository for this article:

GitHub

Here We Go Again : (

if (article == helpful) {
    println("Like and subscribe to blog newsletter.")
} else {
    println("Let me know what i should blog on.")
}

This site uses Akismet to reduce spam. Learn how your comment data is processed.