Spacer composable in Android Kotlin

Introduction

A Spacer composable is used to add empty space between UI elements. It helps to organize the layout and make the app look neat and easy to use.

To add space between buttons in a vertical column.

To separate text and images with some empty area.

To push elements apart in a row so they don't stick together.

To create padding or margin-like gaps inside a layout.

To balance the layout by filling extra space evenly.

Syntax

Android Kotlin

Spacer(modifier = Modifier.size(16.dp))

Use Modifier.size() to set both width and height of the Spacer.

You can also use Modifier.width() or Modifier.height() to set only one dimension.

Examples

Adds vertical space of 24 density-independent pixels.

Android Kotlin

Spacer(modifier = Modifier.height(24.dp))

Adds horizontal space of 12 density-independent pixels.

Android Kotlin

Spacer(modifier = Modifier.width(12.dp))

Adds a square space of 8x8 density-independent pixels.

Android Kotlin

Spacer(modifier = Modifier.size(8.dp))

Sample App

This example shows two text elements stacked vertically with a 20dp space between them using Spacer.

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 SpacerExample() {
  Column(modifier = Modifier.padding(16.dp)) {
    Text(text = "Hello")
    Spacer(modifier = Modifier.height(20.dp))
    Text(text = "World")
  }
}

Important Notes

Spacer does not draw anything visible; it only creates empty space.

Use Spacer inside layouts like Row, Column, or Box to control spacing.

Remember to import androidx.compose.foundation.layout.Spacer and Modifier.

Summary

Spacer adds empty space between UI elements.

Use Modifier.size(), .width(), or .height() to set space size.

It helps make layouts clean and easy to read.