Modifier basics (padding, size, clickable) in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visible size of the Box?

Consider this Jetpack Compose code snippet. What will be the size of the blue Box on the screen?

Android Kotlin

Box(
  modifier = Modifier
    .size(100.dp)
    .padding(20.dp)
    .background(Color.Blue)
)

A 80.dp by 80.dp visible blue area after padding

B 120.dp by 120.dp because padding adds outside size

C 100.dp by 100.dp including padding

D 60.dp by 60.dp visible blue area after padding

💡 Hint

Padding reduces the space available inside the size modifier.

The size modifier sets the total size to 100.dp. Padding of 20.dp on all sides adds space outside the size, so the total size becomes 140.dp by 140.dp. The blue background is applied after padding, so the visible blue box is 100.dp by 100.dp.

❓ ui_behavior

intermediate

What happens when you tap the Text?

Given this code, what will happen when the user taps the Text?

Android Kotlin

Text(
  text = "Click me",
  modifier = Modifier
    .clickable { println("Tapped") }
    .padding(16.dp)
)

A Text is clickable but no padding is applied

B Text prints "Tapped" but padding is ignored

C Text is not clickable because padding disables it

D Text prints "Tapped" and has 16.dp padding around it

💡 Hint

Modifier order affects layout and interaction.

The clickable modifier makes the Text respond to taps and prints "Tapped". Padding adds space around the Text content. Both work together as expected.

❓ lifecycle

advanced

Why does the clickable modifier not respond?

This code shows a Box with clickable and padding modifiers. Why does tapping the Box not trigger the clickable action?

Android Kotlin

Box(
  modifier = Modifier
    .padding(16.dp)
    .size(100.dp)
    .clickable { println("Clicked") }
    .background(Color.Red)
)

A Clickable is applied last, so it works correctly and should respond

B Clickable must be before padding to work properly

C Clickable is after size, so it applies to a smaller area and misses taps

D Clickable is after size and background, so it is overridden and disabled

💡 Hint

Modifier order affects layout and interaction area.

Clickable is applied last, so it covers the entire Box area including padding and size. The tap should be detected and print "Clicked".

📝 Syntax

advanced

Which code snippet correctly applies padding and clickable modifiers?

Select the code snippet that correctly applies 12.dp padding and makes the Text clickable.

A Text("Hello", modifier = Modifier.clickable { }.padding(12.dp))

B Text("Hello", modifier = Modifier.padding(12.dp).clickable { })

C Text("Hello", modifier = Modifier.padding(12.dp, clickable { }))

D Text("Hello", modifier = Modifier.clickable { } padding(12.dp))

💡 Hint

Modifiers are chained with dots and parentheses.

Option B correctly chains padding and clickable modifiers. Option B applies clickable first, which is valid but changes hit area. Options C and D have syntax errors.

🔧 Debug

expert

Why does this Box not respond to clicks?

This Box has clickable and background modifiers. Why does tapping it not print "Box clicked"?

Android Kotlin

Box(
  modifier = Modifier
    .background(Color.Green)
    .size(80.dp)
    .clickable { println("Box clicked") }
)

A Clickable must be before size to work

B Background does not consume clicks, so clickable should work; issue is elsewhere

C Clickable is applied last, so it should work and print the message

D Background is applied before clickable, so clickable is blocked by background

💡 Hint

Background modifier does not block clicks by itself.

Background does not block clicks. Clickable is last, so it covers the full Box area and should respond. If clicks are not detected, the problem is likely outside this code snippet.