Jetpack Compose: Getting Started

We have previously used the Column and Row Composables to arrange Composables vertically and horizontally respectively. In this session, we will dive a little deeper into how to align items within a Column and Row.

We will also look at how to use the weight modifier to allocate space to Composables within a Column or Row.

Lastly, we will get to look at Modifiers that are specific to Columns and Rows.

The Column Composable is used to arrange Composables vertically. It is a Composable that is part of the ColumnScope interface.

In order to arrange a set of items vertically, we need to wrap them in a Column Composable.

Column {
    // Composables
}

The Column Composable has 4 parameters that we can use to modify its behaviour:

• modifier: This is used to modify the Column Composable. It is of type Modifier and has a default value of Modifier.
• verticalArrangement: This is used to specify how the items within the Column Composable should be arranged vertically. It is of type Arrangement.Vertical and has a default value of Top.
• horizontalAlignment: This is used to specify how the items within the Column Composable should be aligned horizontally. It is of type Alignment.Horizontal and has a default value of Start.
• content: This is used to specify the items that should be arranged vertically. It is of type @Composable ColumnScope.() -> Unit and has a default value of {}.

Every single Column Composable has a ColumnScope interface. This interface has a number of functions and properties that can be used to modify the Column Composable.

Jetpack Compose allows us to use the align Modifier function to align items within a Column Composable. This function is part of the ColumnScope interface. This will result in individual items overriding the horizontalAlignment parameter of the Column Composable.

Column

@Composable
fun ColumnDemo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Item 1",
            modifier = Modifier
                .background(Color.Green)
                .padding(16.dp)
        )
        Text(
            text = "Item 2",
            modifier = Modifier
                .background(Color.Blue)
                .padding(16.dp)
        )
        Text(
            text = "Item 3",
            modifier = Modifier
                .background(Color.Red)
                .padding(16.dp)
        )
    }
}

We can modify the position of the Item 2 by using the align Modifier function. This function is part of the ColumnScope interface.

@Composable
fun ColumnDemo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Item 1",
            modifier = Modifier
                .background(Color.Green)
                .padding(16.dp)
        )
        Text(
            text = "Item 2",
            modifier = Modifier
                .background(Color.Blue)
                .padding(16.dp)
                .align(Alignment.End)
        )
        Text(
            text = "Item 3",
            modifier = Modifier
                .background(Color.Red)
                .padding(16.dp)
        )
    }
}

The Row Composable is used to arrange Composables horizontally. It is a Composable that is part of the RowScope interface.

In order to arrange a set of items horizontally, we need to wrap them in a Row Composable.

Row {
    // Composables
}

The Row Composable has 4 parameters that we can use to modify its behaviour:

• modifier: This is used to modify the Row Composable. It is of type Modifier and has a default value of Modifier.
• verticalAlignment: This is used to specify how the items within the Row Composable should be aligned vertically. It is of type Alignment.Vertical and has a default value of CenterVertically.
• horizontalArrangement: This is used to specify how the items within the Row Composable should be arranged horizontally. It is of type Arrangement.Horizontal and has a default value of Start.
• content: This is used to specify the items that should be arranged horizontally. It is of type @Composable RowScope.() -> Unit and has a default value of {}.

Every single Row Composable has a RowScope interface. This interface has a number of functions and properties that can be used to modify the Row Composable.

Jetpack Compose allows us to use the align Modifier function to align items within a Row Composable. This function is part of the RowScope interface. This will result in individual items overriding the verticalAlignment parameter of the Row Composable.

Row

@Composable
fun RowDemo() {
    Row(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Text(
            text = "Item 1",
            modifier = Modifier
                .background(Color.Green)
                .padding(16.dp)
        )
        Text(
            text = "Item 2",
            modifier = Modifier
                .background(Color.Blue)
                .padding(16.dp)
        )
        Text(
            text = "Item 3",
            modifier = Modifier
                .background(Color.Red)
                .padding(16.dp)
        )
    }
}

We can modify the position of the Item 2 by using the align Modifier function. This function is part of the RowScope interface.

@Composable
fun RowDemo() {
    Row(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Text(
            text = "Item 1",
            modifier = Modifier
                .background(Color.Green)
                .padding(16.dp)
        )
        Text(
            text = "Item 2",
            modifier = Modifier
                .background(Color.Blue)
                .padding(16.dp)
                .align(Alignment.Bottom)
        )
        Text(
            text = "Item 3",
            modifier = Modifier
                .background(Color.Red)
                .padding(16.dp)
        )
    }
}

In this lesson, we learned about the Column and Row Composables. We learned how to use them to arrange Composables vertically and horizontally respectively. We also learned how to use the align Modifier function to align individual items within a Column or Row Composable.

In our next session, we will learn about how to add spacing between items within a Column or Row Composable. We will also learn about how to use the weight Modifier function to specify how much space an item should take up within a Column or Row Composable.