Jetpack Compose - Row Layout

This example demonstrates how to make a Jetpack Compose Row Layout

Arrangements and Alignments 

To set positions of items within a column, we can use verticalArrangement and horizontalAlignment arguments. Similarly, to set positions within a Row, we have the horizontalArrangement and verticalAlignment arguments.

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) }
}

..