Jetpack Compose: Box rounded corners shape

Introduction

Jetpack Compose is a modern toolkit for building native UI in Android, simplifying and accelerating UI development by using Kotlin code. One of its key strengths is the flexibility it provides in designing user interfaces, including easily customizing shapes, layouts, and components. In this example, we focus on using Box components in Jetpack Compose to create UI elements with rounded corners and circular shapes, illustrating how to handle custom shapes in your UI.

In this article, we will break down an example Android app that demonstrates how to implement different box shapes such as boxes with rounded corners and circular shapes. The components are composed using Jetpack Compose’s powerful layout system, and the app includes a top app bar, background colors, and neatly arranged elements. We will walk through the core components and techniques used to achieve these shapes.

Scaffold Layout and AppBar Setup

The app's UI is built inside a Scaffold composable, which provides a structure for the main UI elements like the top app bar and content layout. The top app bar is created using TopAppBar, where the title is set to "Compose - Box Rounded Corners" with a background color for distinction. The Scaffold composable serves as the container for the rest of the content, and it uses the MainContent composable to display the core elements of the app. This structure ensures that the app maintains a consistent layout with a clear hierarchy of UI components.

The overall background of the app is set to a light color, which helps highlight the various colored Box components used later in the MainContent composable.

MainContent Layout

The MainContent composable is where the core visual elements of the app are defined. The elements are arranged in a column using the Column composable, which enables vertical stacking of child components. Within the Column, the verticalArrangement and horizontalAlignment parameters are used to evenly space out the child elements and center them horizontally.

Each child within the Column is a Box composable with different modifications applied to showcase rounded and circular shapes. These Box components act as containers for content, and they are customized using various layout modifiers to control their appearance and positioning.

Creating Boxes with Rounded Corners

The first Box in the MainContent composable demonstrates how to create a rectangle with rounded corners. The clip modifier is used with the RoundedCornerShape to round the corners of the Box to 12dp. The background color of the box is set to a light blue, and the text inside the box ("Rounded Corners 12 DP") is centered using the contentAlignment parameter.

The second Box builds on this by demonstrating how to round only specific corners. In this case, the top-right corner is rounded to 20dp using the RoundedCornerShape(topEnd = 20.dp). This shows the flexibility Jetpack Compose offers when customizing the shape of a UI component.

Circular Box Shape

The third Box demonstrates how to create a circular shape using the CircleShape composable. By setting the width and height of the Box to 150dp and applying the clip(CircleShape) modifier, the box is transformed into a perfect circle. The background color of this circular box is set to a light orange, and like the previous boxes, text is placed in the center for clarity.

The use of CircleShape in this context simplifies the creation of circular UI elements, which is often useful for avatars or icons in a modern Android app.

Conclusion

This example showcases how easy it is to create rounded and circular shapes in Jetpack Compose using simple layout modifiers and built-in shape options like RoundedCornerShape and CircleShape. The flexibility provided by Jetpack Compose’s declarative UI framework allows developers to quickly experiment with different shapes, layouts, and designs while writing concise and readable code.

By understanding the core concepts used in this example, such as the Scaffold, Box, and clip modifiers, developers can create sophisticated and visually appealing UIs with minimal effort. Jetpack Compose continues to push the boundaries of Android UI development, making it an essential tool for 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.background
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.draw.clip
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 - Box Rounded Corners",
                    color = Color.White)},
                backgroundColor = Color(0xFF58427C)) },
            content = {MainContent()},
            backgroundColor = Color(0xFFEDEAE0)
        )
    }


    @Composable
    fun MainContent(){
        Column(
            modifier = Modifier
                .fillMaxSize(),
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally
        ){
            Box(
                Modifier
                    .padding(12.dp)
                    .fillMaxWidth()
                    .height(150.dp)
                    .clip(RoundedCornerShape(12.dp))
                    .background(Color(0xFFB9D9EB)),
                contentAlignment = Alignment.Center
            ){
                Text(text = "Rounded Corners 12 DP")
            }

            Box(
                Modifier
                    .padding(12.dp)
                    .fillMaxWidth()
                    .height(150.dp)
                    .clip(RoundedCornerShape(topEnd = 20.dp))
                    .background(Color(0xFFC2B280)),
                contentAlignment = Alignment.Center
            ){
                Text(text = "Rounded Corners Top End Only 20 DP")
            }

            Box(
                Modifier
                    .padding(12.dp)
                    .width(150.dp)
                    .height(150.dp)
                    .clip(CircleShape)
                    .background(Color(0xFFE5AA70)),
                contentAlignment = Alignment.Center
            ){
                Text(text = "Circle Shape")
            }
        }
    }


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