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.