07 Compose - Layout – Column + Row + Spacer
Tags: compose, kotlin, jetpack, android
Published: 2021-05-08 10:58:11

#Introduction:
We will talk about Column and Row and Spacer today.
#Column:
```kotlin
@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.
```kotlin
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))
    }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5hl4spl397m1av28qhu.png)
 
##horizontalAlignment:
The horizontalAlignment can be:
```kotlin
horizontalAlignment = Alignment.Start,
```
Or
```kotlin
horizontalAlignment = Alignment.CenterHorizontally,
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7uogx8k0k483k1kpd1c.png)
 
Or
```kotlin
horizontalAlignment = Alignment.End,
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nhfnd49cj32g3eglt0a.png)
 
##verticalArrangement:
The verticalArrangement can be:
```kotlin
verticalArrangement = Arrangement.Top,
```
Or
```kotlin
verticalArrangement = Arrangement.Center,
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c63r6mw517c6dneb1pbp.png)
 
Or 
```kotlin
verticalArrangement = Arrangement.Bottom,
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ri8ztzxpaht9y24fb71.png)
 
Or
```kotlin
verticalArrangement = Arrangement.SpaceBetween,
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1q9c17jyd7onyrfi4soi.png)
 
Or
```kotlin
verticalArrangement = Arrangement.SpaceAround,
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gd4pcqb7jg6miunktifl.png)
 
Or
```kotlin
verticalArrangement = Arrangement.SpaceEvenly,
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5efbdsh3gyl2hf02npp1.png)
 
Finally, most or may be even all of Modifier Function apply to Column and Row and all Composable.
#Row:
```kotlin
@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.
```kotlin
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))
    }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/343wpii3g8nc3r8ysk5f.png)
 
#Spacer:
```kotlin
@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.
```kotlin
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))
    }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezncmt1njtae0b7lkt9h.png) 


#Finally:
Next class we will talk about some most used Composable that follow Google material design.
See you :smile:

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


*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](https://dev.to/one_past_last_jedi/jetpack-compose-001-table-of-contents-2711)



[**Previous Class**]( https://dev.to/one_past_last_jedi/06-compose-layout-modifier-functions-2-51ep)
	
[**Next Class**]()