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.

Practice

1. What is the main purpose of the Spacer composable in Jetpack Compose?

easy

A. To display an image

B. To create buttons

C. To handle user input

D. To add empty space between UI elements

Solution

1. Step 1: Understand Spacer's role

   The Spacer composable is designed to add empty space in layouts.

2. Step 2: Compare with other UI elements

   Unlike buttons or images, Spacer does not display content but creates gaps.

3. Final Answer:

   To add empty space between UI elements -> Option D

4. Quick Check:

   Spacer = empty space [OK]

Hint: Spacer creates gaps, not visible content [OK]

Common Mistakes:

• Thinking Spacer displays content
• Confusing Spacer with Button or Image
• Using Spacer to handle clicks

2. Which of the following is the correct way to create a Spacer with a height of 16.dp in Jetpack Compose?

easy

A. Spacer(modifier = Modifier.height(16.dp))

B. Spacer(height = 16.dp)

C. Spacer(size = 16.dp)

D. Spacer(width = 16.dp)

Solution

1. Step 1: Check Spacer syntax

   Spacer requires a Modifier to set size properties like height or width.

2. Step 2: Identify correct Modifier usage

   Using Modifier.height(16.dp) correctly sets the height of the Spacer.

3. Final Answer:

   Spacer(modifier = Modifier.height(16.dp)) -> Option A

4. Quick Check:

   Modifier.height sets Spacer height [OK]

Hint: Use Modifier.height() or Modifier.width() with Spacer [OK]

Common Mistakes:

• Passing height directly as parameter
• Using size instead of modifier
• Confusing width and height properties

3. What will be the visual result of this code snippet?

Row {
  Text("Hello")
  Spacer(modifier = Modifier.width(24.dp))
  Text("World")
}

medium

A. The texts "Hello" and "World" will be close together with no space

B. There will be a 24.dp horizontal space between "Hello" and "World"

C. The texts will be stacked vertically

D. The Spacer will cause a runtime error

Solution

1. Step 1: Understand Row layout

   Row arranges children horizontally in a line.

2. Step 2: Analyze Spacer usage

   Spacer with Modifier.width(24.dp) adds 24.dp horizontal empty space between the two Text composables.

3. Final Answer:

   There will be a 24.dp horizontal space between "Hello" and "World" -> Option B

4. Quick Check:

   Spacer width adds horizontal gap [OK]

Hint: Spacer width in Row adds horizontal space [OK]

Common Mistakes:

• Thinking Spacer stacks vertically in Row
• Expecting no space between texts
• Assuming Spacer causes error

4. Identify the error in this code snippet:

Column {
  Text("Top")
  Spacer(Modifier.size(20.dp))
  Text("Bottom")
}

medium

A. There is no syntax error; the code runs correctly

B. Spacer cannot be used inside Column

C. Spacer requires named parameter 'modifier = ' before Modifier.size()

D. Text composables must be wrapped in Box

Solution

1. Step 1: Check Spacer syntax

   Spacer accepts a single positional Modifier parameter, so Spacer(Modifier.size(20.dp)) is syntactically correct.

2. Step 2: Validate Modifier and layout

   Modifier.size(20.dp) is valid and Spacer works inside Column to occupy vertical space.

3. Final Answer:

   There is no syntax error; the code runs correctly -> Option A

4. Quick Check:

   Spacer(Modifier.size()) valid syntax [OK]

Hint: Spacer accepts positional Modifier argument [OK]

Common Mistakes:

• Thinking named 'modifier =' is required
• Believing Spacer disallowed in Column
• Misunderstanding Modifier.size()

5. You want to create a vertical layout with two buttons separated by flexible space that pushes the second button to the bottom of the screen. Which Spacer usage achieves this?

hard

A. Row(Modifier.fillMaxSize()) {
Button(onClick = {}) { Text("Top") }
Spacer(modifier = Modifier.weight(1f))
Button(onClick = {}) { Text("Bottom") }
}

B. Column(Modifier.fillMaxSize()) {
Button(onClick = {}) { Text("Top") }
Spacer(modifier = Modifier.height(50.dp))
Button(onClick = {}) { Text("Bottom") }
}

C. Column(Modifier.fillMaxSize()) {
Button(onClick = {}) { Text("Top") }
Spacer(modifier = Modifier.weight(1f))
Button(onClick = {}) { Text("Bottom") }
}

D. Column(Modifier.fillMaxSize()) {
Button(onClick = {}) { Text("Top") }
Spacer(modifier = Modifier.width(100.dp))
Button(onClick = {}) { Text("Bottom") }
}

Solution

1. Step 1: Understand layout direction

   Column arranges children vertically, so vertical spacing is needed.

2. Step 2: Use Spacer with weight for flexible space

   Modifier.weight(1f) makes Spacer fill remaining space, pushing the bottom button down.

3. Step 3: Eliminate incorrect options

   Fixed height or width spacers do not push content flexibly; Row arranges horizontally, not vertically.

4. Final Answer:

   Column(Modifier.fillMaxSize()) { Button(onClick = {}) { Text("Top") } Spacer(modifier = Modifier.weight(1f)) Button(onClick = {}) { Text("Bottom") } } -> Option C

5. Quick Check:

   Spacer with weight fills flexible space [OK]

Hint: Use Modifier.weight(1f) in Column for flexible vertical space [OK]

Common Mistakes:

• Using fixed height instead of weight
• Using Row instead of Column
• Using width modifier in vertical layout