How to Create Card with Jetpack Compose?

Last updated Sep 02, 2021


In this Jetpack compose tutorial we will learn how to show create Card with Jetpack Compose in Android application.

Card is the equivalent of a CardView in Compose

 

 

Download Source code

 

Let's get started

Step 1: Create android application in android studio

Step 2: Follow step for setup Jetpack Compose with Android Studio

Step 3: When it comes to displaying a Card composable, we can do so by using the provided composable function, along with the minimal required arguments.

 

A simple example looks like:


 

@Composable()
fun CardDemo() {
    Card {
        Text("Welcome to jet pack compose card tutorial")
    }
}

 

 

Lets add some padding so in the content of the card

Card(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
content = {
    Text("Card with content and modifier arguments", modifier = Modifier.padding(16.dp))
}
)

 

 

Styling The Card

The card compsable have some arguments which can be used to control the look and feel of the card ,lets try them one by one.
 

set shape of the card

Defines the card's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.

We can set the shape of the card by using the shape argument

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    //set shape of the card
    shape = RoundedCornerShape(16.dp),
    content = {
        Text("Card with shape argument", modifier = Modifier.padding(16.dp))
    }
)

set background color for the card

We can set the color of the card by using the backgroundColor argument

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    //set background color of the card
    backgroundColor = Color.Gray,
    content = {
        Text("Card with background color argumentt", modifier = Modifier.padding(16.dp))
    }
)

 

 

set elevation for the card

The z-coordinate at which to place this card. This controls the size of the shadow below the card.

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    //set elevation of the card
    elevation = 10.dp,
    content = {
        Text("Card with elevation argument", modifier = Modifier.padding(16.dp))
    }
)

 

 

set border for the card

We can add a border to the card by using the border argument and providing a dp value.

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    border = BorderStroke(2.dp, Color.Black),
    content = {
        Text("Card with border argument", modifier = Modifier.padding(16.dp))
    }
)

 

set content color of the card

The preferred content color provided by this card to its children. Defaults to either the matching content color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this card.

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    contentColor = Color.Green,
    content = {
        Text("Card with content color argument", modifier = Modifier.padding(16.dp))
    }
)

 

 

Full code

package com.example.jetpack.widget

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
 

@Composable()
fun CardDemo() {
    Column(
        modifier = Modifier.fillMaxSize(),
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            content = {
                Text("Card with content argument", modifier = Modifier.padding(16.dp))
            }
        )
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            //set shape of the card
            shape = RoundedCornerShape(16.dp),
            content = {
                Text("Card with shape argument", modifier = Modifier.padding(16.dp))
            }
        )
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            //set background color of the card
            backgroundColor = Color.Gray,
            content = {
                Text("Card with background color argumentt", modifier = Modifier.padding(16.dp))
            }
        )
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            //set elevation of the card
            elevation = 10.dp,
            content = {
                Text("Card with elevation argument", modifier = Modifier.padding(16.dp))
            }
        )

        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            border = BorderStroke(2.dp, Color.Black),
            content = {
                Text("Card with border argument", modifier = Modifier.padding(16.dp))
            }
        )
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            contentColor = Color.Green,
            content = {
                Text("Card with content color argument", modifier = Modifier.padding(16.dp))
            }
        )

    }

}

 

 

Image

Compose Carview creation

 

Conclusion: In this compose tutorial we covered how to create a card and how to set color for card


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

68 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions