How to create jetpack compose card?
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
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.
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 : -
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX5OW74bBNbzTrexkwC8ARwq5iR-ADjE7hIyYJ3h7HzAkh6V5z9ni-miqaNNVTqOp9hbvl09IedZIalkC4O5rytCVRmgz73I9PwgKzt0xBECCakP69pnhmqc_qpi7hu3Z-sAtN07cd3Fv6ZR71-XRJetpngvyIyuq4Z4S3RtKgawb7B6X9w4oAGScnZw/w640-h436-rw/New%20Project%20Empty.webp)
MainActivity
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()
}
}
}
}
}
Cards
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 : -
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFoX-fkQiEyfLX5Q34cQlVI2dl_C6yc6ux-qNC6eWM92DNji16hSVN_BniyjeG0sGlQp6Mg3SUj_X1pzsyRdIPcyM8i2UOejCsZdqxconiGSkLkzjkTZV-BK-Dm33e0n-UYoVVWc7tBnPpTKtyx0zJ5KgmgOfXKG8usDCjkrqjQy_zYzwvLqVLlFVW2Q/w296-h640-rw/Card3.webp)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAX21ah9Adqh4YDd6qpTbFoaimYwK7txdBRQTKCrw8hgtC3F2NfgtGSdT12-ybMunziBJdLQRKnWraGV34WHZvsa-b8WBJjqY62G5fXvleU0dOw1BZ7SCqJUxSW30v0WTRIIQ3wDnkFQMMVSuhYrRQprkN-LKMXW-LvGYf37HcTzDXcgwlnGYxerHw5A/w296-h640-rw/Card2.webp)
![Sandeep Gupta](http://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2MuJw6Nf2-H9oGwPbg9a1QMtCY8PfIaaqNzq0234pnt65zt6Hary1M9RhmPv54pxWQarfRKzCfvrLFMXcH-tToe0LJHW8VCbi28zIjF4w-LifXw7BdSzNCII5QyqNyFAF2fjPn-VJej9q6e0xG1_rbeireNQegXwm21kLDDvaKqy8A/w130/author%20(1).png)