jetpack compose - Rounded corner shape example

Compose Rounded Corner Shape

Jetpack Compose is an Android development modern toolkit that is used for building native android applications in a declarative syntax. In a Compose application, android developers need to write less code than the old XML-based layout coding style.

In this android application development tutorial, we will demonstrate how we can create a rounded corner shape and apply it to a widget. We can create rounded corners for all sides of a widget or any specific side of a widget. Such as in a Box widget we can make 24 dp rounded corners for all of its sides. We can make rounded it top end side only. Even we can make rounded corner top start and bottom end sides only. We can apply a widget’s specific corner to a specific amount of rounded such as top end corner 12 dp and top start corner 8 dp. This we can easily implement inside a jetpack compose application.

Now let us describe the coding we wrote in this tutorial to make a rounded corners widget. In our composable function at first, we create a shape instance and its value to a RoundedCornerShape with a 12 dp corner radius. Next, we put a Column widget in our composable function and put two Box widgets inside it.

In the first Box widget’s clip modifier, we put our pre-initialized shape instance, so the Box will render as a 12 dp radius rounded corners Box. For the other Box widget, we put a RoundedCornerShape to the clip modifier that radius is 16 dp for only Box’s top end corner. Other corners are not rounded. RoundedCornerShape has four available parameters topStart, topEnd, bottomEnd, and bottomStart.

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.RoundedCornerShape
import androidx.compose.runtime.Composable
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 {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val shape = RoundedCornerShape(12.dp)

        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(Color(0xFFFFFAF0))
                .padding(16.dp)
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentSize(Alignment.Center)
            ) {
                Box(
                    modifier = Modifier
                        .size(275.dp, 130.dp)
                        .clip(shape)
                        .background(Color(0xFFA2006D))
                )
            }

            Spacer(modifier = Modifier.requiredHeight(32.dp))

            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentSize(Alignment.Center)
            ) {
                Box(
                    modifier = Modifier
                        .size(275.dp, 130.dp)
                        .clip(RoundedCornerShape(topEnd = 16.dp))
                        .background(Color(0xFF5FA777))
                )
            }
        }
    }


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