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.

Practice

1. What is the primary purpose of using a Card composable in Android Jetpack Compose?

easy

A. To group related content visually with padding, shadow, and shape

B. To create a button with click actions

C. To display a list of items vertically

D. To handle navigation between screens

Solution

1. Step 1: Understand the role of Card composable

   The Card composable is designed to group related UI elements visually by adding padding, shadows, and rounded corners.

2. Step 2: Differentiate from other composables

   Buttons handle clicks, lists display multiple items, and navigation manages screen changes, which are not the primary roles of Card.

3. Final Answer:

   To group related content visually with padding, shadow, and shape -> Option A

4. Quick Check:

   Card groups content visually = A [OK]

Hint: Cards group content visually with style and padding [OK]

Common Mistakes:

• Confusing Card with Button composable
• Thinking Card manages navigation
• Assuming Card is for lists only

2. Which of the following is the correct syntax to create a simple Card with padding in Jetpack Compose?

easy

A. Card(modifier = Modifier.padding(16.dp)) { Text("Hello") }

B. Card(padding = 16.dp) { Text("Hello") }

C. Card { modifier = Modifier.padding(16.dp); Text("Hello") }

D. Card(Modifier.padding(16)) { Text("Hello") }

Solution

1. Step 1: Check correct use of Modifier and padding

   Modifier.padding(16.dp) is the correct way to add padding to a composable in Jetpack Compose.

2. Step 2: Validate syntax correctness

   Card(modifier = Modifier.padding(16.dp)) { Text("Hello") } correctly passes modifier = Modifier.padding(16.dp) to Card. Other options misuse parameters or omit .dp unit.

3. Final Answer:

   Card(modifier = Modifier.padding(16.dp)) { Text("Hello") } -> Option A

4. Quick Check:

   Modifier.padding(16.dp) syntax = D [OK]

Hint: Use modifier = Modifier.padding(16.dp) inside Card [OK]

Common Mistakes:

• Using padding parameter directly on Card
• Forgetting .dp unit for padding
• Assigning modifier inside Card content block

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

Card(modifier = Modifier.padding(8.dp)) {
  Text("Welcome", modifier = Modifier.padding(16.dp))
}

medium

A. A card with no padding and text padded by 8.dp

B. Text "Welcome" without padding inside a card with 8.dp padding

C. A card with "Welcome" text padded inside and card itself padded from outside

D. A card with 16.dp padding and text with 8.dp padding

Solution

1. Step 1: Analyze Card modifier padding

   The Card has Modifier.padding(8.dp), so the card itself is spaced 8.dp from surrounding elements.

2. Step 2: Analyze Text modifier padding

   The Text inside the Card has Modifier.padding(16.dp), so the text is padded inside the card by 16.dp.

3. Final Answer:

   A card with "Welcome" text padded inside and card itself padded from outside -> Option C

4. Quick Check:

   Card padding outside + Text padding inside = C [OK]

Hint: Card padding affects outside space; Text padding affects inside space [OK]

Common Mistakes:

• Confusing which padding applies to card vs text
• Assuming padding stacks add up inside
• Ignoring modifier order effects

4. Identify the error in this Card composable code:

Card(modifier = Modifier.padding(12)) {
  Text("Error example")
}

medium

A. Text composable cannot be inside Card

B. Missing .dp unit for padding value

C. Modifier.padding cannot be used with Card

D. Card requires a background color parameter

Solution

1. Step 1: Check Modifier.padding parameter

   Modifier.padding requires a Dp value like 12.dp, not just 12.

2. Step 2: Validate other parts

   Text inside Card is valid, Modifier.padding works with Card, and background color is optional.

3. Final Answer:

   Missing .dp unit for padding value -> Option B

4. Quick Check:

   Modifier.padding needs .dp unit = B [OK]

Hint: Always add .dp after numeric padding values [OK]

Common Mistakes:

• Omitting .dp unit causes compile error
• Thinking Card needs background color always
• Believing Text can't be child of Card

5. You want to create a Card that has rounded corners, a shadow, and changes background color when clicked. Which approach correctly combines these features?

hard

A. Use Card with elevation for corners, shape for shadow, and no clickable modifier

B. Use Card with padding for shadow, shape for color, and clickable for corners

C. Use Card with background color parameter only and add shadow manually

D. Use Card with shape = RoundedCornerShape(12.dp), elevation = 8.dp, and clickable modifier with background color change inside

Solution

1. Step 1: Understand Card parameters for style

   RoundedCornerShape sets corners, elevation adds shadow, and clickable modifier handles clicks.

2. Step 2: Combine clickable with background color change

   Clickable modifier can be used with state to change background color on click inside Card content.

3. Step 3: Evaluate options

   Use Card with shape = RoundedCornerShape(12.dp), elevation = 8.dp, and clickable modifier with background color change inside correctly uses shape, elevation, and clickable with background color change. Others misuse parameters or miss features.

4. Final Answer:

   Use Card with shape = RoundedCornerShape(12.dp), elevation = 8.dp, and clickable modifier with background color change inside -> Option D

5. Quick Check:

   Shape + elevation + clickable for color change = A [OK]

Hint: Combine shape, elevation, and clickable modifier for interactive Card [OK]

Common Mistakes:

• Confusing elevation with padding for shadow
• Misusing shape for background color
• Forgetting clickable modifier for interaction