Column and Row layouts in Android Kotlin

Introduction

Column and Row layouts help you arrange items vertically or horizontally on the screen. They make your app look neat and organized.

When you want to stack buttons or text one below another.

When you want to place icons or images side by side.

When you need to create a simple list or menu.

When you want to align items in a single line horizontally or vertically.

When you want to build a form with labels and input fields arranged neatly.

Syntax

Android Kotlin

Column {
    // place child views here vertically
}

Row {
    // place child views here horizontally
}

Column arranges children vertically, from top to bottom.

Row arranges children horizontally, from left to right.

Examples

This places two text items one below the other.

Android Kotlin

Column {
    Text("Hello")
    Text("World")
}

This places two buttons side by side horizontally.

Android Kotlin

Row {
    Button(onClick = {}) { Text("Yes") }
    Button(onClick = {}) { Text("No") }
}

This stacks a label and input field vertically.

Android Kotlin

Column {
    Text("Name")
    TextField(value = "", onValueChange = {})
}

Sample App

This example shows a vertical column with a title text and below it a row with two buttons spaced apart.

Android Kotlin

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

@Composable
fun ColumnRowExample() {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("Welcome to the app", style = MaterialTheme.typography.titleLarge)
        Spacer(modifier = Modifier.height(8.dp))
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            Button(onClick = {}) { Text("Accept") }
            Button(onClick = {}) { Text("Decline") }
        }
    }
}

Important Notes

Use Spacer to add space between items in Column or Row.

You can control alignment and spacing with parameters like horizontalArrangement and verticalArrangement.

Remember to add padding around your layouts for better look and touch comfort.

Summary

Column arranges items vertically.

Row arranges items horizontally.

Use these layouts to organize your app's UI simply and clearly.