Card composable in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple Card composable with padding.

Android Kotlin

Card(modifier = Modifier.[1](16.dp)) {
    Text(text = "Hello Card")
}

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

Apadding

BfillMaxSize

Cbackground

Dclickable

Attempts:

3 left

💡 Hint

Common Mistakes

Using fillMaxSize instead of padding changes the size, not the space around.

Using background does not add space.

Using clickable adds click behavior, not space.

The padding modifier adds space around the Card content.

2fill in blank

medium

Complete the code to add elevation to the Card composable.

Android Kotlin

Card(elevation = [1].dp) {
    Text(text = "Elevated Card")
}

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

A100

B0

C-4

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 means no elevation, so no shadow.

Using negative values is invalid.

Using very large values like 100 is unusual and may look odd.

Elevation adds shadow to the Card. Typical values are positive numbers like 8.dp.

3fill in blank

hard

Fix the error in the Card composable to set a rounded corner shape.

Android Kotlin

Card(shape = RoundedCornerShape([1])) {
    Text(text = "Rounded Card")
}

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

A16

B16.dp

C"16dp"

Ddp(16)

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain 16 causes a type error.

Using a string like "16dp" is invalid.

Using dp(16) is not a valid syntax.

The RoundedCornerShape expects a Dp value like 16.dp.

4fill in blank

hard

Fill both blanks to create a Card with a blue background and padding inside.

Android Kotlin

Card(modifier = Modifier.[1](8.dp).background(Color.[2])) {
    Text(text = "Styled Card")
}

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

Apadding

BfillMaxWidth

CBlue

DRed

Attempts:

3 left

💡 Hint

Common Mistakes

Using fillMaxWidth instead of padding changes size, not padding.

Using Color.Red instead of Color.Blue changes the color.

The padding modifier adds space inside the Card. The background color is set using Color.Blue.

5fill in blank

hard

Fill all three blanks to create a Card with rounded corners, elevation, and padding.

Android Kotlin

Card(
    shape = RoundedCornerShape([1]),
    elevation = [2].dp,
    modifier = Modifier.[3](12.dp)
) {
    Text(text = "Complete Card")
}

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

A12.dp

B8

Cpadding

D16.dp

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain numbers without .dp for shape causes errors.

Using wrong modifier like fillMaxSize instead of padding.

Using negative or zero elevation.

Use 16.dp for rounded corners, 8.dp elevation, and padding(12.dp) modifier.