Row and Column in Jetpack Compose

What is Row?

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

What is 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 .

Welcome to 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


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 , , SpaceAround, , and .

Row


@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

Coding Bihar

Stay ahead with the latest tools, trends, and best practices in Android development

Row and Column in Jetpack Compose