Building Vertical Layouts with Column in Jetpack Compose

In this post, we'll explore Column, one of the fundamental layout composables in Jetpack Compose that allows you to stack UI elements vertically.

---

What is Column?

Column is a layout composable that arranges its children vertically, from top to bottom. It's the Compose equivalent of LinearLayout with orientation="vertical" in XML.

@Composable
fun ColumnExample() {
    Column {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
}

---

When to Use Column?

• To vertically stack UI elements
• To place text above a button
• To arrange forms, inputs, or vertical sections
• For most screen structures in Compose

💡 Tip: Column is often the backbone of Compose UIs.

---

Basic Anatomy of a Column

@Composable
fun BasicColumn() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Hello")
        Button(onClick = { /* Do something */ }) {
            Text("Click Me")
        }
        Text("Goodbye")
    }
}

Explanation:

• Modifier.fillMaxSize() – makes the column take all available space
• .padding(16.dp) – adds space around the content
• verticalArrangement – controls space between items
• horizontalAlignment – aligns children horizontally

---

What is Modifier in Compose?

The Modifier is used to decorate or change the layout or behavior of a composable. You can chain multiple modifiers together.

Text(
    text = "Styled Text",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

Common use cases:

• .padding() – add spacing around elements
• .background() – apply color backgrounds
• .fillMaxWidth() – make composables stretch horizontally

---

Previewing a Column

Use @Preview to preview your layout without running the app:

@Preview(showBackground = true)
@Composable
fun PreviewBasicColumn() {
    BasicColumn()
}

---

Using Column in MainActivity

You can directly use Column inside the setContent { } block of your MainActivity.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            BasicColumn()
        }
    }
}

Alternatively, define your composables in separate files for a cleaner architecture:

// In a separate Kotlin file
@Composable
fun HelloCard() {
    Column {
        Text("Hi")
        Text("Again")
    }
}

---

Recap

• Column arranges children vertically
• Use Modifier to style and position UI
• Arrangement and Alignment control layout behavior
• @Preview is your friend for design iteration