13. Card in Jetpack Compose

What's Card?

Card is a container, we can place single composable in card. It has elevation property, we can display shadow effect using the card. We can add the border with a rounded corner radius.

If you are an Android developer, It's a CardView.

We can use the following properties in Card,

@Composable
fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    border: BorderStroke? = null,
    elevation: Dp = 1.dp,
    content: @Composable () -> Unit
)

Syntax:

Card(){
  AnyComposableFunction()
}

1. Card with elevation (Shadow):

@Composable
fun SimpleCard(){
    val paddingModifier  = Modifier.padding(10.dp)
    Card(elevation = 10.dp, modifier = paddingModifier) {
      Text(text = "Simple Card with elevation",
           modifier = paddingModifier)
    }
}

We give the 10.dp elevation, so it shows shadow for 10.dp. We also give the padding modifier for both card and text.

Output:

2. Card with shape:

We can set shape for card background. If we not provided it will take RoundedCornerShape with 4dp radius. You can use following shapes,

• RectangleShape

• CircleShape

• RoundedCornerShape

• CutCornerShape

@Composable
fun CardWithShape() {
    val paddingModifier = Modifier.padding(10.dp)
    Card(shape = RoundedCornerShape(20.dp),elevation = 10.dp, modifier = paddingModifier) {
        Text(text = "Round corner shape", modifier = paddingModifier)
    }
}

Output:

3. Card with border:

We use border property, we need to set BorderStroke for border property. BorderStroke has two parameters, first one is width size and other one is border color.

@Composable
fun CardWithBorder() {
    val paddingModifier = Modifier.padding(10.dp)
    Card(
        elevation = 10.dp,
        border = BorderStroke(1.dp, Color.Blue),
                modifier = paddingModifier
        ) {
        Text(text = "Card with blue border", modifier = paddingModifier)
    }
}

Output:

For more details about BorderStroke, check this official documentation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke

4. Multiple Views:

Card support only one composable function. If you want multiple widgets in the same card, you should go with other layout composable functions such as Column, Row, ConstraintLayout.

@Composable
fun CardWithMultipleViews() {
    val paddingModifier = Modifier.padding(10.dp)
    Card(
        elevation = 10.dp,
        modifier = paddingModifier
    ) {
        Column(modifier = paddingModifier) {
            Text(text = "First Text")
            Text(text = "Second Text")
        }
    }
}

Output:

5.Content Color:

In traditional android programming, we don't have this property. If we set this, it will change the content color of all its child views.

@Composable
fun CardWithContentColor() {
    val paddingModifier = Modifier.padding(10.dp)
    Card(
        elevation = 10.dp,
        contentColor = Color.Blue,
        modifier = paddingModifier
    ) {
        Column() {
            Text(text = "Text with card content color (Blue)",
                modifier = paddingModifier)
            Text(text = "Text with card custom color",
                color = Color.Black,
                modifier = paddingModifier)

        }
    }
}

In this example, we use two Text(). First one we don't set the color, so it takes color from contentColor. Other one we use the color property, so it takes color from itself. Output: