In Jetpack Compose, a Card serves as a modern alternative to CardView in traditional Android development. It acts as a container that can hold multiple UI elements, making it ideal for structuring content in a visually appealing way. The Card component includes an elevation property, which adds a shadow effect to enhance depth perception.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.
Note: Select Kotlin as the programming language.
Step 2: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
MainActivity.kt:
package com.geeksforgeeks.demo
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.*
import com.geeksforgeeks.demo.ui.theme.DemoTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
// Force setting it to light theme
// and turning off dynamic theme
DemoTheme(dynamicColor = false, darkTheme = false) {
MyContent()
}
}
}
}
@Composable
fun MyContent(){
Column(Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally) {
// Create a card
Card (
colors = CardDefaults.cardColors(containerColor = Color.White),
elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
) {
Column(Modifier.padding(24.dp)) {
// Set views in a column
Text("GeeksforGeeks", fontWeight = FontWeight.W700)
Text("+91 1800 2584458")
Text("Noida, India", color = Color.Gray)
}
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyContent()
}
Output:
