07 Compose - Layout – Column + Row + Spacer

Introduction:

We will talk about Column and Row and Spacer today.

Column:

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

A layout composable that places its children in a vertical sequence.

Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.Top,        
          )
    {
        Box(Modifier.size(100.dp).background(Color.Magenta))
        Box(Modifier.size(100.dp).background(Color.Yellow))
        Box(Modifier.size(100.dp).background(Color.Green))
    }

horizontalAlignment:

The horizontalAlignment can be:

horizontalAlignment = Alignment.Start,

Or

horizontalAlignment = Alignment.CenterHorizontally,

Or

horizontalAlignment = Alignment.End,

verticalArrangement:

The verticalArrangement can be:

verticalArrangement = Arrangement.Top,

Or

verticalArrangement = Arrangement.Center,

Or

verticalArrangement = Arrangement.Bottom,

Or

verticalArrangement = Arrangement.SpaceBetween,

Or

verticalArrangement = Arrangement.SpaceAround,

Or

verticalArrangement = Arrangement.SpaceEvenly,

Finally, most or may be even all of Modifier Function apply to Column and Row and all Composable.

Row:

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

A layout composable that places its children in a horizontal sequence. It is the same as Column except everything is the opposite and horizontal.

Row(
        modifier = Modifier.fillMaxSize(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween,
          )
    {
        Box(Modifier.size(100.dp).background(Color.Magenta))
        Box(Modifier.size(100.dp).background(Color.Yellow))
        Box(Modifier.size(100.dp).background(Color.Green))
    }

Spacer:

@Composable
fun Spacer(modifier: Modifier): @Composable Unit

Component that represents an empty space layout, whose size can be defined using Modifier.width, Modifier.height, Modifier.size and Modifier.weight modifiers.

Column {
        Box(Modifier.size(100.dp).background(Color.Red))
        Spacer(Modifier.weight(2f))
        Box(Modifier.size(100.dp).background(Color.Magenta))
        Spacer(Modifier.weight(1f))
        Box(Modifier.size(100.dp).background(Color.Green))
    }

Finally:

Next class we will talk about some most used Composable that follow Google material design.
See you 😄

================================================

You can join us in the discord server
https://discord.gg/TWnnBmS
and ask me any questions in (#kotlin-and-compose) channel.

Table of Contents

Previous Class

Next Class