How to create Column Layout with Jetpack Compose?

Last updated Sep 02, 2021

In this Jetpack compose tutorial we will learn How to create Column Layout in Android application using Jetpack Compose.

In general Column will arrange the child items one by one as vertical way. each child resides below the previous children. this column component is similat to Linear Layout with vertical orientation.

Jetpack Compose Column Layout Example

Let's get started

Step 1: Create android application in android studio

Step 2: Follow step for setup Jetpack Compose with Android Studio

Jetpack Compose Column Layout example

Column(content = {
Box(
modifier = Modifier
    .background(color = Color.Green)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Black)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Blue)
    .height(100.dp)
    .width(50.dp)
)
}, modifier = Modifier.fillMaxHeight().
background(Color.Gray))

Arrangement Center

This center property arrange the children to the middle of the main axis

Column(content = {
Box(
modifier = Modifier
    .background(color = Color.Green)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Black)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Blue)
    .height(100.dp)
    .width(50.dp)
)
}, verticalArrangement = Arrangement.Center,
modifier = Modifier.fillMaxHeight().
background(Color.Gray))

Jetpack Compose Column layout example

Arrangement Space Evenly

This Property arrange the children with spaced evenly across the main axis, add free space before the first child and after the last child.

Column(
content = {
Box(
modifier = Modifier
    .background(color = Color.Green)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Black)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Blue)
    .height(100.dp)
    .width(50.dp)
)
},
verticalArrangement = Arrangement.SpaceEvenly,
modifier = Modifier
    .fillMaxHeight()
.background(Color.Gray)
)

Jetpack Compose Column layout example

Arrangement Space Between

This property will arrange the children in away that they are spaced evenly across the main axis, without free space before the first child or after the last child.

Column(
content = {
Box(
modifier = Modifier
    .background(color = Color.Green)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Black)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Blue)
    .height(100.dp)
    .width(50.dp)
)
},
verticalArrangement = Arrangement.SpaceBetween,
modifier = Modifier
    .fillMaxHeight()
)

Jetpack Compose Column layout example

Arrangement Space Around

This property arrange the children in away that spaced evenly across the main axis,

Column(
content = {
Box(
modifier = Modifier
    .background(color = Color.Green)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Black)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Blue)
    .height(100.dp)
    .width(50.dp)
)
},
verticalArrangement = Arrangement.SpaceAround,
modifier = Modifier
    .fillMaxHeight()
.background(Color.Gray)
)




Arrangement Bottom

Column(
content = {
Box(
modifier = Modifier
    .background(color = Color.Green)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Black)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Blue)
    .height(100.dp)
    .width(50.dp)
)
},
verticalArrangement = Arrangement.Bottom,
modifier = Modifier
    .fillMaxHeight()
)

Jetpack Compose Column layout example



Arrangement Top

Column(
content = {
Box(
modifier = Modifier
    .background(color = Color.Green)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Black)
    .height(100.dp)
    .width(50.dp)
)
Box(
modifier = Modifier
    .background(color = Color.Blue)
    .height(100.dp)
    .width(50.dp)
)
},
verticalArrangement = Arrangement.Top,
modifier = Modifier
    .fillMaxHeight()
)

Jetpack Compose Column layout example

Complete code

package com.example.jetpack

import android.os.Bundle
import android.view.WindowManager
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.jetpack.ui.theme.JetPackTheme

class MainActivity : ComponentActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
    setContent {
      MaterialTheme {
        // A surface container using the 'background' color from the theme
        Surface(color = MaterialTheme.colors.background) {
          ColumnLayoutDemo()
        }
      }
    }
  }
}

@Composable
fun ColumnLayoutDemo() {
  Row(modifier = Modifier.fillMaxSize()) {

    Column(
        content = {
          Box(
              modifier = Modifier
                  .background(color = Color.Green)
                  .height(100.dp)
                  .width(50.dp)
          )
          Box(
              modifier = Modifier
                  .background(color = Color.Black)
                  .height(100.dp)
                  .width(50.dp)
          )
          Box(
              modifier = Modifier
                  .background(color = Color.Blue)
                  .height(100.dp)
                  .width(50.dp)
          )
        },
        verticalArrangement = Arrangement.Center,
        modifier = Modifier
            .fillMaxHeight()
            .background(Color.White)
    )



    Column(
        content = {
          Box(
              modifier = Modifier
                  .background(color = Color.Green)
                  .height(100.dp)
                  .width(50.dp)
          )
          Box(
              modifier = Modifier
                  .background(color = Color.Black)
                  .height(100.dp)
                  .width(50.dp)
          )
          Box(
              modifier = Modifier
                  .background(color = Color.Blue)
                  .height(100.dp)
                  .width(50.dp)
          )
        },
        verticalArrangement = Arrangement.SpaceEvenly,
        modifier = Modifier
            .fillMaxHeight()
            .background(Color.Gray)
    )

    Column(
        content = {
          Box(
              modifier = Modifier
                  .background(color = Color.Green)
                  .height(100.dp)
                  .width(50.dp)
          )
          Box(
              modifier = Modifier
                  .background(color = Color.Black)
                  .height(100.dp)
                  .width(50.dp)
          )
          Box(
              modifier = Modifier
                  .background(color = Color.Blue)
                  .height(100.dp)
                  .width(50.dp)
          )
        },
        verticalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier
            .fillMaxHeight()
    )
    Column(
        content = {
          Box(
              modifier = Modifier
                  .background(color = Color.Green)
                  .height(100.dp)
                  .width(50.dp)
          )
          Box(
              modifier = Modifier
                  .background(color = Color.Black)
                  .height(100.dp)
                  .width(50.dp)
          )
          Box(
              modifier = Modifier
                  .background(color = Color.Blue)
                  .height(100.dp)
                  .width(50.dp)
          )
        },
        verticalArrangement = Arrangement.SpaceAround,
        modifier = Modifier
            .fillMaxHeight()
            .background(Color.Gray)
    )
    Column(
        content = {
          Box(
              modifier = Modifier
                  .background(color = Color.Green)
                  .height(100.dp)
                  .width(50.dp)
          )
          Box(
              modifier = Modifier
                  .background(color = Color.Black)
                  .height(100.dp)
                  .width(50.dp)
          )
          Box(
              modifier = Modifier
                  .background(color = Color.Blue)
                  .height(100.dp)
                  .width(50.dp)
          )
        },
        verticalArrangement = Arrangement.Bottom,
        modifier = Modifier
            .fillMaxHeight()
    )
    Column(
        content = {
          Box(
              modifier = Modifier
                  .background(color = Color.Green)
                  .height(100.dp)
                  .width(50.dp)
          )
          Box(
              modifier = Modifier
                  .background(color = Color.Black)
                  .height(100.dp)
                  .width(50.dp)
          )
          Box(
              modifier = Modifier
                  .background(color = Color.Blue)
                  .height(100.dp)
                  .width(50.dp)
          )
        },
        verticalArrangement = Arrangement.Top,
        modifier = Modifier
            .fillMaxHeight()
    )

  }
}

Conclusion: This Compose Tutorial we learned how to create Column layout in different ways by applying the child item position like arrange vertically top, bottom, center...

Article Contributed By :

1360 Views