Android Compose – Button shape

Android Compose – Button Shape

In this tutorial, we will learn how to set the shape of a Button in Android Compose.

To set the shape of a Button in Android Jetpack Compose, set shape parameter of the Button with the required Shape object.

Button(
    shape = CircleShape,
    onClick = {},
) {
    Text("Submit")
}

Example

In this example, we have UI with a Button. The button has the text Submit. And we set the shape of this Button to CircularShape.

Create a Project in Android Studio with empty compose activity template, and modify MainActivity.kt file as shown in the following.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .padding(20.dp)
                        .fillMaxWidth()) {
                    Button(
                        shape = CircleShape,
                        onClick = {},
                    ) {
                        Text("Submit")
                    }
                }
            }
        }
    }
}

Screenshot

Button – Rectangle Shape

Now, let us change the shape of the button to rectangle by assigning shape parameter with RectangleShape.

Code for Button

Button(
    shape = RectangleShape,
    onClick = {},
) {
    Text("Submit")
}

Screenshot

Button – Cut Corner Shape

To change the shape of the button to “Cut Corner”, assign shape parameter with CutCornerShape object with a specific percent of cut from the corners.

Code for Button

Button(
    shape = CutCornerShape(percent = 25),
    onClick = {},
) {
    Text("Submit")
}

Screenshot

Button – Rounded Corner Shape

Now, let us change the shape of the button to rounded corners by assigning shape parameter with RoundedCornerShape object with corners rounded to specified length.

Code for Button

Button(
    shape = RoundedCornerShape(10.dp),
    onClick = {},
) {
    Text("Submit")
}

Screenshot

Conclusion

In this Android Jetpack Compose Tutorial, we learned how to set shape of a Button using its shape parameter.