Jetpack Compose: How to add Card background color

Introduction

In Android development, Jetpack Compose offers a modern toolkit for building native UI using a declarative approach. This toolkit simplifies the UI creation process by enabling developers to define UI components directly within the code, making layout and design easier to implement and customize. One of the frequently used UI elements in Jetpack Compose is the Card component, which allows you to organize content in a visually appealing way. By leveraging color, shape, and background customizations, developers can create engaging cards that enhance the user experience.

This example demonstrates how to create two custom-styled Card components in Jetpack Compose. The first card has a solid background color, while the second card showcases a gradient background achieved through the Brush.radialGradient function. This example also utilizes Scaffold, a high-level layout component, to add a top app bar and handle the screen’s overall background color, making it easier to maintain a consistent theme throughout the app.

Code Breakdown

The MainActivity class serves as the entry point of the application. In its onCreate method, the setContent function is used to define the UI hierarchy by calling the GetScaffold composable function. This function acts as the main layout container for the app and includes a Scaffold component. The Scaffold component provides a structured layout with built-in support for elements like top app bars, bottom navigation, floating action buttons, and more.

Inside the GetScaffold composable, the TopAppBar component creates a custom app bar at the top of the screen. This app bar has a title text reading "Compose - Card Background Color," with a white text color on a custom purple background (defined by the hex color 0xFF58427C). The Scaffold itself has a light beige background (0xFFEDEAE0), which sets the primary color theme for the screen. The main content of the screen is managed by another composable function, MainContent.

The MainContent composable is responsible for displaying the core layout, using a Column to align and organize the cards vertically. The Column component fills the screen with a padding of 12dp and centers its children horizontally. Inside the column, two Card composables are created, each demonstrating a different approach to background styling.

The first card showcases a solid background color. This card fills the width of the screen with a height of 175dp, a rounded corner shape of 24dp, and a light pink background color (0xFFFFBCD9). Within this card, a Box composable adds padding around a Text element, which displays "Card Solid Background" in a headline font style.

The second card introduces a more dynamic background using a radial gradient. This card also fills the width of the screen and has the same height and rounded corner properties as the first card. Instead of a solid color, the card's background is set to transparent, allowing for a custom gradient to be applied. The background modifier in the Box component uses Brush.radialGradient to create a multi-colored radial gradient that blends from light orange to pink to light blue. Inside the box, a Text element displays the message "Card Gradient Background," showing how flexible background styling can enhance a card's visual appeal.

Summary

This example demonstrates how Jetpack Compose allows developers to customize Card backgrounds using both solid colors and gradient effects. The use of Scaffold to define a structured layout and TopAppBar to add a title showcases how Compose streamlines UI development in Android by reducing the need for XML layouts and simplifying styling through modifiers. By controlling the color, shape, and padding of each Card, the example highlights the versatility of Jetpack Compose in creating visually distinctive UI components.

In essence, Jetpack Compose's declarative approach allows for creative and flexible UI designs with minimal code, offering a powerful alternative to traditional Android UI development. This example provides a starting point for Android developers who want to experiment with background customization in their own Compose applications.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
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.Brush
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 Background Color",
                    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(175.dp),
                backgroundColor = Color(0xFFFFBCD9),
                elevation = 4.dp,
                shape = RoundedCornerShape(24.dp),
            ) {
                Box(Modifier.padding(16.dp)) {
                    Text(
                        text = "Card Solid Background",
                        style = MaterialTheme.typography.h6
                    )
                }
            }

            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(175.dp),
                backgroundColor= Color.Transparent,
                elevation = 4.dp,
                shape = RoundedCornerShape(24.dp),
            ) {
                Box(
                    Modifier
                        .background(
                            Brush.radialGradient(
                                listOf(
                                    Color(0XFFFAD6A5),
                                    Color(0XFFFF5470),
                                    Color(0XFF7DF9FF)
                                )
                            )
                        )
                        .padding(12.dp)
                ) {
                    Text(
                        text = "Card Gradient Background",
                        style = MaterialTheme.typography.h6
                    )
                }
            }
        }
    }


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