Categories
Android

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!

Project view.

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>
The preview of the stroke.

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!

The preview with a stroke of 40dp.

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>
The Button with padding.

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>
Setting a width, text color and background of our Button.

By Daniel Malone

Daniel Malone is an Android Developer in Austin, Texas. He enjoys writing code, whether it be HTML, CSS, JavaScript, PHP, Java, XML or Kotlin. Daniel started writing code at age 12. By the time he was 15, he had a technology news website that received about 200 visitors a day. His first computer was a Dell Dimension 3000, with an 80GB hard drive, 512MB RAM and a broken DVD drive.