Card composable in Android Kotlin

Introduction

A Card is a simple container that groups related information visually. It helps organize content in a neat and clickable way.

To show a summary of an article with a title and image.

To display a user profile with picture and name.

To group buttons or actions related to one topic.

To highlight a product with image and price.

To create a clickable area that looks like a physical card.

Syntax

Android Kotlin

Card(
    modifier = Modifier.padding(8.dp),
    elevation = CardDefaults.cardElevation(4.dp),
    shape = RoundedCornerShape(8.dp)
) {
    // Content inside the card
}

modifier adjusts the card's size and position.

elevation adds shadow to lift the card visually.

Examples

A basic card with default style and a text inside.

Android Kotlin

Card {
    Text("Simple Card")
}

A card with more space around it, stronger shadow, and rounded corners.

Android Kotlin

Card(
    modifier = Modifier.padding(16.dp),
    elevation = CardDefaults.cardElevation(8.dp),
    shape = RoundedCornerShape(12.dp)
) {
    Text("Card with padding, shadow, and rounded corners")
}

A full-width card with a title and description stacked vertically.

Android Kotlin

Card(
    modifier = Modifier.fillMaxWidth(),
    elevation = CardDefaults.cardElevation(2.dp)
) {
    Column {
        Text("Title", style = MaterialTheme.typography.titleMedium)
        Text("Description inside the card.")
    }
}

Sample App

This program shows a card with some padding, rounded corners, and shadow. Inside, it has a title and a description stacked vertically with space between.

Android Kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun SimpleCard() {
    Card(
        modifier = Modifier.padding(16.dp),
        elevation = CardDefaults.cardElevation(6.dp),
        shape = RoundedCornerShape(10.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Welcome to Card", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(8.dp))
            Text("This is a simple card example in Jetpack Compose.")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewSimpleCard() {
    SimpleCard()
}

Important Notes

Cards automatically handle shadows and clipping for a neat look.

Use Modifier.padding() inside the card to space content away from edges.

Cards can be clickable by adding Modifier.clickable { }.

Summary

Cards group related content visually with padding, shadow, and shape.

Use Card composable with modifiers to customize appearance.

Cards improve UI clarity and can be interactive.