How to Use Column in Jetpack Compose for Android Layouts

In Jetpack Compose, use the Column composable to arrange child components vertically. You place UI elements inside Column { ... }, and it stacks them from top to bottom by default.

Syntax

The Column composable arranges its children vertically. You can customize its behavior with parameters like modifier, verticalArrangement, and horizontalAlignment.

• modifier: Adjusts layout or appearance (e.g., padding, size).
• verticalArrangement: Controls spacing between children vertically.
• horizontalAlignment: Aligns children horizontally inside the column.

kotlin

Column(
  modifier = Modifier.fillMaxWidth().padding(16.dp),
  verticalArrangement = Arrangement.spacedBy(8.dp),
  horizontalAlignment = Alignment.CenterHorizontally
) {
  // Child composables here
}

Output

A vertical stack of UI elements spaced by 8.dp, centered horizontally with padding around.

Example

This example shows a simple vertical list of texts arranged using Column. Each text is spaced evenly and centered horizontally.

kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun GreetingColumn() {
  Column(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(12.dp),
    horizontalAlignment = Alignment.CenterHorizontally
  ) {
    Text(text = "Hello")
    Text(text = "Welcome to Jetpack Compose")
    Text(text = "This is a Column example")
  }
}

Output

Three text lines stacked vertically, spaced by 12.dp, centered horizontally with padding.

Common Pitfalls

Common mistakes when using Column include:

• Not setting Modifier.fillMaxWidth() or size, causing children to be constrained unexpectedly.
• Forgetting to add spacing, making children appear cramped.
• Misusing horizontalAlignment which only affects children inside the column, not the column itself.

kotlin

/* Wrong: No modifier, children may not fill width */
Column {
  Text("Item 1")
  Text("Item 2")
}

/* Right: Fill width and add spacing */
Column(
  modifier = Modifier.fillMaxWidth(),
  verticalArrangement = Arrangement.spacedBy(8.dp)
) {
  Text("Item 1")
  Text("Item 2")
}

Output

Wrong: Texts may be left-aligned and cramped. Right: Texts fill width and have space between.

Quick Reference

Parameter	Description	Example Value
modifier	Adjust layout size, padding, etc.	Modifier.fillMaxWidth().padding(16.dp)
verticalArrangement	Space between children vertically	Arrangement.spacedBy(8.dp)
horizontalAlignment	Align children horizontally	Alignment.CenterHorizontally

Key Takeaways

Use Column to stack UI elements vertically in Jetpack Compose.

Apply Modifier to control size and padding for proper layout.

Use verticalArrangement to add space between children.

Use horizontalAlignment to align children horizontally inside the column.

Avoid missing modifiers to prevent cramped or misaligned layouts.