Ultimate Guide to Material 3 Cards in Android XML (2025 Tutorial + Examples)
Ultimate Guide to Material 3 Cards in Android: Tutorial & Examples for 2025 🚀
Overview 📖
Material 3 Cards display content and actions about a single subject, such as articles or products, in a visually distinct container. This guide explores card variants (Outlined, Filled, Elevated), their implementation, and theming for 2025. 🃏
Design and API Documentation 🔗
Using Cards 🤖
Add the Material Components for Android library dependency to use Material 3 Cards. See the Get Started guide. Cards support checking and dragging, configurable via attributes or code. Use a Theme.Material3.* theme for auto-inflation as com.google.android.material.card.MaterialCardView. 🛠️
Making Cards Accessible ♿
Set android:contentDescription on content like images or buttons within the card. For draggable cards, use an AccessibilityDelegate for screen readers like TalkBack. See the Android accessibility guide. 🗣️
Behavior and States 🎬
Cards support checked and dragged states. Toggle checked state with setChecked or handle dragging with setDragged. Example:
card.setChecked(true) // Check card
card.setChecked(false) // Uncheck card
card.setDragged(true) // Start dragging
card.setDragged(false) // End dragging
Card Variants 🌟
Material 3 defines three card variants: Outlined (stroked border), Filled (solid background), and Elevated (shadowed). Each suits specific use cases based on emphasis and context. 📇
- Outlined Card: Minimal, for neutral content display.
- Filled Card: Moderate emphasis with a solid background.
- Elevated Card: High emphasis with elevation and shadow.
Outlined Card 🔲
Outlined Cards use a stroked border for a minimal, clean look, ideal for lists or grids. 🖼️
Outlined Card Example 💻
API and source code:
MaterialCardView
The following example shows an outlined card with media, text, and buttons.
card.setOnLongClickListener {
card.isChecked = !card.isChecked
true
}
Anatomy and Key Properties 📏
An outlined card has a stroked container and optional content (media, text, buttons). 🖼️
- Container: Stroked, 1dp border, 0dp elevation.
- Content: Optional media, headline, subhead, buttons. 📸
Filled Card 📍
Filled Cards use a solid background for moderate emphasis, suitable for highlighted content. 🎨
Filled Card Example 💻
The following example shows a filled card with media, text, and buttons.
card.setOnClickListener {
// Handle card click
}
Anatomy and Key Properties 📏
A filled card has a solid background container and optional content. 🎨
- Container: Solid background, 0dp elevation.
- Content: Optional media, text, buttons. 📸
Elevated Card 📈
Elevated Cards use a shadow for high emphasis, ideal for prominent content. 🌟
Elevated Card Example 💻
The following example shows an elevated card with media, text, and buttons.
card.setOnClickListener {
// Handle card click
}
Anatomy and Key Properties 📏
An elevated card has a shadowed container and optional content. 🌟
- Container: Shadowed, 1dp elevation.
- Content: Optional media, text, buttons. 📸
Attributes (All Variants) 📋
| Element | Attribute | Related method(s) | Default value |
|---|---|---|---|
| Container | app:cardBackgroundColor |
setCardBackgroundColor, getCardBackgroundColor |
?attr/colorSurface (outlined), ?attr/colorSurfaceContainerHighest (filled), ?attr/colorSurfaceContainerLow (elevated) |
app:cardForegroundColor |
setCardForegroundColor, getCardForegroundColor |
@android:color/transparent (states) |
|
app:strokeColor |
setStrokeColor, getStrokeColor |
?attr/colorOutline (unchecked), ?attr/colorSecondary (checked) |
|
app:strokeWidth |
setStrokeWidth, getStrokeWidth |
1dp (outlined), 0dp (filled, elevated) |
|
app:shapeAppearance |
setShapeAppearanceModel, getShapeAppearanceModel |
?attr/shapeAppearanceCornerMedium |
|
app:cardElevation |
setCardElevation, getCardMaxElevation |
0dp (outlined, filled), 1dp (elevated) |
| Element | Attribute | Related method(s) | Default value |
|---|---|---|---|
| Checked Icon | checkedIcon |
setCheckedIcon, getCheckedIcon |
@drawable/ic_mtrl_checked_circle |
checkedIconTint |
setCheckedIconTint, getCheckedIconTint |
?attr/colorOutline (unchecked), ?attr/colorSecondary (checked) |
Styles 🎨
- Default style:
Widget.Material3.CardView.Outlined - Filled style:
Widget.Material3.CardView.Filled - Elevated style:
Widget.Material3.CardView.Elevated - Default style theme attribute:
?materialCardViewStyle
See the full list of styles and attrs. 🔗
Theming Cards 🖼️
Material Theming allows customization of card color, typography, and shape. 🎨
Theming Example 💻
Theming example for cards:
Specific styles for cards without affecting other components:
FAQ ❓
What are Material 3 Cards? 🤔
Containers for content and actions about a single subject, like articles or products. ✅
How many card variants are there? 🔢
Three variants: Outlined, Filled, and Elevated. 📇
When to use an Elevated Card? 🖋️
Use for high-emphasis content needing visual prominence, like featured items. 🌟
How to make cards accessible? ♿
Set android:contentDescription on content; use AccessibilityDelegate for draggable cards. 🗣️
Can I customize card appearance? 🎨
Yes, customize color, shape, and typography via res/values/styles.xml. 🖌️
How to add the Material 3 library? 📦
Include the Material Components for Android library. See the Get Started guide. 🛠️
Are there updates for cards in 2025? 🗓️
This guide reflects 2025 Material 3 standards for cards. 🚀
Comments
Post a Comment