Custom Buttons in Android

Android applications make use of so many UI components, out of those some can be customized as per our need. In this tutorial, we will learn about custom Buttons in very few steps. 

Two shapes we will see in this Tutorial.

1. Rounded Corner Button

2. Circle Shape Button.

First of all, we will see how to create rounded corner Button

Step 1: After creating Android Project create XML file under res => drawable folder and give a name  rounded_corner_bg.xml and paste below code.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <!-- you can use any color you want -->
    <solid android:color="#00BCD4"/>
    <corners android:radius="40dp"/>

</shape>

Step 2: Open activity_main.xml file and paste below code

<?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:gravity="center"

    android:layout_height="match_parent">

    <Button

        android:id="@+id/button"

        android:layout_width="300dp"

        android:layout_height="70dp"

        android:text="Button"

        android:textStyle="bold"

        android:textSize="20sp"

        android:textColor="#ffffff"

        android:background="@drawable/rounded_corner_bg"/>

</LinearLayout>

wohho done!!! 👍...you will see the following shape .

So we are done with the first shape. Now let's proceed for the next shape i.e Circle shape Button

Step 1: Create XML file under res => drawable folder and give a name   circle_shape_bg.xml  and paste below code.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">            
            <solid android:color="#87CEEB"/>
            <size android:width="250dp" android:height="250dp"/>
        </shape>
    </item>

</selector>

Step 2: Open activity_main.xml file and paste below code

<?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:gravity="center"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:textStyle="bold"
        android:textSize="20sp"
        android:textColor="#ffffff"
        android:background="@drawable/circle_shape_bg"/>

</LinearLayout> 

wohho done!!! 👍...you will see the following shape .

 

Thank You.✌