Jetpack Compose Card

The Card component in Jetpack Compose represents a surface-level container that groups related elements with subtle elevation, making the content visually distinctive from the surrounding interface. Drawing inspiration from Material Design principles, Cards in Jetpack Compose offer a perfect balance of separation and integration within the overall layout structure.

Card(  
    modifier = Modifier  
        .padding(16.dp)  
        .fillMaxWidth(),  
    elevation = CardDefaults.cardElevation(  
        defaultElevation = 6.dp  
    ),  
    shape = RoundedCornerShape(8.dp)  
) {  
    // Card content goes here  
}  

Essential Properties of Jetpack Compose Card

The power of Jetpack Compose Cards lies in their highly customizable properties. Understanding these properties is crucial for Android developers looking to create polished card interfaces:

1. Elevation Property in Jetpack Compose Card

Elevation in Jetpack Compose Cards controls the visual depth of the component, creating a shadow effect that makes the Card appear to float above the surface beneath it. The elevation property directly influences how prominently your Card stands out in the UI hierarchy.

Card(  
    elevation = CardDefaults.cardElevation(  
        defaultElevation = 4.dp,  
        pressedElevation = 8.dp,  
        focusedElevation = 6.dp  
    )  
) {  
    // Card content  
}  

When designing with Jetpack Compose Cards, the elevation property requires careful consideration. Too much elevation can make your Cards seem disconnected from the rest of the interface, while too little might fail to provide sufficient visual distinction.

2. Shape Property for Jetpack Compose Card

The shape property defines the outline contour of your Jetpack Compose Card. This property accepts any Shape composable, allowing for tremendous flexibility in design implementation:

Card(  
    shape = RoundedCornerShape(  
        topStart = 16.dp,  
        topEnd = 16.dp,  
        bottomStart = 0.dp,  
        bottomEnd = 0.dp  
    )  
) {  
    // Content  
}  

Beyond basic rounded corners, you can implement sophisticated shapes for your Jetpack Compose Cards:

Card(  
    shape = CutCornerShape(12.dp)  
) {  
    // Content  
}  

The shape property significantly impacts the visual identity of your Cards, making it an essential consideration in maintaining design consistency across your Android application.

3. Colors in Jetpack Compose Card

The coloring system for Jetpack Compose Cards allows fine-grained control over the visual appearance:

Card(  
    colors = CardDefaults.cardColors(  
        containerColor = MaterialTheme.colorScheme.surfaceVariant,  
        contentColor = MaterialTheme.colorScheme.onSurfaceVariant  
    )  
) {  
    // Card content  
}  

The containerColor determines the background color of the Jetpack Compose Card, while contentColor sets the default color for content inside the Card. These properties should align with your application's color scheme while ensuring sufficient contrast for accessibility.

4. Border Property in Jetpack Compose Card

Adding borders to your Jetpack Compose Card can enhance visual separation or emphasize certain UI elements:

Card(  
    border = BorderStroke(  
        width = 2.dp,  
        color = MaterialTheme.colorScheme.primary  
    )  
) {  
    // Card content  
}  

Borders in Jetpack Compose Cards are particularly useful when you need to visually group related information or want to highlight specific Cards without increasing their elevation.

5. Modifier Property for Jetpack Compose Card

The modifier property provides extensive control over the Card's layout behavior, appearance, and interaction handling:

Card(  
    modifier = Modifier  
        .padding(horizontal = 16.dp, vertical = 8.dp)  
        .fillMaxWidth()  
        .height(120.dp)  
        .clickable { /* Handle card click */ }  
) {  
    // Card content  
}  

Modifiers in Jetpack Compose Cards can be chained to apply multiple effects, creating sophisticated behavior with minimal code. This property is essential for implementing responsive layouts that adapt to different screen sizes.

Implementing Complex Card Layouts in Jetpack Compose

The true power of Jetpack Compose Cards emerges when implementing complex layouts that combine multiple elements:

