How to Android button rounded corners | Radius, ripple, corners, design?

Do you want to make the corners of a button round in Android? In this tutorial, you will learn an easy way to achieve this in Android.

To create an Android button rounded corners have to use a new XML file. This new XML file will be inside a drawable folder. To change the corners of all sides of the button need only one attribute in the drawable XML file.

android:radius="15dp"

To change one or two or three corners, you have to use the following attributes:-

android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp

Build an Android app with rounded buttons designs:

Here is step by step creating a rounded corner button with background color in android.

Step 1. Create a new project “Build Your First Android App in Kotlin“

Step 2. Create a new XML file and add the below code.

Filename: rounded_button.xml

Location: res/drawable/rounded_button.xml

Step 3. Add following code in “activity_main.xml“

Adding a Button in UI.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_button"
        android:text="All corners RoundedButton"
        android:textColor="#fff"
        android:layout_margin="10dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"/>

</LinearLayout>

Step 7. Now Run the application, in an emulator or on your Android device

Output screenshot Android corner button example:

Download source code of button design from an Activity in Kotlin

https://github.com/EyeHunts/AndroidButtonRoundedCorners

Q: What is an android material button and how to set the corners (radius) of it?

Answer: Material Button is a customizable button component with updated visual styles

How to Use

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_label_enabled"/>

<com.google.android.material.button.MaterialButton
    android:id="@+id/disabled_material_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:enabled="false"
    android:text="@string/button_label_disabled"/>

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_unelevated_button"
    style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/unelevated_button_label_enabled"/>

Read more official document link: https://material.io/develop/android/components/material-button/

Q: How to create a circle button in android?

Answer: Same as the above example, use XML drawable file:

Save the following contents as round_button.xml in drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

Android Material Effect: Although FloatingActionButton is a better option, If you want to do it using XML selector, create a folder drawable-v21 in res and save another round_button.xml there with the following XML.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#c20586">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
</ripple>

And set it as background of Button in xml like this:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

Important:

1. To show all state: -enabled, disabled, highlighted, etc, you have to use selector as described here.
2. You’ve to keep both files in order to make the drawable backward-compatible. Otherwise, you’ll face weird exceptions in the previous android version

Source: https://stackoverflow.com/questions/9884202/custom-circle-button

Q: How to create Android button rounded corners programmatically?

Answer: Here code for how to create GradientDrawable shape programmatically.

GradientDrawable shape = new GradientDrawable();
shape.setShape(GradientDrawable.RECTANGLE);
shape.setColor(Color.RED);
shape.setStroke(3, Color.YELLOW);

And change the radius for all corners of the button.

shape.setCornerRadius(15);

or Change the radius for specific corners of the button.

shape.setCornerRadii(new float[] { 8, 8, 8, 8, 0, 0, 0, 0 });

And finally, use this drawable as a background as of button widget:

view.setBackgroundDrawable(shape);

Note: A button design topic is UI design. in this tutorial, we used a Kotlin programming language in Main Activity and will work the same with java code.

Do comment if you have any doubts and suggestions on this tutorial.

Note: This example (Project) is developed in Android Studio 3.3.2. Tested on Android 9 ( Android-P), compile SDK version API 28: Android 9.0 (Pie)
MinSdkVersion=”25″
TargetSdkVersion=”28″
Coding in Kotlin