Skip to content

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

  • by

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.

Android button rounded corners

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

Leave a Reply

Your email address will not be published. Required fields are marked *