Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package and import it at the top of your file.
import com.google.android.material.card.MaterialCardView
Usage
Basic usage
Apply CardView style through XML style attributes to get consistent theming for card containers with design system styling.
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?materialCardViewStyle">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Card content" />
</com.google.android.material.card.MaterialCardView>
With content padding
Use CardView with content to demonstrate the automatic padding and styling applied by the design system.
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?materialCardViewStyle"
android:layout_margin="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Card Title"
android:textAppearance="?textAppearanceHeadline6" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Card description content" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
Configuration
|
Style |
Type |
Description |
|---|---|---|
|
materialCardViewStyle |
Style reference |
Default card view style |
materialCardViewStyle
The materialCardViewStyle provides the default styling for MaterialCardView with consistent background colors, elevation, shape, and content padding.
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?materialCardViewStyle" />
Styling
Shape and elevation
The CardView style provides consistent shape appearance and elevation for a cohesive card design:
- Shape: Uses large component shape appearance with rounded corners
- Elevation: Applies small elevation for subtle shadow effect
- Background: Uses surface background color for proper contrast
<!-- Style automatically applies shape and elevation -->
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?materialCardViewStyle"
android:layout_margin="16dp" />
Content padding
The card style includes automatic content padding to ensure proper spacing for card content:
<com.google.android.material.card.MaterialCardView
style="?materialCardViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Content automatically gets proper padding -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Padded content" />
</com.google.android.material.card.MaterialCardView>
Checkable state
The card style supports checkable state with brand-colored check icon tinting:
<com.google.android.material.card.MaterialCardView
style="?materialCardViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checkable="true"
android:checked="true" />
Design tokens
The CardView style uses design tokens for consistent theming:
- Background: Uses colorBackgroundSurface1 semantic token for the card background
- Elevation: Uses elevationSmall design token for consistent shadow depth
- Shape: Uses ShapeAppearance.Backbase.LargeComponent for rounded corner styling
- Content padding: Uses sizerMedium design token for consistent internal spacing
- Check icon: Uses colorForegroundBrand for checkable state icon tinting
<!-- Style automatically applies design tokens -->
<com.google.android.material.card.MaterialCardView
style="?materialCardViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />