Spacer composable in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Spacer composable behavior in a Row

What will be the visual result of this code snippet in a Row layout?

Row {
  Text("Start")
  Spacer(modifier = Modifier.width(16.dp))
  Text("End")
}

Android Kotlin

Row {
  Text("Start")
  Spacer(modifier = Modifier.width(16.dp))
  Text("End")
}

A Two texts with 16.dp space between them horizontally

B Two texts stacked vertically with 16.dp space

C Texts overlap with no space between

D Only the first text is visible

💡 Hint

Remember Spacer adds empty space in the direction of the layout.

In a Row, Spacer with width(16.dp) adds horizontal space between the two Text composables.

❓ ui_behavior

intermediate

Spacer usage in Column with height modifier

What happens when you use Spacer with Modifier.height(24.dp) inside a Column?

Column {
  Text("Top")
  Spacer(modifier = Modifier.height(24.dp))
  Text("Bottom")
}

Android Kotlin

Column {
  Text("Top")
  Spacer(modifier = Modifier.height(24.dp))
  Text("Bottom")
}

A No space is added, texts are adjacent

B Spacer causes a crash due to missing width

C Adds horizontal space of 24.dp between the two Text composables

D Adds vertical space of 24.dp between the two Text composables

💡 Hint

Column arranges children vertically; height modifier affects vertical space.

Spacer with height(24.dp) adds vertical empty space between "Top" and "Bottom" texts in a Column.

❓ lifecycle

advanced

Spacer composable with fillMaxSize modifier

What is the effect of using Spacer with Modifier.fillMaxSize() inside a Box?

Box(modifier = Modifier.size(100.dp)) {
  Spacer(modifier = Modifier.fillMaxSize())
  Text("Hello")
}

Android Kotlin

Box(modifier = Modifier.size(100.dp)) {
  Spacer(modifier = Modifier.fillMaxSize())
  Text("Hello")
}

A Spacer pushes Text outside the Box bounds

B Spacer is invisible and does not affect layout

C Spacer fills the entire Box, Text is drawn on top

D App crashes due to conflicting modifiers

💡 Hint

fillMaxSize makes Spacer fill all available space inside its parent.

Spacer fills the 100.dp Box fully, but since Text is drawn after Spacer, it appears on top.

📝 Syntax

advanced

Correct syntax for Spacer with padding and size

Which option correctly creates a Spacer with 8.dp padding and 40.dp width and height?

A Spacer(modifier = Modifier.padding(8.dp).size(40.dp))

B Spacer(modifier = Modifier.size(40.dp).padding(8.dp))

C Spacer(modifier = Modifier.size(40.dp, 40.dp).padding(8.dp))

D Spacer(modifier = Modifier.padding(8).size(40))

💡 Hint

Use dp units and chain modifiers correctly.

Modifier.padding and Modifier.size require dp units and can be chained; order matters for padding outside size.

🔧 Debug

expert

Why does this Spacer not add space in a Row?

Given this code, why is there no visible space between the Text composables?

Row {
  Text("Left")
  Spacer(modifier = Modifier.height(16.dp))
  Text("Right")
}

Android Kotlin

Row {
  Text("Left")
  Spacer(modifier = Modifier.height(16.dp))
  Text("Right")
}

A Spacer requires a weight modifier to add space

B Spacer uses height modifier in a horizontal Row, so no horizontal space is added

C Text composables ignore Spacer by default

D Spacer must be placed outside the Row to work

💡 Hint

Consider the layout direction and which dimension the Spacer affects.

In a Row, horizontal space is controlled by width; height modifier on Spacer does not add horizontal space.