Jetpack Compose: Card corner radius

Introduction

Jetpack Compose, the modern UI toolkit from Android, provides a simple and powerful way to design user interfaces using a declarative approach. One of the key features of Compose is its flexibility when it comes to customizing UI components, such as applying different shapes, including corner radii, to visual elements like Cards. In this Kotlin example, we explore how to use Jetpack Compose to create cards with varying corner radius effects, demonstrating the power and ease of UI customization.

This description breaks down the code of an Android activity that showcases the use of Compose Card components with different shapes, including rounded corners and circular shapes. The use of Scaffold to structure the layout and the way Card elements are styled with custom radii will be highlighted in this detailed walkthrough.

Main Structure

The core of this example lies in MainActivity, which inherits from AppCompatActivity. Inside the onCreate() method, the setContent function is called to define the layout of the activity using Jetpack Compose. The layout is composed through a call to GetScaffold(), which sets up a top bar and the main content of the activity, following a common UI structure for Android apps.

The Scaffold composable provides a framework for arranging the overall screen layout. In this example, it is used to define a TopAppBar with a title and a main content area. The top bar is simple, displaying the title "Compose - Card Corner Radius" with a specific background color. The rest of the screen's content is handled by the MainContent() composable, which is where the different card designs are implemented.

Card Customizations

Within MainContent(), three Card components are defined, each with a unique shape to demonstrate different corner-radius effects. The Column composable is used to arrange these cards vertically, with space evenly distributed between them. Each card is wrapped in a Box, which helps in centering the text inside.

The first card uses RoundedCornerShape with a corner radius of 12 dp. This gives the card evenly rounded corners on all sides. The card has a red background color and is styled with an elevation of 4 dp, which adds a subtle shadow effect. The text "Card Corner Radius 12 DP" is displayed at the center of the card.

The second card is similar in structure but applies a different shape. It uses RoundedCornerShape with a radius of 20 dp only at the top-end corner. This customization creates a card with one distinctively rounded corner while the other corners remain sharp. The card is given a blue background, making it visually distinct from the others.

The third card takes a different approach by applying a CircleShape, creating a fully circular card. The circular card has a fixed size of 200 dp for both width and height. It uses a yellow-orange background and displays the text "Circular Card" in its center. This demonstrates how easily Compose allows for non-rectangular shapes like circles to be integrated into the UI.

Preview and Testing

The example code includes a ComposablePreview() function, which is annotated with @Preview. This function is typically used in Jetpack Compose to provide a preview of the UI within Android Studio's design tools. Although the GetScaffold() function is commented out in the preview, it is here as a placeholder, allowing developers to easily preview the UI if they choose to enable it.

Summary

In summary, this Kotlin example demonstrates the flexibility of Jetpack Compose in designing UI components with custom shapes and corner radii. By utilizing composables like Card, Column, and Box, developers can easily create cards with rounded corners or circular shapes, giving them the freedom to design visually appealing interfaces. The use of Scaffold helps in structuring the layout with a top bar and main content area, while the customization of corner radii highlights how Compose makes UI design both simple and expressive.

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 Corner Radius",
                    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(0xFFE97451),
                elevation = 4.dp,
                shape = RoundedCornerShape(12.dp),
            ) {
                Box(Modifier.wrapContentSize(Alignment.Center)){
                    Text(
                        text = "Card Corner Radius 12 DP",
                        style = MaterialTheme.typography.h6
                    )
                }
            }

            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp),
                backgroundColor = Color(0xFF1F75FE),
                elevation = 4.dp,
                shape = RoundedCornerShape(topEnd = 20.dp),
            ) {
                Box(Modifier.wrapContentSize(Alignment.Center)){
                    Text(
                        text = "Top End Only 20 DP",
                        style = MaterialTheme.typography.h6
                    )
                }
            }

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


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