Card composable in Android Kotlin - Mini App: Build & Ship

Build: Simple Card Screen

This screen shows a card with a title and a short description inside. The card has rounded corners and a shadow to stand out.

Target UI

-------------------------
|                       |
|   +----------------+  |
|   | Title          |  |
|   | Description... |  |
|   +----------------+  |
|                       |
-------------------------

Use a Card composable with rounded corners and elevation

Inside the card, display a title text in bold

Below the title, display a description text

Add padding inside the card for spacing

Center the card on the screen

Starter Code

Android Kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun SimpleCardScreen() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        // TODO: Add Card composable here
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

@Composable
fun SimpleCardScreen() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Card(
            modifier = Modifier.padding(16.dp),
            shape = MaterialTheme.shapes.medium,
            elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
        ) {
            Column(modifier = Modifier.padding(16.dp)) {
                Text(
                    text = "Card Title",
                    style = MaterialTheme.typography.titleLarge,
                    fontWeight = FontWeight.Bold
                )
                Spacer(modifier = Modifier.height(8.dp))
                Text(
                    text = "This is a simple description inside the card.",
                    style = MaterialTheme.typography.bodyMedium
                )
            }
        }
    }
}

We use a Box to center the card on the screen. Inside the Box, we add a Card composable with padding and elevation to create a shadow effect. The card uses a medium shape for rounded corners. Inside the card, a Column arranges the title and description vertically with padding. The title text is bold and uses the titleLarge typography style, while the description uses bodyMedium. A spacer adds vertical space between the texts.

Final Result

Completed Screen

-------------------------
|                       |
|   +----------------+  |
|   | Card Title     |  |
|   |                |  |
|   | This is a      |  |
|   | simple         |  |
|   | description    |  |
|   | inside the     |  |
|   | card.          |  |
|   +----------------+  |
|                       |
-------------------------

The card is centered on the screen with shadow and rounded corners

The user sees the title in bold and the description below it

Stretch Goal

Add a clickable ripple effect to the card that shows a toast message 'Card clicked!'

💡 Hint

Use Modifier.clickable combined with a Toast in the onClick lambda inside the Card composable