Jetpack Compose Column Layout: Arrangements and Alignments Explained with Examples

Jetpack Compose - Column Layout

Jetpack Compose simplifies UI development by providing flexible layouts like Column. The Column layout stacks its child elements vertically and allows you to control their positions using arrangements and alignments.

In this tutorial, we will demonstrate how to use vertical arrangements and horizontal alignments in a Column layout with practical examples.

Arrangements and Alignments in a Column

To position items within a Column, you can use the following parameters:

• verticalArrangement: Determines how items are arranged vertically within the Column.
• horizontalAlignment: Aligns items horizontally within the Column.

Vertical Arrangements

There are six options for arranging items vertically in a Column:

• Center: Items are arranged in the center of the Column.
• Top: Items are aligned to the top of the Column.
• Bottom: Items are aligned to the bottom of the Column.
• SpaceEvenly: Equal space between items, including the start and end edges.
• SpaceAround: Equal space around items, including half-space at the start and end.
• SpaceBetween: Equal space between items, with no space at the start or end.

Horizontal Alignments

There are three options for aligning items horizontally in a Column:

• CenterHorizontally: Items are centered horizontally within the Column.
• Start: Items are aligned to the start (left) of the Column.
• End: Items are aligned to the end (right) of the Column.

Combining Vertical Arrangement and Horizontal Alignment

You can combine verticalArrangement and horizontalAlignment to position items precisely. The following example demonstrates how to create a Column layout with both parameters:

Vertical Arrangements.

There are 6 vertical arrangements.

• Center
• Top
• Bottom
• SpcaeEvenly
• SpaceAround
• SpaceBetween

Horizontal Alignments

There are 3 horizontal alignments.

• CenterHorizontally
• Start
• End

Here’s a practical example of a Column layout in Jetpack Compose:

Vertical Arrangement and Horizontal Alignment.

we are going to use both arrangement and alignment together.

package com.compose.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
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.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.compose.example.ui.theme.ComposeExampleTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeExampleTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainContent()
                }
            }
        }
    }
}



@Composable
fun MainContent() {

    Column(
        modifier = Modifier
            .background(color = Color.LightGray)
            .fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally

        ) {
        Greeting("A")
        Greeting("B")
        Greeting("C")

    }
}
@Composable
fun Greeting(name: String) {
    Text(
        text = "Hello $name!",
        fontSize = 32.sp,
        fontWeight = FontWeight.Bold,
        color = Color.Red,
        textAlign = TextAlign.Center,
        modifier = Modifier
            .background(color = Color.Yellow)
            .border(2.dp, color = Color.Green)
            .padding(10.dp)
    )
}

..