How to get Android Custom Button Shape?

If you’re someone who would like to create your own android custom button shape and style, here is way you can do. We’ve created a custom button shape and shared its tutorial below!

To achieve this, you’ll have to first create a new android drawable resource file.

To create this file, in ‘Android’ section of Project Panel on the left, go to app > res > drawable

Right click on ‘drawable’ folder and select ‘New > Drawable Resource File’

Create a new file named ’rounded_rectangle’

In this new file write the following line of code:

<?xml version="1.0" encoding="utf-8"?>

<shape android:shape="rectangle"

    xmlns:android="http://schemas.android.com/apk/res/android">

    <!--Radius of all four corners-->
    <corners
        android:bottomRightRadius="50dp"
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="50dp"
        android:topRightRadius="10dp"/>

            <!--Stroke size and color-->
            <stroke android:width="3dp"
                android:color="@color/colorAccent" />

            <!--Fill Color of the Button-->
            <gradient android:angle="-90"
                android:startColor="#000000"
                android:endColor="#000000"  />
        </shape>

Once done, go back to your main xml file which contains the button and add following attribute to it:

android:background="@drawable/rounded_rectangle"

To achieve what we have got in the image above, add following lines of code:

   <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="56dp"
        android:textColor="@color/colorAccent"
        android:textSize="17sp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:paddingStart="25dp"
        android:paddingEnd="25dp"
        android:focusable="true"
        android:textAllCaps="false"
        android:background="@drawable/rounded_btn"
        android:text="View Reports"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

Note:

• In case you would like to change the button color, you’ll have to change the android:startColor=”#00000000″ and android:endColor=”#00000000″ attribute in rounded_rectangle.xml file.
• In case you would like to change the stroke size, you’ll have to change the android:width=”3dp” attribute.
• To change the shape of button you’ll have to change the following attributes!

<corners
    android:bottomRightRadius="50dp"
    android:bottomLeftRadius="10dp"
    android:topLeftRadius="50dp"
    android:topRightRadius="10dp"/>

Interested in adding more customization to your button? See here Android Button Design, 6 new Style!