Jetpack compose ui : How to create cardview?

Question

I want to create Cardview using jetpack compose but i am not able to find any example.

Answer 1

Code:

    class ImageCardActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val painter = painterResource(id = R.drawable.grogu)
            val contentDescription = "Grogu says hi"
            val title = "Force is strong with Grogu"

            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Box(
                    modifier = Modifier.fillMaxWidth(0.5f)
                ) {
                    ImageCard(
                        title = title,
                        contentDescription = contentDescription,
                        painter = painter
                    )
                }
            }
        }
    }
}

@Composable
fun ImageCard(
    title: String,
    contentDescription:String,
    painter: Painter,
    modifier:Modifier=Modifier
){
    Card(
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(18.dp),
        elevation = 5.dp
    ) {
        Box(
            modifier = Modifier.height(200.dp)
        ) {
            // Image
            Image(
                painter = painter,
                contentDescription = contentDescription,
                contentScale = ContentScale.Crop
            )
            // Gradient
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(
                        brush = Brush.verticalGradient(
                            colors = listOf(
                                Color.Transparent, Color.Black
                            ),
                            startY = 300f
                        )
                    )
            )
            // Title
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(12.dp),
                contentAlignment = Alignment.BottomStart
            ) {
                Text(
                    text = title,
                    style = TextStyle(color = Color.White, fontSize = 12.sp)
                )
            }
        }
    }
}

---

Answer 2

You can use something like:

Card(
    shape = RoundedCornerShape(8.dp),
    backgroundColor = MaterialTheme.colors.surface,
) {
    Column(
        modifier = Modifier.height(200.dp).padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ){
        Text(text = "This is a card view",
            style = MaterialTheme.typography.h4)
    }
}

---

With Material3 you can use:

Card(
   shape = RoundedCornerShape(8.dp),
   colors = CardDefaults.cardColors(containerColor = /* ... */)
)

Answer 3

As the friends recommended, Card is a way of creating CardView but you can do that by surface too :

val shape = RoundedCornerShape(10.dp)
Surface(modifier = Modifier.size(250.dp, 70.dp), elevation = 8.dp, shape = shape) {
      Text(text = "Sample text")
}

Note that Surface and Card cannot be used for positioning items so that if you wanna position that Text(text = "Sample text") , you should use one layout inside that Surface like this :

val shape = RoundedCornerShape(10.dp)
Surface(modifier = Modifier.size(250.dp, 70.dp), elevation = 8.dp, shape = shape) {
    Box(modifier = Modifier.fillMaxSize()) {
          Text(modifier = Modifier.align(Alignment.Center), text = "Sample text")
    }
}

The appropriate way for creating CardView is this but if you wanna just create shadow for a view, you can use Modifier.shadow (Note that Modifier.shadow and Surface/Card are not the same):

Box(modifier = Modifier.size(250.dp, 70.dp).shadow(8.dp, RoundedCornerShape(10.dp)), contentAlignment = Alignment.Center) {
        Text(text = "Sample Text")
}

Answer 4

in v0.1.0-dev09 version, can be done like this, where the padding of Card sets the margin of the card, the padding of Box sets the padding inside the card.

Card(
  shape = RoundedCornerShape(8.dp), 
  modifier = Modifier.padding(16.dp).fillMaxWidth()
) {
  Box(modifier = Modifier.height(200.dp).padding(16.dp)) {
    Text("This is a card view")
  }
}