Card composable in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visual output of this Card composable code?

Consider this Kotlin Compose code snippet for a Card. What will the user see on the screen?

Android Kotlin

Card(
  modifier = Modifier.size(100.dp),
  elevation = 8.dp
) {
  Text("Hello Card", modifier = Modifier.padding(16.dp))
}

A A plain text 'Hello Card' without any card background or shadow

B A card with no shadow and no padding around the text

C A card with a shadow and the text 'Hello Card' inside with padding

D An empty card with no visible content

💡 Hint

Remember that Card adds elevation by default and the Text has padding inside the card.

The Card composable creates a container with elevation (shadow). The Text inside has padding, so the text is not touching the edges. This results in a visible card with shadow and padded text.

❓ lifecycle

intermediate

What happens when you update the state inside a Card composable?

If you have a Card composable displaying a counter and you update the counter state, what happens to the Card UI?

Android Kotlin

var count by remember { mutableStateOf(0) }
Card {
  Text("Count: $count")
}
// On button click: count++

A The Card recomposes and updates the displayed count immediately

B The Card does not update until the whole screen is refreshed

C The Card crashes because state cannot be used inside Card

D The Card UI freezes and does not show the updated count

💡 Hint

Compose automatically updates UI when state changes inside composables.

Compose tracks state changes and recomposes only the affected composables. Updating the count triggers recomposition of the Card, so the new count is shown immediately.

📝 Syntax

advanced

Which option correctly sets a rounded corner shape on a Card?

You want to create a Card with rounded corners of 12.dp radius. Which code snippet does this correctly?

A Card(shape = RoundedCornerShape(12.dp)) { Text("Rounded Card") }

B Card(cornerRadius = 12.dp) { Text("Rounded Card") }

C Card(shape = CornerRadius(12.dp)) { Text("Rounded Card") }

D Card(borderRadius = 12.dp) { Text("Rounded Card") }

💡 Hint

Look for the correct parameter name and type for shape in Card composable.

The Card composable uses the 'shape' parameter with a RoundedCornerShape object to set corner radius. Other options use incorrect parameter names or types.

❓ navigation

advanced

How to navigate to a new screen when a Card is clicked?

You want to navigate to a DetailScreen when the user taps on a Card. Which approach correctly handles this?

Android Kotlin

Card(modifier = Modifier.clickable { /* navigate */ }) {
  Text("Go to Details")
}

A Set a click listener on Text inside the Card to navigate

B Wrap Card inside a Button composable and use onClick to navigate

C Use Card's onClick parameter to call navController.navigate("detail")

D Use Modifier.clickable with a lambda calling navController.navigate("detail") inside the Card

💡 Hint

Card itself does not have an onClick parameter; use Modifier.clickable instead.

Card composable does not have an onClick parameter. To make it clickable, use Modifier.clickable and inside its lambda call navController.navigate("detail") to navigate.

🔧 Debug

expert

Why does this Card not show elevation shadow?

This Card composable code does not show any shadow even though elevation is set. What is the cause?

Android Kotlin

Card(
  modifier = Modifier.size(100.dp),
  elevation = 8.dp,
  backgroundColor = Color.Transparent
) {
  Text("No Shadow")
}

A Elevation must be set using shadow() modifier, not elevation parameter

B Setting backgroundColor to Transparent removes the shadow effect

C Card requires a border to show elevation shadow

D Text inside Card must have padding to show shadow

💡 Hint

Think about how transparent backgrounds affect shadows in Compose.

When backgroundColor is set to Transparent, the Card's shadow is not drawn because the surface is fully transparent. To see shadow, use a non-transparent background color.