Today’s tutorial will teach us how to create CardView in KMP KMM Compose Multiplatform for both Android & iOS platforms. This step-by-step guide covers setting up elevation, setting round corner edges, adding background color, adding a click-onClick listener, and adding images and text on CardView.
Create CardView in KMP KMM Compose Multiplatform:
1. I am showing a local Image from the common resource folder for testing purposes. You can download the below image.
2. Start Android Studio and paste the image into
composeApp -> commonMain -> composeResource -> drawable folder.
3. Now you have to Rebuild the project To use the local image. Without rebuilding the project, the local image will not be synced into the project.
4. Creating a Card widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@Composable fun ClickableCardExample() { Card( modifier = Modifier .padding(16.dp) .fillMaxWidth() .clickable { println("CardView Clicked....") }, elevation = 6.dp, shape = RoundedCornerShape(8.dp), backgroundColor = Color(0xFF00BFA5), ) { } } |
Code explanation:
- Modifier.padding(): Adding padding to the CardView widget.
- fillMaxWidth(): Setting up the Card view widget width fill parent.
- clickable: Adding click listener on CardView.
- elevation: Setting up elevation – drop shadow effect on CardView.
- RoundedCornerShape(): Setting up Card edges rounded.
- backgroundColor: Setting up background color to CardView. I am using Hex color code.
5. Now, we must first add a Row widget inside the Card View as Child, then add Image and multiple Text widgets.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
@Composable fun ClickableCardExample() { Card( modifier = Modifier .padding(16.dp) .fillMaxWidth() .clickable { println("CardView Clicked....") }, elevation = 6.dp, shape = RoundedCornerShape(8.dp), backgroundColor = Color(0xFF00BFA5), ) { Row(modifier = Modifier.padding(16.dp)) { Image( painter = painterResource(Res.drawable.demo_image), contentDescription = "Card Image", modifier = Modifier.size(60.dp).clip(RoundedCornerShape(8.dp)) .border(2.dp, Color.White, RoundedCornerShape(8.dp)), ) Spacer(modifier = Modifier.width(10.dp)) Column { Text( "Title Text", fontSize = 18.sp, fontWeight = FontWeight.Bold, color = Color.White ) Text("Sample description text.", color = Color.White) } } } } |
Complete source code for App.kt file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
package com.app.test import androidx.compose.foundation.Image import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll import androidx.compose.material.Card import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import org.jetbrains.compose.resources.painterResource import testapp.composeapp.generated.resources.Res import testapp.composeapp.generated.resources.demo_image @Composable fun App() { MaterialTheme { Box(modifier = Modifier.fillMaxSize()) { Column( modifier = Modifier .fillMaxSize() .verticalScroll(rememberScrollState()) .padding(24.dp), verticalArrangement = Arrangement.Top, horizontalAlignment = Alignment.CenterHorizontally, ) { Text( "Card View Example in KMP Compose Multiplatform", style = TextStyle(fontSize = 21.sp), textAlign = TextAlign.Center ) ClickableCardExample() } } } } @Composable fun ClickableCardExample() { Card( modifier = Modifier .padding(16.dp) .fillMaxWidth() .clickable { println("CardView Clicked....") }, elevation = 6.dp, shape = RoundedCornerShape(8.dp), backgroundColor = Color(0xFF00BFA5), ) { Row(modifier = Modifier.padding(16.dp)) { Image( painter = painterResource(Res.drawable.demo_image), contentDescription = "Card Image", modifier = Modifier.size(60.dp).clip(RoundedCornerShape(8.dp)) .border(2.dp, Color.White, RoundedCornerShape(8.dp)), ) Spacer(modifier = Modifier.width(10.dp)) Column { Text( "Title Text", fontSize = 18.sp, fontWeight = FontWeight.Bold, color = Color.White ) Text("Sample description text.", color = Color.White) } } } } |
Screenshot in Android device:
Screenshot in iOS device:
