Jetpack Compose: How to add a border to a Card

Introduction

Jetpack Compose, Google's modern toolkit for building native UI, provides a powerful and flexible way to design Android apps. One of the essential UI components is the Card, which offers an easy-to-use container for displaying content with visual appeal. Customizing the appearance of a Card is a common requirement, and one way to enhance its design is by adding a border. In this article, we will explore how to add different types of borders to a Card using Kotlin in Jetpack Compose. We will break down the code to show how to implement both a solid and gradient border to enhance the UI experience.

The ability to style components like cards with borders allows developers to create visually engaging and unique designs. This tutorial demonstrates how to add a solid color border and a gradient border, two commonly used techniques, to Card elements within a layout using Jetpack Compose.

Setting up the Scaffold

The main user interface is built within a Scaffold, which provides a structure with a top bar and content area. The Scaffold component is initialized in the onCreate() method by calling the GetScaffold() composable. In this example, the TopAppBar component is used to display a title at the top of the screen, giving the app a clean header. The background color of the top bar is set to a custom purple shade, while the background color for the Scaffold itself is set to a light beige tone, providing a contrast between the header and the content area.

The Scaffold composable serves as the container for the app’s content, allowing the placement of various UI elements. Here, it hosts the MainContent() composable, where the actual card elements are placed. This structure helps keep the code organized and modular.

The MainContent Composable

The MainContent() function is where the layout and the two Card components are defined. This function organizes the layout using a Column, which vertically arranges its child elements. The Column is styled to fill the available screen size and includes padding for spacing. To ensure the cards are evenly spaced, the Arrangement.SpaceEvenly property is applied, along with center alignment.

Each card is given a Modifier that sets its width, height, and elevation, providing a 3D shadow effect. The use of RoundedCornerShape rounds the card's corners, creating a softer appearance. By specifying different properties for each card, we achieve a varied visual design within the same layout.

Adding a Solid Border to the Card

The first card features a solid border. To add this, the border parameter of the Card composable is set to a BorderStroke. This stroke is defined with a specific width (2.dp) and a solid color (dark red). The solid border effectively outlines the card, making it visually distinct against the background and helping it stand out. Inside the card, a Box composable centers the text "Card Solid Border" within the available space.

This approach to adding a border is straightforward, using a single color and providing a clean, bold look.

Adding a Gradient Border to the Card

The second card introduces a gradient border, adding a dynamic and visually appealing effect. The BorderStroke for this card uses a Brush with a linearGradient to create a two-color gradient. The gradient transitions from a deep blue to a bright red, creating a smooth and modern border effect that catches the user's eye.

The gradient brush adds a more complex and visually interesting appearance compared to the solid border. Like the previous card, this card also includes a Box to center the text, which reads "Card Gradient Border." The use of gradient borders is ideal for more creative designs or when you want to add a more sophisticated flair to the UI.

Summary

In this tutorial, we explored how to add both solid and gradient borders to Card components in Jetpack Compose. By utilizing the BorderStroke and Brush features, we can easily enhance the visual appearance of cards, providing clear outlines and creative styling options. We also structured the app's UI using a Scaffold with a top bar and a column layout to arrange the cards evenly on the screen.

Whether you're aiming for a minimalistic look with a solid border or a more dynamic and colorful design with a gradient border, Jetpack Compose offers the tools to achieve these effects with ease. This flexibility allows developers to create polished and engaging UIs that meet various design requirements.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
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 Border",
                    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(0xFFFFA700),
                elevation = 4.dp,
                shape = RoundedCornerShape(12.dp),
                border = BorderStroke(
                    width = 2.dp,
                    color = Color(0xFF58111A)
                )
            ) {
                Box(Modifier.wrapContentSize(Alignment.Center)){
                    Text(
                        text = "Card Solid Border",
                        style = MaterialTheme.typography.h6
                    )
                }
            }

            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp),
                backgroundColor = Color(0xFFFFAA1D),
                elevation = 8.dp,
                shape = RoundedCornerShape(12.dp),
                border = BorderStroke(
                    width = 3.dp,
                    brush = Brush.linearGradient(
                        listOf(
                            Color(0xFF0047AB),
                            Color(0xFFFF3800)
                        )
                    )
                )
            ) {
                Box(Modifier.wrapContentSize(Alignment.Center)){
                    Text(
                        text = "Card Gradient Border",
                        style = MaterialTheme.typography.h6
                    )
                }
            }
        }
    }


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