Jetpack Compose: How to add padding to a Card

Introduction

In this article, we will explore how to implement a simple UI layout using Jetpack Compose in Android by focusing on how to manage padding inside a card. Jetpack Compose is Google's modern toolkit for building native UI, which simplifies UI development by using Kotlin-based declarative programming. Instead of building UI components through XML layouts, Compose allows developers to define UI components directly in Kotlin, which brings flexibility and ease of use.

In this particular example, we will look at how to create a Card component with proper padding, alignment, and visual structure. This is achieved through various composable functions, leveraging the powerful Jetpack Compose framework. Let's dive into the different sections of the code to understand how these UI elements are constructed.

Main Activity Setup

The main entry point for this app is the MainActivity class, which extends AppCompatActivity. The onCreate() method is overridden to set the content view using the setContent function, a key part of Jetpack Compose that replaces traditional XML layouts. This function calls the GetScaffold() composable, which is responsible for creating the primary structure of the app. The use of Jetpack Compose's declarative approach allows the UI to be defined entirely in Kotlin.

The GetScaffold() function utilizes a Scaffold composable, a layout component that provides a base structure for the app, including slots for a top bar, content area, and more. In this case, a TopAppBar is defined with a title and a specific background color, giving the app a clean and structured look. The background color of the whole scaffold is set to a light beige-like color, adding a warm aesthetic to the UI.

MainContent Function

The core of the UI resides in the MainContent() composable function, which is responsible for displaying the Card component. This function is wrapped in a Column, which arranges its children vertically. The Column is customized with modifiers such as fillMaxSize() and padding(12.dp), ensuring that it occupies the entire screen space and includes some padding around the edges.

The Card component itself is where the focus of this example lies. It is set to have a fixed height of 150.dp and fills the available width, creating a large rectangular card in the UI. Several important visual properties are applied to the card, including a soft pink background color, a slight elevation for depth, rounded corners with a radius of 12.dp, and a border stroke with a width of 1.dp. These details give the card a polished and well-defined appearance.

Padding in the Card

Inside the Card, a Box composable is used to hold the card's content. The Box is a layout component that allows stacking of elements, and in this case, it is wrapped with a Modifier.padding(16.dp) to add internal padding. This ensures that the content inside the card does not touch the edges, creating a more balanced and visually appealing layout. The Text composable within the Box displays a simple label, styled with MaterialTheme.typography.h6, which ensures the text adheres to the app’s overall design system.

Preview Function

The ComposablePreview() function is marked with the @Preview annotation, which is a handy feature in Jetpack Compose. It allows you to see a real-time preview of your composable functions directly in the IDE without having to run the app on an actual device or emulator. While this function is commented out in the example, uncommenting it would let you visually test the GetScaffold() layout within Android Studio's preview window.

Summary

This example demonstrates how to build a basic card layout in Jetpack Compose, focusing on using padding and alignment effectively to create a visually appealing UI. By utilizing composables like Card, Column, and Box, along with Modifier properties for padding, alignment, and size, this code achieves a clean and functional design. Jetpack Compose’s declarative approach allows developers to define UI elements directly in Kotlin, streamlining the process and reducing the need for XML layouts. This setup offers flexibility and ease of development, making it a preferred choice for modern Android UI design.

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.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 Padding",
                    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(0xFFFFBCD9),
                elevation = 4.dp,
                shape = RoundedCornerShape(12.dp),
                border = BorderStroke(
                    width = 1.dp,
                    color = Color(0xFF9E1B32)
                )
            ) {
                Box(Modifier.padding(16.dp)) {
                    Text(
                        text = "Card Padding 16 DP",
                        style = MaterialTheme.typography.h6
                    )
                }
            }
        }
    }


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