Jetpack Compose Row Layout: Arrangements and Alignments Simplified

Jetpack Compose - Row Layout

Jetpack Compose makes UI development intuitive and flexible, and the Row layout is a fundamental building block for horizontally stacking elements. 

This tutorial explores how to configure horizontal arrangements and vertical alignments in a Row layout, with a practical example to help you master these concepts.

Arrangements and Alignments in a Row

When using the Row layout, you can position its child elements using two key parameters:

• horizontalArrangement: Controls how elements are spaced horizontally within the Row.
• verticalAlignment: Aligns elements vertically within the Row.

Horizontal Arrangements

The Row layout offers six horizontal arrangement options:

• Center: Places all elements at the center of the Row.
• Start: Aligns elements to the start (left) of the Row.
• End: Aligns elements to the end (right) of the Row.
• SpaceEvenly: Distributes equal space between elements, including the start and end edges.
• SpaceAround: Places equal space around each element, with half-space at the edges.
• SpaceBetween: Distributes equal space between elements, with no space at the edges.

Vertical Alignments

The Row layout supports three vertical alignment options:

• CenterVertically: Aligns elements vertically to the center of the Row.
• Top: Aligns elements to the top of the Row.
• Bottom: Aligns elements to the bottom of the Row.

Combining Arrangements and Alignments

You can use both horizontalArrangement and verticalAlignment together to create layouts with precise positioning. Here's an example demonstrating how to combine these properties.

Horizontal Arrangements.

There are 6 horizontal arrangements.

• Center
• Start
• End
• SpcaeEvenly
• SpaceAround
• SpaceBetween

Vertical Alignments

There are 3 vertical alignments.

• CenterVertical
• Top
• Bottom

Combining arrangements and alignments.

we are going to use both arrangement and alignment together.

package com.compose.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.compose.example.ui.theme.ComposeExampleTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeExampleTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainContent()
                }
            }
        }
    }
}



@Composable
fun MainContent() {
    Text(
        text = "Combining arrangements and alignments.",
    Modifier.padding(10.dp),
        fontWeight = FontWeight.SemiBold)
    
    Row(
        modifier = Modifier
            .padding(30.dp)
            .fillMaxSize(),
        horizontalArrangement = Arrangement.SpaceAround,
        verticalAlignment = Alignment.Bottom
        ) {
        ButtonDesign("A")
        ButtonDesign("B")
        ButtonDesign("C")
    }
}
@Composable
fun ButtonDesign(name: String) {
    OutlinedButton(onClick = { /* Do something! */ }) { Text(name) }
}

..