Spacer composable in Android Kotlin - Mini App: Build & Ship

Build: Spacer Demo Screen

This screen demonstrates how to use Spacer composable to add space between UI elements in a vertical column layout.

Target UI

Column Layout:
[Text: "Hello"]
[Spacer]
[Text: "World"]

The Spacer creates empty space between the two Text elements.

Use a Column composable to arrange two Text composables vertically.

Place a Spacer composable between the two Text composables.

Set the Spacer height to 32.dp to create vertical space.

Center the Column content horizontally and vertically on the screen.

Starter Code

Android 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 SpacerDemoScreen() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Hello")
        // TODO: Add Spacer here with height 32.dp
        Text(text = "World")
    }
}

Task 1

Task 2

Solution

Android 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 SpacerDemoScreen() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Hello")
        Spacer(modifier = Modifier.height(32.dp))
        Text(text = "World")
    }
}

We use a Column to stack two Text elements vertically. The Spacer composable is placed between them to create empty vertical space. Setting Modifier.height(32.dp) on the Spacer adds 32 density-independent pixels of space. The Column is centered both horizontally and vertically using horizontalAlignment and verticalArrangement properties.

Final Result

Completed Screen

---------------------
|                   |
|       Hello       |
|                   |
|                   |
|                   |
|                   |
|                   |
|       World       |
|                   |
---------------------

No interactive elements on this screen.

The user sees 'Hello' text near the top center, a blank space below it, then 'World' text below the space.

Stretch Goal

Add a horizontal Spacer between two Text composables arranged in a Row.

💡 Hint

Use Row layout and Spacer with Modifier.width(16.dp) to add horizontal space.