Jetpack Compose Layouts: Crafting with Column and Row

In this article, you will delve into the world of layouts in Jetpack Compose. These layouts serve as the foundation for structuring and arranging UI elements in your app. You will learn how to select the right layout for your needs and position the elements effectively.

The Role of Layouts

In our previous article with Jetpack Compose, we focused on creating individual UI elements. Now, it’s time to master the art of arranging these elements effectively. Think of layouts as the canvases on which you’ll artfully position your UI components.

Layouts in Jetpack Compose

In the realm of Jetpack Compose, the concept of a ViewGroup in the traditional Android world finds its equivalent in the Layout. Layout is the new kingpin when it comes to arranging your composable functions. Take a look at the core components of Layout:

@Composable inline fun Layout(
  content: @Composable () -> Unit,
  modifier: Modifier = Modifier,
  measurePolicy: MeasurePolicy
)

The essential components are content, where you nest your composable functions, and measurePolicy, which dictates how the layout behaves when measuring and arranging the children.

Row

When you think of basic layouts, it’s hard not to reminisce about the trusty LinearLayout. Its Compose counterpart is Row. Row allows you to arrange elements horizontally. Here's how to use it:

@Composable
fun MyRow() {
  Row(
    artist = Artist,
    modifier = Modifier.fillMaxSize()
  ) {
    // Your elements go here
       Row(verticalAlignment = Alignment.CenterVertically) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
  }
}

In this example, you’ve created a Row with specific alignment, arrangement, and sizing parameters to ensure your elements are perfectly placed.

Deeper Dive into Rows

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

horizontalArrangement and verticalAlignment are your allies in controlling how the children align and arrange within the Row. You can choose from various arrangement options such as SpaceBetween, SpaceEvenly, SpaceAround, Center, Start, or End (I ‘ll explain more about these later in this article).

Weighting the Elements

Another powerful technique in composing your UI is using weights. You can define the weight of a child element using the weight() modifier. For example:

@Composable
fun RowScope.MyRow() {
   Text(
     modifier = Modifier.weight(1 / 3f),
     // Other attributes here
   )
}

By assigning weights, you control how much of the parent’s space each child occupies, creating flexible and responsive layouts.

Columns

If you’re dealing with a vertical arrangement, the Column comes to your rescue. Much like Row, it allows you to stack elements vertically. Here's a snippet of how to use it:

@Composable
fun MyColumn() {
  Column(
    modifier = Modifier.fillMaxSize()
  ) {
    // Your elements go here
       Text("Alfred Sisley")
       Text("3 minutes ago")

  }
}

To fully understand the capabilities of a Column, let's peek into its signature:

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

The available parameters are similar to Row, but you adjust them to work with vertical arrangements. Vertical arrangements include options like Top, CenterVertically, and Bottom.

As we mentioned it earlier:

Column alignment

Row alignment

1. SpaceBetween:

• In a Row, this option aligns the elements horizontally and places equal space between them. It pushes the first element to the start edge of the Row, the last element to the end edge, and distributes the remaining space evenly between the elements.
• In a Column, it aligns the elements vertically and places equal space between them.

2. SpaceEvenly:

• This arrangement option also ensures that space is distributed evenly between the elements, both horizontally and vertically, similar to SpaceBetween.
• However, unlike SpaceBetween, SpaceEvenly adds equal spacing to the start and end edges of the layout, resulting in a consistent margin around the entire layout.

3. SpaceAround:

• SpaceAround adds space evenly around each element, as well as at the start and end of the layout.
• In a Row, it places equal space between elements and ensures there's space at the start and end.
• In a Column, it aligns elements vertically with equal spacing and adds space above the first element and below the last element.

4. Center:

• When using Center, the elements are aligned so that they are centered both horizontally and vertically in the layout.
• In a Row, elements are centered horizontally with equal space at the start and end.
• In a Column, elements are centered vertically with equal space above and below.

5. Start:

• Start aligns elements to the start edge of the layout, either horizontally in a Row or vertically in a Column.
• In a Row, it pushes elements to the start edge with no extra space at the start.
• In a Column, it aligns elements to the top with no extra space at the top.

6. End:

• End aligns elements to the end edge of the layout, either horizontally in a Row or vertically in a Column.
• In a Row, it pushes elements to the end edge with no extra space at the end.
• In a Column, it aligns elements to the bottom with no extra space at the bottom.

Let’s deep dive into columns

To fully understand the capabilities of a Column, let's peek into its signature:

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

The available parameters are similar to Row, but you adjust them to work with vertical arrangements. Vertical arrangements include options like Top, CenterVertically, and Bottom

Conclusion

In this article, you’ve learned how to harness the power of layouts in Jetpack Compose. Layouts are the foundation for organizing and positioning your UI elements. By utilizing the right layout and customizing its parameters, you can create visually appealing and functional interfaces.

We will deep dive into Box,Surface and Scaffold in the next article.

I appreciate you taking the time to read this. If you found it helpful, please consider giving it a thumbs-up and following me.

LinkedIn:

https://www.linkedin.com/in/esther-carrelle-rangira/

Github:

esthcarelle - Overview

If you want to read more about this, here is a link to the official android documentation:

Layouts in Compose | Jetpack Compose | Android Developers