Jetpack Compose Card

How to create jetpack compose card?

Card is an important component of Material Design which is basically a rectangular container with four rounded corners and Shadow effects at the borders. 

we can change the shape of it using shape attribute. 

It can be used to show images, title, supporting text, buttons, lists, and other components.

Basically three types of cards are widely used in Android App Filled, Elevated Card and Outlined Card,

Filled cards -  A card with background colors.

Elevated cards -  Elevated cards keep content with a  drop shadow that provide more separation from the background than filled cards, but less than outlined cards.

In this tutorial we will learn to create jetpack compose card

Copy this code →

ElevatedCard(
              elevation = CardDefaults.cardElevation(20.dp),
    onClick = { /* Do something */ },
    modifier = Modifier.size(width = 220.dp, height = 120.dp)
) {
    Box(Modifier.fillMaxSize()) {
        Text("Elevated Card", Modifier.align(Alignment.Center))
    }
}

Outlined cards - Outlined cards keep content with  a visual boundary around the container. This can provide greater emphasis than the other types.

Copy this code →

OutlinedCard(Modifier.size(width = 220.dp, height = 120.dp)) {
    // Card content
     Box(Modifier.fillMaxSize()) {
        Text("Outlined Card", Modifier.align(Alignment.Center))
   }
}

Some important parameters for card

elevation - We use it to controls the the shadow effect below the cards.

onClick -We used it to response when the cards are clicked.

shape - defines the shape of the card's container, border (when border is not null), and shadow (when using elevation).

Steps : -

Create a New Project and select Empty Activity In my case, application name is Coding Bihar you can use any other name.

MainActivity

Copy this code →

package com.example.codingbihar

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.codingbihar.ui.theme.CodingBiharTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CodingBiharTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                   Cards()
                   }
            }
        }
    }
}

Create a separate file for Card and named it as Cards 

Cards

Copy this code →

package com.example.codingbihar

import android.widget.Toast
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Cards() {
    val context = LocalContext.current.applicationContext
    Column(
        modifier = Modifier
            .padding(30.dp)
    ) {
        Card(
            onClick = {
                Toast.makeText(context, "Jetpack Compose Card", Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier
                .padding(20.dp)
                .size(width = 220.dp, height = 120.dp)
        ) {
            Box(Modifier.fillMaxSize()) {
                Text("Clickable Card", Modifier.align(Alignment.Center))
            }
        }
        OutlinedCard(modifier = Modifier
            .padding(20.dp)
            .size(
                width = 220.dp,
                height = 120.dp
            ),
            onClick = {
                Toast.makeText(context, "Jetpack Compose Outlined Card", Toast.LENGTH_SHORT).show()
            }) {
            // Card content
            Text(
                modifier = Modifier
                    .fillMaxSize(),
                text = "Outlined Card",
                textAlign = TextAlign.Center
            )

        }
        ElevatedCard(modifier = Modifier
            .padding(20.dp)
            .size(
                width = 220.dp,
                height = 120.dp
            ),
            elevation = CardDefaults.cardElevation(20.dp),
            onClick = {
                Toast.makeText(context, "Jetpack Compose Elevated Card", Toast.LENGTH_SHORT).show()
            }) {
            // Card content
            Text(
                modifier = Modifier
                    .fillMaxSize(),
                text = "20 dp Elevated Card",
                textAlign = TextAlign.Center
            )
        }
        ElevatedCard(modifier = Modifier
            .padding(20.dp)
            .background(color = Color.Red)
            .size(
                width = 220.dp,
                height = 120.dp
            ),
            shape = RoundedCornerShape(24.dp),
            onClick = {
                Toast.makeText(context, "Jetpack Compose Elevated Card", Toast.LENGTH_SHORT).show()
            }) {
            // Card content
            Text(
                modifier = Modifier
                    .fillMaxSize(),
                text = "Elevated Card with Red Background and Rounded Corner",
                textAlign = TextAlign.Center
            )
        }
        OutlinedCard(modifier = Modifier
            .padding(20.dp)
            .size(
                width = 220.dp,
                height = 120.dp
            ),
            border = BorderStroke(2.dp, Color.Green),
            onClick = {
                Toast.makeText(context, "Jetpack Compose Outlined Card", Toast.LENGTH_SHORT).show()
            }) {
            // Card content
            Text(
                modifier = Modifier
                    .fillMaxSize(),
                text = "Outlined Card with Green Border",
                textAlign = TextAlign.Center
            )
        }
    }
}

OUTPUT : -