How to add rounded corners to buttons

Making rounded corners to a Button widget can add a nice touch to your UI. Fortunately, rounded corners aren't that hard to make. Let's begin!

Right click on the drawable folder and select New -> Drawabe resource folder. Then name the drawable image custom_rounded_corners.

Drawable resource folder in Android Studio.

Write the following code into the editor, then open the Preview pane on the right side of Android Studio to see a preview of the shape.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="3dp"
        android:color="#F00" />
</shape>

We now see a shape with a solid red stroke. But it isn't rounded. Let's change that now!

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="3dp"
        android:color="#F00" />
    <corners android:radius="40dp" />
</shape>

By adding a stroke, we should see rounded corners!

To use the rounded corners, all we need to do is set the background attribute with the rounded corners drawable resource file. Here's an example:


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_rounded_corners"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

The background attribute on our Button widget.

Thankfully, we can add padding to the button. That will give it space so that the Hello World text isn't cut off.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="3dp"
        android:color="#F00" />
    <corners android:radius="40dp" />

    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
    
</shape>

If you don't want a stroke, but instead want a solid color, edit the drawable to remove the stroke and add a solid tag.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="40dp" />

    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />

    <solid android:color="#F00" />

</shape>