Layout Composable Widgets

What's Layouts in Android?

It provides an invisible container to hold the views or layouts. We can place a group of views/layouts inside the layouts. Row and column are layouts to arrange our views in Linear manner.

What's Linear manner?

A Linear manner means one element per line. In this manner, arrange the elements one to another in the same order either horizontally or vertically.

Row - It arranges the views horizontally.

Column - It arranges the views vertically.

Row()

A Row will show each child next to the previous children. It's like a LinearLayout with a horizontal orientation.


@Composable
fun SimpleRow(){
    Row {
        Text(text = "Row Text 1",Modifier.background(Color.Red))
        Text(text = "Row Text 2",Modifier.background(Color.White))
        Text(text = "Row Text 3",Modifier.background(Color.Green))
    }
}

Column()

A Column will show each child below the previous children. It's like a LinearLayout with vertical orientation.


@Composable
fun SimpleColumn(){
    Column {
        Text(text = "Column Text 1",
Modifier.background(Color.Red))
        Text(text = "Column Text 2", Modifier.background(Color.White))
        Text(text = "Column Text 3", Modifier.background(Color.Green))
    }
}

I place these composable inside the column with labels. Full source code link available at the end of this tutorial.

Output of both Row and Column:

Alignment

There are nine alignment options that can apply to child UI elements:

Arrangement

We also have three arrangements that can be applied as vertical and horizontal arrangements:

SpaceEvenly

SpaceBetween

SpaceAround

The SpaceEvenly arrangement places child elements across the main axis, including free space before the first and after the last child.

The SpaceBetween arrangement places child elements across the main axis without free space before first and after the last child.

The SpaceAround arrangement places child elements across the main axis with half of the free space before the first and after the last child.

Row Arrangement and Alignment


@Composable
fun RowArrangement(){
    Row(modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.Top,
        horizontalArrangement  =  Arrangement.SpaceEvenly) {        Text(text = " Text 1")
        Text(text = " Text 2")
        Text(text = " Text 3")
    }
}

Column Arrangement and Alignment


@Composable
fun ColumnArrangement(){
    Column(modifier = Modifier.fillMaxHeight().fillMaxWidth(),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment  =  Alignment.End
    ) {        Text(text = "Text 1",Modifier.background(Color.Red))
        Text(text = "Text 2",Modifier.background(Color.White))
        Text(text = "Text 3",Modifier.background(Color.Green))
    }
}

Output

Box( )

Box is Similar to Frame Layout which we have in our traditional view system.

In Box we can add multiple composable and each composable will be stack on top of each Other.


Box(modifier = Modifier
							.background(Color.Blue)
							.width(100.dp)
							.height(100.dp)
							.verticalScroll(rememberScrollState()),
		contentAlignment = Alignment.Center)
{
			
			Text(text = "I Love Android" , fontSize = 20.sp)
			
}