Column and Row layouts in Android Kotlin - Mini App: Build & Ship

Build: ColumnRowLayoutScreen

This screen shows a simple layout using Column and Row to arrange text and buttons vertically and horizontally.

Target UI

-------------------------
|       ColumnRowLayout  |
|-----------------------|
| Text 1                |
| Text 2                |
|-----------------------|
| [Button 1] [Button 2] |
|-----------------------|

Use a Column to arrange two TextViews vertically at the top.

Below the texts, use a Row to arrange two Buttons horizontally with some spacing.

Center the whole layout vertically and horizontally on the screen.

Add padding around the content.

Starter Code

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
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

class ColumnRowLayoutScreen : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // TODO: Add your layout here
        }
    }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
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

class ColumnRowLayoutScreen : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "Text 1")
                Spacer(modifier = Modifier.height(8.dp))
                Text(text = "Text 2")
                Spacer(modifier = Modifier.height(24.dp))
                Row(
                    horizontalArrangement = Arrangement.spacedBy(16.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Button(onClick = {}) {
                        Text(text = "Button 1")
                    }
                    Button(onClick = {}) {
                        Text(text = "Button 2")
                    }
                }
            }
        }
    }
}

We use a Column to stack two Text elements vertically. We center the whole column in the screen using fillMaxSize() with verticalArrangement = Arrangement.Center and horizontalAlignment = Alignment.CenterHorizontally. Padding adds space around the content.

Between the texts and buttons, Spacer adds vertical space.

The Row arranges two buttons horizontally with space between them using horizontalArrangement = Arrangement.spacedBy(16.dp). Buttons have empty click handlers for now.

Final Result

Completed Screen

-------------------------
|       ColumnRowLayout  |
|-----------------------|
|        Text 1         |
|        Text 2         |
|                       |
|  [Button 1] [Button 2]|
|-----------------------|

Buttons can be tapped but do nothing currently.

Stretch Goal

Add a third button below the row that spans the full width with label 'Button 3'.

💡 Hint

Add another Button inside the Column below the Row with Modifier.fillMaxWidth() and some top padding.