Card(  
    modifier = Modifier  
        .padding(16.dp)  
        .fillMaxWidth(),  
    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)  
) {  
    Column(  
        modifier = Modifier.padding(16.dp)  
    ) {  
        Text(  
            text = "Jetpack Compose Card",  
            style = MaterialTheme.typography.titleLarge  
        )  
        Spacer(modifier = Modifier.height(8.dp))  
        Text(  
            text = "This is a comprehensive example of a Jetpack Compose Card with multiple content elements arranged in a Column layout.",  
            style = MaterialTheme.typography.bodyMedium  
        )  
        Spacer(modifier = Modifier.height(16.dp))  
        Button(  
            onClick = { /* Handle button click */ }  
        ) {  
            Text("Learn More")  
        }  
    }  
}  

This example demonstrates how Jetpack Compose Cards can encapsulate complex content hierarchies while maintaining visual cohesion. The Card container provides a consistent visual boundary while the internal layout handles content arrangement.

Creating Interactive Cards with Jetpack Compose

Adding interactivity to Jetpack Compose Cards enhances user engagement and provides clear affordances for action:

val interactionSource = remember { MutableInteractionSource() }  
val isPressed by interactionSource.collectIsPressedAsState()  
  
Card(  
    modifier = Modifier  
        .padding(16.dp)  
        .fillMaxWidth()  
        .clickable(  
            interactionSource = interactionSource,  
            indication = rememberRipple(bounded = true)  
        ) { /* Handle card click */ },  
    elevation = CardDefaults.cardElevation(  
        defaultElevation = 4.dp,  
        pressedElevation = 8.dp  
    )  
) {  
    // Card content  
}  

Interactive Jetpack Compose Cards can respond to various user actions through the interactionSource property, enabling sophisticated state management and visual feedback.

Implementing Swipeable Cards in Jetpack Compose

Advanced interaction patterns like swipeable Cards can be implemented by combining Jetpack Compose Cards with gesture handling:

val offsetX = remember { Animatable(0f) }  
val swipeableState = rememberSwipeableState(initialValue = 0)  
  
Card(  
    modifier = Modifier  
        .padding(16.dp)  
        .fillMaxWidth()  
        .offset { IntOffset(offsetX.value.roundToInt(), 0) }  
        .pointerInput(Unit) {  
            detectHorizontalDragGestures { _, dragAmount ->  
                coroutineScope.launch {  
                    offsetX.snapTo(offsetX.value + dragAmount)  
                }  
            }  
        }  
) {  
    // Card content  
}  

This implementation allows users to swipe Cards horizontally, enabling patterns like dismissal actions or revealing additional controls. Jetpack Compose's gesture system integrates seamlessly with Card components to create fluid, intuitive interactions.

Creating Scrollable Card Collections in Jetpack Compose

When presenting multiple Cards in a scrollable list, several optimizations are available:

LazyColumn {  
    items(cardItems) { item ->  
        Card(  
            modifier = Modifier  
                .padding(horizontal = 16.dp, vertical = 8.dp)  
                .fillMaxWidth(),  
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)  
        ) {  
            // Card content based on item  
        }  
    }  
}  

For horizontal scrolling arrangements:

LazyRow {  
    items(cardItems) { item ->  
        Card(  
            modifier = Modifier  
                .padding(horizontal = 8.dp, vertical = 16.dp)  
                .width(200.dp)  
                .height(150.dp),  
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)  
        ) {  
            // Card content based on item  
        }  
    }  
}  

These structures efficiently render only visible Cards, enabling smooth scrolling performance even with large datasets.

Accessibility Considerations for Jetpack Compose Cards

Creating accessible Card components ensures your Android application is usable by all users:

Card(  
    modifier = Modifier  
        .padding(16.dp)  
        .fillMaxWidth()  
        .semantics {  
            contentDescription = "Product card for ${product.name}"  
            role = Role.Button  
        }  
        .clickable { /* Handle click */ },  
    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)  
) {  
    // Accessible card content  
}  

Important accessibility considerations for Jetpack Compose Cards include:

1. Providing meaningful content descriptions
2. Ensuring sufficient color contrast between Card background and content
3. Making interactive Cards fully keyboard navigable
4. Applying appropriate touch target sizes for clickable Cards