Jetpack Compose: How to center content within a Card

Introduction

In modern Android development, Jetpack Compose is transforming how we build UI elements, providing a declarative way to design layouts. Among the many components available in Jetpack Compose, the Card is a useful element that helps organize content with elevation, background colors, and rounded corners. This example showcases how to place content in the center of a Card component using Jetpack Compose in Kotlin. Understanding the use of Card and its layout behavior is essential for creating clean and visually appealing interfaces.

This article describes a simple Android project that places text content in the center of a Card component. It walks through the different composable functions involved and explains how Jetpack Compose layouts, such as Scaffold, Column, Card, and Box, can be combined to achieve the desired UI behavior.

Project Breakdown

The project begins with an AppCompatActivity class where the main composable function is set up. Inside the onCreate method, the setContent function is called, which initializes the Composable UI by invoking the GetScaffold composable function. Scaffold is a powerful layout structure in Jetpack Compose that provides a standard layout with pre-configured components such as a top bar, content area, and background color. In this case, the Scaffold function sets a top bar with a title and a background color, as well as the main content area.

Within the GetScaffold function, the TopAppBar displays a title at the top of the screen. This title is placed inside a Text composable, and a custom color is applied to the text and the app bar background. The Scaffold also specifies a background color for the entire screen, providing a consistent look and feel.

The core functionality of centering content inside a Card happens in the MainContent composable function. This function uses a Column layout with padding to structure the content vertically. Inside the column, a Card composable is added. The Card is given specific dimensions using the fillMaxWidth modifier to ensure it spans the entire screen width, and the height modifier sets its height to 250 dp. The Card is styled with a green background color, a slight elevation, and rounded corners using the RoundedCornerShape function.

To center the content inside the Card, a Box composable is used. Box is a versatile layout that allows overlapping content and provides an easy way to position child components. The wrapContentSize(Alignment.Center) modifier is applied to the Box, ensuring that the text content inside the card is centered both horizontally and vertically. The text itself is displayed using a Text composable with a material theme typography style to give it a consistent, polished look.

Conclusion

This simple Jetpack Compose example illustrates how to center content within a Card using a combination of Box and alignment modifiers. By leveraging Scaffold for layout structure, Card for content presentation, and Box for flexible alignment, developers can efficiently create well-structured and visually appealing UI components. The usage of Jetpack Compose greatly simplifies UI development, making it more intuitive compared to the traditional view-based system in Android.

Overall, this approach demonstrates the declarative nature of Jetpack Compose and how easily developers can create and manipulate layouts to achieve a desired design. Centering content within a Card is just one example of the flexibility and power of Compose in modern Android 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.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 Center",
                    color = Color.White)},
                backgroundColor = Color(0xFF58427C)) },
            content = {MainContent()},
            backgroundColor = Color(0xFFEDEAE0)
        )
    }


    @Composable
    fun MainContent(){
        Column(modifier = Modifier.padding(12.dp)) {
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(250.dp),
                backgroundColor = Color(0xFF8DB600),
                elevation = 4.dp,
                shape = RoundedCornerShape(12.dp),
            ) {
                Box(Modifier.wrapContentSize(Alignment.Center)){
                    Text(
                        text = "Card Center",
                        style = MaterialTheme.typography.h5
                    )
                }
            }
        }
    }


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