Card composable in Android Kotlin - Deep Dive

Overview - Card composable

What is it?

A Card composable is a UI component in Android's Jetpack Compose that groups related content and actions inside a container with a shadow and rounded corners. It helps visually separate information on the screen, making the app easier to read and interact with. Cards can contain text, images, buttons, or any other UI elements.

Why it matters

Cards improve the user experience by organizing content into clear, touch-friendly sections. Without cards, apps would look cluttered and confusing, making it hard for users to find or focus on important information. Cards also provide visual cues about grouping and hierarchy, which helps users navigate the app smoothly.

Where it fits

Before learning Card composable, you should understand basic Jetpack Compose UI elements like Text, Column, and Row. After mastering Cards, you can explore more complex layouts, custom theming, and interactive components like clickable cards or animations.

Mental Model

Core Idea

A Card composable is like a physical card that holds related information and stands out visually with shadows and rounded edges to organize content clearly.

Think of it like...

Imagine a photo album where each photo is placed inside a protective card sleeve. The sleeve separates each photo from others, making it easy to focus on one at a time and keeping them neat and organized.

┌───────────────┐
│   Card Box    │  <- Rounded corners and shadow
│ ┌───────────┐ │
│ │ Content   │ │  <- Text, images, buttons inside
│ └───────────┘ │
└───────────────┘

Build-Up - 6 Steps

1

Foundation

Basic Card composable usage

Concept: Learn how to create a simple Card with default styling and place text inside it.

Card { Text("Hello Card") }

Result

A rectangular card appears with default shadow and rounded corners containing the text 'Hello Card'.

Understanding the simplest Card usage shows how Compose groups content visually with minimal code.

2

Foundation

Adding padding and content layout

Concept: Learn to add padding inside the Card and arrange multiple elements vertically.

Card { Column(modifier = Modifier.padding(16.dp)) { Text("Title") Text("Description inside the card.") } }

Result

The card shows two lines of text spaced nicely with padding inside the card edges.

Padding inside cards improves readability and shows how to structure content inside containers.

3

Intermediate

Customizing Card shape and elevation

🤔Before reading on: do you think changing elevation affects shadow size or card size? Commit to your answer.

Concept: Learn to customize the card's corner shape and shadow depth using shape and elevation parameters.

Card( shape = RoundedCornerShape(12.dp), elevation = 8.dp ) { Text("Custom shaped card") }

Result

The card has more rounded corners and a bigger shadow, making it appear raised above the background.

Knowing how elevation controls shadow depth helps create visual hierarchy and depth in UI design.

4

Intermediate

Making Card clickable with interaction

🤔Before reading on: do you think Card is clickable by default or needs extra code? Commit to your answer.

Concept: Learn to make the Card respond to user taps by adding a clickable modifier.

Card( modifier = Modifier.clickable { /* Handle click */ }, elevation = 4.dp ) { Text("Tap me") }

Result

The card visually responds to taps and triggers the click handler when pressed.

Understanding that Cards are containers, not buttons, clarifies how to add interactivity explicitly.

5

Advanced

Using Card with image and text layout

🤔Before reading on: do you think images inside Cards need special handling or just placed like text? Commit to your answer.

Concept: Learn to combine images and text inside a Card using Row and modifiers for layout.

Card { Row(modifier = Modifier.padding(16.dp)) { Image(painter = painterResource(R.drawable.sample), contentDescription = null, modifier = Modifier.size(64.dp)) Spacer(modifier = Modifier.width(8.dp)) Column { Text("Title") Text("Subtitle") } } }

Result

The card shows an image on the left and two lines of text on the right, nicely spaced.

Knowing how to combine multiple composables inside Cards enables rich, complex UI sections.

6

Expert

Performance and recomposition considerations

🤔Before reading on: do you think Cards automatically optimize recomposition or do you need to manage it? Commit to your answer.

Concept: Learn how Card composables behave during recomposition and how to optimize performance with stable parameters.

val title by remember { mutableStateOf("Title") } Card { Text(title) } // Use remember and stable parameters to avoid unnecessary redraws

Result

The card updates only when the title changes, reducing UI lag and improving app performance.

Understanding Compose's recomposition helps write efficient UI code that scales well in real apps.

Under the Hood

The Card composable is a container that applies a MaterialSurface with elevation and shape parameters. Internally, it uses Compose's drawing system to render shadows and rounded corners by clipping and layering. It manages layout by measuring and placing its child composables inside the defined padding and shape boundaries.

Why designed this way?

