Coding Bihar

Android App Development

Coding Bihar is dedicated to providing you with the knowledge and tools you need to excel in Android development. Start your journey with us and transform your app ideas into reality with Jetpack Compose. Connect, learn, and grow with Coding Bihar today!

Row and Column in Jetpack Compose

Row and Column in Jetpack Compose - Coding Bihar
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")
    }
}
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
 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!