Modifier basics (padding, size, clickable) in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add padding of 16.dp to the Text composable.

Android Kotlin

Text("Hello", modifier = Modifier.[1](16.dp))

Drag options to blanks, or click blank then click option'

Apadding

Bsize

Cclickable

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Using size instead of padding will change the composable size, not add space inside.

Using clickable won't add space, it makes the composable respond to taps.

The padding modifier adds space around the composable content.

2fill in blank

medium

Complete the code to set the size of the Button to 100.dp width and 50.dp height.

Android Kotlin

Button(onClick = {}, modifier = Modifier.[1](100.dp, 50.dp)) { Text("Click") }

Drag options to blanks, or click blank then click option'

AfillMaxWidth

Bsize

Cclickable

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding instead of size will add space but not change the composable size.

Using clickable does not affect size.

The size modifier sets the width and height of the composable.

3fill in blank

hard

Fix the error in the code to make the Text respond to clicks.

Android Kotlin

Text("Tap me", modifier = Modifier.[1] { println("Clicked") })

Drag options to blanks, or click blank then click option'

Aclickable

Bpadding

Csize

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding or size does not make the composable clickable.

Using background only changes color, not click behavior.

The clickable modifier makes the composable respond to tap events.

4fill in blank

hard

Fill both blanks to add padding of 8.dp and make the Box clickable.

Android Kotlin

Box(modifier = Modifier.[1](8.dp).[2] { println("Box clicked") }) { }

Drag options to blanks, or click blank then click option'

Apadding

Bsize

Cclickable

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the order of modifiers can cause unexpected behavior.

Using size instead of padding will change size, not add space.

First add padding, then make the Box clickable with the clickable modifier.

5fill in blank

hard

Fill all three blanks to create a Text with 12.dp padding, size 120.dp by 40.dp, and clickable behavior.

Android Kotlin

Text("Press me", modifier = Modifier.[1](12.dp).[2](120.dp, 40.dp).[3] { println("Pressed") })

Drag options to blanks, or click blank then click option'

Apadding

Bsize

Cclickable

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Changing the order of modifiers can affect the final look and behavior.

Using background instead of clickable will not respond to taps.

Use padding to add space, size to set dimensions, and clickable to handle taps.