Jetpack Compose: How to add shadow to a Card

Introduction

Jetpack Compose, Android’s modern toolkit for building native UI, allows developers to create beautiful, responsive applications with less code. One of the appealing features of Jetpack Compose is its simplicity in designing UI components such as cards, which are widely used to display information. A common requirement when using cards is to add shadow effects or elevation to enhance visual aesthetics, giving a more defined and interactive feel. In this guide, we’ll explore how to add shadow to a card component in Jetpack Compose, using simple steps to control elevation for better user experience.

This tutorial walks you through creating a basic layout with multiple cards in Android using Jetpack Compose. It covers how to control the elevation (which adds a shadow effect) and how to customize the card’s appearance with different shapes and background colors. Each card in the example has a different elevation value, showing how the shadow effect varies based on this property.

Scaffold and TopAppBar

The entry point of the application is the MainActivity, where Jetpack Compose’s setContent function is used to display the composable UI. The composable function GetScaffold() serves as the structure for the app’s layout. It uses the Scaffold composable to create a layout that follows Material Design principles, including a TopAppBar. The TopAppBar provides a consistent header across the app with a customizable title. In this example, the top bar is titled "Compose - Card Shadow" and is styled with a purple background and white text.

The Scaffold function also defines the background color of the app and sets the main content with a call to MainContent(), where the core card components are designed and laid out.

MainContent and Card Structure

The MainContent() function contains a Column composable that arranges the cards vertically. The Column is styled to fill the available screen space, with padding to add some spacing between the edges of the screen and the content. The cards are centered both vertically and horizontally, ensuring a visually balanced layout. Inside this column, three different cards are displayed, each having varying levels of elevation (shadow).

Each card is created using the Card composable. The cards are assigned a Modifier to adjust their size and layout properties, such as full-width and specific height settings. The cards also feature a distinct background color (a vibrant orange) and rounded corners. The shadow effect on each card is controlled by the elevation parameter, where values like 4.dp, 8.dp, and 12.dp are used to create different shadow intensities.

Shadow Effect with Elevation

The elevation parameter in Jetpack Compose controls the depth at which a card appears to float above the surface, which creates a shadow. This shadow effect is particularly useful for adding depth to the UI, making the elements more visually appealing and interactive. In this example, three cards are displayed, each with different elevations:

Card 1: Has an elevation of 4.dp, providing a subtle shadow effect.
Card 2: Elevation is set to 8.dp, making the shadow more pronounced.
Card 3: Features an elevation of 12.dp, where the shadow is strongest, making the card appear to be floating higher than the others.

This demonstrates how varying the elevation value can significantly affect the visual hierarchy of components.

Shapes and Customization

In addition to elevation, cards in Jetpack Compose can be customized with different shapes and sizes. The first two cards use a RoundedCornerShape with a 12.dp radius, giving them smooth, rounded edges that enhance the visual appeal. The third card, however, uses a CircleShape, creating a perfect circular card, which is also elevated at 12.dp. This highlights the flexibility of Jetpack Compose, where designers can not only control shadow effects but also shape the components to fit the desired design.

Summary

In summary, adding shadows to cards in Jetpack Compose is straightforward, thanks to the elevation property. By adjusting this value, you can create a range of shadow effects that help emphasize elements and guide user interaction. This example also demonstrates the power of composables in designing flexible, customizable UI components with minimal code. The ability to easily set shapes, colors, and elevations makes Jetpack Compose a versatile tool for building responsive, modern UIs.

This tutorial highlights how combining simplicity with customization allows developers to build visually rich applications. With a solid understanding of elevation and card design in Jetpack Compose, you can now experiment with more complex layouts and designs for your Android apps.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            GetScaffold()
        }
    }


    @Composable
    fun GetScaffold(){
        Scaffold(
            topBar = {TopAppBar(
                title = {Text(
                    "Compose - Card Shadow",
                    color = Color.White)},
                backgroundColor = Color(0xFF58427C)) },
            content = {MainContent()},
            backgroundColor = Color(0xFFEDEAE0)
        )
    }


    @Composable
    fun MainContent(){
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(12.dp),
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp),
                backgroundColor = Color(0xFFFFAA1D),
                elevation = 4.dp,
                shape = RoundedCornerShape(12.dp),
            ) {
                Box(Modifier.wrapContentSize(Alignment.Center)){
                    Text(
                        text = "Card Elevation/Shadow 4 DP",
                        style = MaterialTheme.typography.h6
                    )
                }
            }

            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp),
                backgroundColor = Color(0xFFFFAA1D),
                elevation = 8.dp,
                shape = RoundedCornerShape(12.dp),
            ) {
                Box(Modifier.wrapContentSize(Alignment.Center)){
                    Text(
                        text = "Card Elevation/Shadow 8 DP",
                        style = MaterialTheme.typography.h6
                    )
                }
            }

            Card(
                modifier = Modifier.size(200.dp),
                backgroundColor = Color(0xFFFFAA1D),
                elevation = 12.dp,
                shape = CircleShape,
            ) {
                Box(Modifier.wrapContentSize(Alignment.Center)){
                    Text(
                        text = "Elevation 12 DP",
                        style = MaterialTheme.typography.h6
                    )
                }
            }
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //GetScaffold()
    }
}