Cards follow Material Design guidelines to provide consistent visual language across apps. Using elevation and shape parameters allows flexible styling while keeping performance high. The composable approach fits Compose's declarative UI model, making Cards easy to customize and compose with other UI elements.

┌───────────────────────────────┐
│ Card Composable               │
│ ┌─────────────────────────┐ │
│ │ MaterialSurface         │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ Shadow & Elevation  │ │ │
│ │ └─────────────────────┘ │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ Rounded Corners     │ │ │
│ │ └─────────────────────┘ │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ Content Layout      │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────┘ │
└───────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Is a Card composable automatically clickable by default? Commit to yes or no.

Common Belief: Cards are clickable by default because they look like buttons.

Reality: Cards are not clickable unless you explicitly add a clickable modifier.

Why it matters: Assuming cards are clickable can cause confusion when taps do nothing, hurting user experience.

Quick: Does increasing Card elevation also increase its size? Commit to yes or no.

Common Belief: Higher elevation makes the card bigger on screen.

Reality: Elevation only affects shadow size and depth, not the card's actual size.

Why it matters: Misunderstanding elevation can lead to layout bugs or unexpected spacing in UI.

Quick: Can you put any composable inside a Card without restrictions? Commit to yes or no.

Common Belief: Cards can only contain simple text or images.

Reality: Cards can contain any composable, including complex layouts and interactive elements.

Why it matters: Limiting card content restricts UI design creativity and app functionality.

Quick: Does Card composable automatically optimize recomposition? Commit to yes or no.

Common Belief: Cards handle all performance optimizations internally.

Reality: Developers must manage state and stable parameters to avoid unnecessary recompositions.

Why it matters: Ignoring recomposition can cause slow UI and battery drain in real apps.

Expert Zone

1

Cards with high elevation can cause clipping issues if parent containers don't allow enough space for shadows.

2

Using transparent backgrounds in Cards can break Material elevation shadows, requiring careful color choices.

3

Combining clickable modifier with ripple effects inside Cards needs explicit handling to avoid double ripple or missing feedback.

When NOT to use

Avoid using Cards for very simple UI elements that don't need grouping or elevation, such as plain text lines. Instead, use basic containers like Box or Column. Also, for highly interactive or dynamic content, consider custom layouts or other Material components like ListItem for better semantics.

Production Patterns

In production, Cards are often used for lists of items with images and actions, like product catalogs or news feeds. Developers combine Cards with lazy lists for efficient scrolling and add animations on click. Cards also serve as containers for dialogs or expandable sections, maintaining consistent styling across the app.

Connections

Material Design Elevation

Card composable builds on the elevation concept from Material Design.

Understanding elevation helps grasp how Cards create depth and visual hierarchy in UI.

Declarative UI Paradigm

Cards are composables in Jetpack Compose's declarative UI model.

Knowing declarative UI principles clarifies how Cards update and recompose efficiently.

Graphic Design Principles

Cards apply graphic design ideas like grouping, contrast, and whitespace.

Recognizing these principles helps design better user interfaces beyond coding.

Common Pitfalls

#1 Card content touches edges without padding, making text hard to read.

Wrong approach:

Card {
Text("No padding here")
}

Correct approach:

Card {
Column(modifier = Modifier.padding(16.dp)) {
Text("Proper padding")
}
}

Root cause:

Forgetting to add padding inside Cards leads to cramped content and poor readability.

#2 Adding clickable modifier outside Card instead of on Card itself, causing unexpected behavior.

Wrong approach:

Column(modifier = Modifier.clickable { }) {
Card {
Text("Clickable content")
}
}

Correct approach:

Card(modifier = Modifier.clickable { }) {
Text("Clickable content")
}

Root cause:

Misplacing clickable modifier breaks expected tap areas and user interaction.

#3 Setting elevation to zero to remove shadow but forgetting it removes visual separation.

Wrong approach:

Card(elevation = 0.dp) {
Text("No shadow")
}

Correct approach:

Card(elevation = 2.dp) {
Text("Subtle shadow")
}

Root cause:

Removing elevation removes depth cues, making UI flat and harder to scan.

Key Takeaways

Card composable is a container with rounded corners and shadows that groups related UI elements visually.

Cards improve app usability by organizing content and providing clear visual hierarchy.

You must add padding and layout inside Cards to make content readable and well-structured.

Cards are not clickable by default; you add interactivity explicitly with modifiers.

Understanding elevation and recomposition helps create performant, visually appealing Cards in real apps.

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