Android Custom Buttons

In this tutorial, we’ll be customizing the Buttons in our Android Application. If you aren’t aware of Android Buttons, check out this tutorial before proceeding. We’ll be setting shapes on our buttons in Xml.

• Button 1

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners android:radius="4dp" />
    <stroke android:width="4dp" android:color="#CCFFFF" />
    <gradient
        android:startColor="#0078a5"
        android:endColor="#CCFFFF"
        android:gradientRadius="250"
        android:type="radial"
        />
    <padding android:left="10dp" android:top="10dp"
        android:right="10dp" android:bottom="10dp" />
</shape>

• Button 2

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomRightRadius="10dp"
        android:radius="40dp" />
    <gradient
        android:angle="45"
        android:centerX="float"
        android:centerY="float"
        android:endColor="#01f1fa"
        android:gradientRadius="integer"
        android:startColor="#0189ff"
        android:type="linear" />

    <!--If your shape requires only one solid color-->
    <!--<solid
        android:color="#FFFFFF" />-->
    <size
        android:width="82dp"
        android:height="82dp" />

    <!--Use android:dashWidth="2dp" and android:dashGap="2dp"
    to add dashes to your stroke-->
    <stroke
        android:width="2dp"
        android:color="#E91E63" />
    <!--If you want to add padding-->
    <!-- <padding
         android:left="10dp"
         android:top="20dp"
         android:right="40dp"
         android:bottom="8dp" />-->

</shape>

• Button 3

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

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
            <corners
                android:bottomRightRadius="15dp"
                android:bottomLeftRadius="0dp"
               />
        </shape>

    </item>

</selector>

• Button 4

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <gradient
                android:startColor="@color/colorPrimary"
                android:centerColor="@color/colorAccent"
                android:endColor="@color/colorAccent" />
            <corners android:radius="2dp" />
        </shape>
    </item>
</selector>

• Button 5

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:endColor="@color/colorPrimary"
        android:gradientRadius="200dp"
        android:type="radial"
        android:startColor="@color/colorAccent" />

    <corners android:radius="@dimen/_10sdp" />

    <stroke
        android:width="0dp"
        android:color="@android:color/black" />

</shape>

• Button 6

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="16dp"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent" />
    <corners android:radius="10dp" />
    <solid android:color="@android:color/white"/>
</shape>

• Button 7

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- Normal state -->
    <item android:state_pressed="false">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <stroke android:width="5px" android:color="@color/colorAccent" android:dashGap="3dp" android:dashWidth="3dp" />
        </shape>
    </item>
    <!-- Pressed state -->
    <item android:state_pressed="true" >
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <stroke android:width="5px" android:color="@color/colorAccent" android:dashGap="5dp" android:dashWidth="5dp" />
        </shape>
    </item>
</selector>

• Button 8

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="@dimen/_5sdp"/>
    <gradient
        android:angle="90"
        android:endColor="@color/colorAccent"
        android:startColor="@color/colorPrimary"
        android:type="linear" />

</shape>

• Button 9

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners
        android:radius="20dp" />

    <solid
        android:color="@android:color/white" />

    <stroke
        android:color="@color/colorAccent"
        android:width="2dp" />

    <size
        android:width="165dp"
        android:height="40dp" />

</shape>

• Button 10

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- Colored rectangle-->
    <item>
        <shape android:shape="rectangle">
            <size
                android:width="120dp"
                android:height="30dp" />
            <solid android:color="@color/colorAccent" />
            <corners android:radius="0dp"/>
        </shape>
    </item>

    <!-- This rectangle for the top arrow edge -->
    <!-- Its color should be the same as the layout's background -->
    <item
        android:top="-45dp"
        android:bottom="40dp"
        android:right="-55dp">
        <rotate
            android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#A51B1B" />
            </shape>
        </rotate>
    </item>

    <!-- This rectangle for the lower arrow edge -->
    <!-- Its color should be the same as the layout's background -->
    <item
        android:top="95dp"
        android:bottom="-40dp"
        android:right="-70dp">
        <rotate
            android:fromDegrees="-45">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>

</layer-list>