Jetpack Compose Card

How to create jetpack compose card?

Card is an important component of Material Design which is basically a rectangular container with four rounded corners and Shadow effects at the borders. 

we can change the shape of it using shape attribute. 

It can be used to show images, title, supporting text, buttons, lists, and other components.

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.

Outlined Card -  Outlined cards keep content with  a visual boundary around the container. This can provide greater emphasis than the other types.

In this tutorial we will learn to create jetpack compose card

A simple card with OnClick function

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))
    }
}

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 : -

Create a New Project and select Empty Activity In my case, application name is Coding Bihar you can use any other name.

MainActivity

Create a separate file for Card and named it as Cards 

Cards

OUTPUT : -