Row and Column in Jetpack Compose

Row and Column in Jetpack Compose

What is Row?

Row is a composable layout in Jetpack Compose. Row arranges its composable children  in a horizontally. We can also apply scrollable behavior if screen is not enough to show all composable components inside a row.

What is Column?

Column is a composable layout in Jetpack Compose. Column arranges its composable children  in a vertically. We can also apply scrollable behavior if screen is not enough to show all composable components inside a row. It is used to show items in list view.

Welcome to codingbihar.com Today we will learn to create an app in which we will arrange composable components in a column and row. 

If items are larger than screen we can apply scrolling behaviour by using Modifier.horizontalScroll(rememberScrollState()

Click to learn more about Layout in Jetpack Compose

Here is the simple code for column and row:

Column

Copy this code →

package com.example.jetpackcomposeskcoding

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun ComposeLayout() {
        Column (
        Modifier.verticalScroll(rememberScrollState()).fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceAround){
            Box(Modifier.size(120.dp).background(Color.Yellow))
            Box(Modifier.size(120.dp).background(Color.Magenta))
            Box(Modifier.size(120.dp).background(Color.Red))
            Box(Modifier.size(120.dp).background(Color.Green))
            Box(Modifier.size(120.dp).background(Color.Blue))
            Box(Modifier.size(120.dp).background(Color.Cyan))
            Box(Modifier.size(120.dp).background(Color.Yellow))
            Box(Modifier.size(120.dp).background(Color.Magenta))
            Box(Modifier.size(120.dp).background(Color.Red))
            Box(Modifier.size(120.dp).background(Color.Green))
            Box(Modifier.size(120.dp).background(Color.Blue))
            Box(Modifier.size(120.dp).background(Color.Cyan))

    }
}

As column arrange its children vertically, so we can arrange the items using verticalArrangement as SpaceEvenly, SpaceBetween, SpaceAround, Center, Top and Bottom.

Row

Copy this code →

@Composable
fun ComposeLayout() {
    Row {
        Text(text = "Row Item One")
        Text(text = "Row Item Tow")
        Text(text = "Row Item Three")
        Text(text = "Row Item Four")
        Text(text = "Row Item Five")
        Text(text = "Row Item One")
        Text(text = "Row Item Tow")
        Text(text = "Row Item Three")
        Text(text = "Row Item Four")
        Text(text = "Row Item Five")
    }
}

Click here to learn how to create Navigation Drawer in Jetpack Compose

As Row arrange its children horizontally, so we can arrange the items same as column using horizontalArrangement as SpaceEvenly, SpaceBetween, SpaceAround, Center, Top and Bottom.

Output: Row

Output:Column