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.

Practice

1. What does the padding modifier do in Jetpack Compose?

easy

A. Changes the background color of a UI element

B. Makes a UI element respond to clicks

C. Adds space around the content inside a UI element

D. Sets the width and height of a UI element

Solution

1. Step 1: Understand the role of padding

   Padding adds empty space inside the element boundary but outside its content.

2. Step 2: Compare with other modifiers

   Size sets dimensions, clickable adds tap response, background changes color, so padding is about spacing.

3. Final Answer:

   Adds space around the content inside a UI element -> Option C

4. Quick Check:

   Padding = space around content [OK]

Hint: Padding always adds space inside element edges [OK]

Common Mistakes:

• Confusing padding with margin (margin is outside element)
• Thinking padding changes size directly
• Mixing padding with clickable behavior

2. Which of the following is the correct syntax to add 16.dp padding to a Text composable?

easy

A. Text("Hello", Modifier.padding(16.dp))

B. Text("Hello", Modifier.padding(16))

C. Text("Hello", Modifier.padding(16.px))

D. Text("Hello", Modifier.padding(16.dp, 16.dp, 16.dp))

Solution

1. Step 1: Recognize correct unit usage

   In Jetpack Compose, padding requires a Dp value, so 16.dp is correct.

2. Step 2: Check syntax correctness

   Text("Hello", Modifier.padding(16)) misses the .dp unit, C uses .px which is invalid, D tries to pass three parameters which is not the standard padding call.

3. Final Answer:

   Text("Hello", Modifier.padding(16.dp)) -> Option A

4. Quick Check:

   Use .dp for dimension units [OK]

Hint: Use .dp suffix for padding values in Compose [OK]

Common Mistakes:

• Omitting .dp unit causing type errors
• Using .px which is not valid in Compose
• Passing multiple parameters incorrectly

3. What will happen when this code runs?

Box(
  Modifier.size(100.dp).padding(20.dp).clickable { /* do something */ }
) {
  Text("Click me")
}

medium

A. Box is 100x100 dp with 20 dp padding inside and responds to clicks

B. Box is 140x140 dp because padding adds outside size

C. Box is 100x100 dp but padding disables clickable

D. Box ignores padding and clickable modifiers

Solution

1. Step 1: Understand modifier order and effects

   Size sets the Box to 100x100 dp. Padding adds space inside the Box boundary, reducing content area but not increasing Box size.

2. Step 2: Check clickable behavior

   Clickable modifier makes the Box respond to taps; it is not disabled by padding.

3. Final Answer:

   Box is 100x100 dp with 20 dp padding inside and responds to clicks -> Option A

4. Quick Check:

   Size fixes size, padding adds inner space, clickable enables taps [OK]

Hint: Padding adds space inside size, clickable always works [OK]

Common Mistakes:

• Thinking padding increases total size
• Assuming padding disables clickable
• Ignoring modifier order effects

4. Identify the error in this code snippet:

Text(
  "Tap me",
  Modifier.clickable { println("Clicked") }.padding(10.dp)
)

medium

A. Text composable cannot have clickable modifier

B. Clickable modifier must be last to work properly

C. Missing .dp unit in padding

D. Padding should come before clickable to make padding area clickable

Solution

1. Step 1: Understand modifier order impact

   Clickable only applies to the area defined by previous modifiers. Padding after clickable means padding area is not clickable.

2. Step 2: Correct modifier order

   Placing padding before clickable makes the entire padded area respond to clicks.

3. Final Answer:

   Padding should come before clickable to make padding area clickable -> Option D

4. Quick Check:

   Modifier order affects clickable area [OK]

Hint: Put padding before clickable to include padding in tap area [OK]

Common Mistakes:

• Assuming clickable works regardless of modifier order
• Thinking clickable must be last always
• Confusing padding units

5. You want a Button with a fixed size of 150x50 dp, 12 dp padding inside, and it should respond to clicks on the entire visible area including padding. Which modifier chain is correct?

hard

A. Modifier.padding(12.dp).size(150.dp, 50.dp).clickable { /* action */ }

B. Modifier.size(150.dp, 50.dp).padding(12.dp).clickable { /* action */ }

C. Modifier.clickable { /* action */ }.size(150.dp, 50.dp).padding(12.dp)

D. Modifier.clickable { /* action */ }.padding(12.dp).size(150.dp, 50.dp)

Solution

1. Step 1: Ensure size sets total dimensions

   Size should come before padding to fix the total size, with padding inside that size.

2. Step 2: Place clickable last to cover entire area

   Clickable should be last so it applies to the full size including padding.

3. Step 3: Analyze options

   Modifier.size(150.dp, 50.dp).padding(12.dp).clickable { /* action */ } sets size first, then padding inside that size, then clickable covers all.

4. Final Answer:

   Modifier.size(150.dp, 50.dp).padding(12.dp).clickable { /* action */ } -> Option B

5. Quick Check:

   Size before padding, clickable last for full tap area [OK]

Hint: Put size before padding, clickable last for full clickable area [OK]

Common Mistakes:

• Putting size after padding causing size to include padding and grow
• Clickable before padding excludes padding from tap area
• Confusing order of modifiers