jetpack compose - Button rounded corners

Compose Button Rounded Corners

The Button is a primary component of the android jetpack compose library. A Button is used to perform an action. The widget has an onClick event. We can add a Text composable or any other composable as child elements of the Button. Commonly used Text widget or a Text widget with an icon as Button elements to describe the action to perform on Button click event.

This android jetpack compose tutorial will demonstrate how we can display a rounded corners-shaped Button widget on the app screen. And how we can change the corner radius size or percentage for a Button widget.

We know the Button widget constructor has an argument named ‘shape’, this shape argument accepts a ‘Shape’ type of value. The default value for the ‘shape’ parameter is ‘MaterialTheme.shapes.small’. We can set or change the Button shape using this shape argument. Such as, when we set the value of the ‘shape’ argument to ‘CircleShape’ then it displays a circular-shaped Button widget on the app screen. The ‘RectangleShape’ value indicates a Rectangle-shaped Button widget whose corners are not rounded.

But when we used the ‘shape’ argument value to the ‘RoundedCornerShape()’ function, then it displayed a rounded corners Button widget. We must pass the required argument to the RoundedCornerShape() method. This method’s required parameter is different for the different constructors.

We can pass a value to this function by the dp unit or a value for the percent argument. The dp value makes the Button corners rounded as exactly the dp value provided. And the percent value makes the Button corners rounded as per the percentage provided. This is a common way to make Button corners rounded.

Another way is that, apply a rounded shape to a Button’s specific corners only. Such as only the top end corner or only the bottom end corner and top start corner. We can submit the dp value or percent value to make specified corners rounded. In this kotlin tutorial, we applied a rounded corner shape for the default Button widget, OutlinedButton widget, and Textbutton widget.

The following tutorial code demonstrates to us that, how to use both the dp value and percent value to make a Button rounded corners shape. Here we also make Button specific corner to rounded.

Copy the code into your android studio IDE’s main activity kotlin file and run it on an emulator to see the rounded corners Button we created using the jetpack compose library. A screenshot is displayed at the bottom of the code snippets, look at it to see the result of compiled code.

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.layout.Column
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
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 {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        Column(
            Modifier
                .background(Color(0xFFEDEAE0))
                .fillMaxSize()
                .padding(32.dp),
            verticalArrangement = Arrangement.spacedBy(24.dp)
        ) {
            Button(
                onClick = {
                    // do something here
                },
                shape = RoundedCornerShape(50)
            ) {
                Text(text = "50 Percent Round")
            }

            Button(
                onClick = {
                    // do something here
                },
                shape = RoundedCornerShape(8.dp)
            ) {
                Text(text = "8 dp Round")
            }

            Button(
                onClick = {
                    // do something here
                },
                shape = RoundedCornerShape(
                    topStart = 8.dp,
                    topEnd = 8.dp,
                    bottomStart = 0.dp,
                    bottomEnd = 0.dp
                )
            ) {
                Text(text = "Top Rounded")
            }

            Button(
                onClick = {
                    // do something here
                },
                shape = RoundedCornerShape(
                    topEndPercent = 25,
                )
            ) {
                Text(text = "Top End Rounded")
            }

            TextButton(
                onClick = {
                    // do something here
                },
                colors = ButtonDefaults.textButtonColors(
                    backgroundColor = Color(0xFFFAD6A5)
                ),
                shape = RoundedCornerShape(8.dp)
            ) {
                Text(text = "Rounded Text Button")
            }

            OutlinedButton(
                onClick = {
                    // do something here
                },
                shape = RoundedCornerShape(12.dp)
            ) {
                Text(text = "Rounded Outlined Button")
            }
        }
    }


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