Custom Button with ShapeDrawables

[embedyt] https://www.youtube.com/watch?v=Z1w3y0saKjY[/embedyt]

In this video we will learn how to create a custom button that uses XML shapes to replace the background of the default Android button.
For this we first create 3 different XML ShapeDrawables and define a background color (solid or gradient), a padding and an outer line (stroke) around the shape, which we can also make dashed. Our shape can be an oval/circle or a rectangle. In the latter case we can also add rounded corners by setting a radius on them.
Then we put these different drawables into a StateListDrawable, where we can assign different states to them, like state_enabled, state_pressed and so on.
If we want to set this custom style only on single buttons, we just use the android:background attribute on the View directly. If we want to apply it globally to all buttons in our app, we can create a custom button theme that extends Widget.AppCompat.Button and set it as the buttonStyle on our AppTheme. In this custom button theme we can also change more attributes, like the textColor or textAppearance of our button. Optionally we can deactivate the default StateListAnimator by setting android:stateListAnimator to @null to disable the shadow and animation of the default Lollipop AppCompatButton.

Show less

button_default.xmlbutton_pressed.xmlbutton_disabled.xmlcustom_button.xmlactivity_main.xmlMainActivity.javastyles.xml

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

    <gradient
        android:angle="90"
        android:endColor="#6ca752"
        android:startColor="#9dcf87" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

    <stroke
        android:width="2dp"
        android:color="#FFF" />
    <!--android:dashGap="1dp"
    android:dashWidth="4dp"-->

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

</shape>

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

    <gradient
        android:angle="90"
        android:endColor="#86c66a"
        android:startColor="#b0de9d" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

    <stroke
        android:width="2dp"
        android:color="#FFF" />
    <!--android:dashGap="1dp"
    android:dashWidth="4dp"-->

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

</shape>

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

    <solid android:color="#b6b7b5" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

    <stroke
        android:width="2dp"
        android:color="#FFF" />
    <!--android:dashGap="1dp"
    android:dashWidth="4dp"-->

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

</shape>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:drawable="@drawable/button_pressed" />
    <item
        android:state_enabled="false"
        android:drawable="@drawable/button_disabled" />
    <item
        android:drawable="@drawable/button_default" />
</selector>

<?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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/custom_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Press me" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Press me too" />

    <Switch
        android:id="@+id/switch_enable_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Enabled" />

</LinearLayout>

package com.codinginflow.custombuttonexample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.Switch;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final Button customButton = findViewById(R.id.custom_button);
        Switch switchEnableButton = findViewById(R.id.switch_enable_button);

        customButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Click", Toast.LENGTH_SHORT).show();
            }
        });

        switchEnableButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    customButton.setEnabled(true);
                } else {
                    customButton.setEnabled(false);
                }
            }
        });
    }
}

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="buttonStyle">@style/CustomButton</item>
    </style>

    <style name="CustomButton" parent="Widget.AppCompat.Button">
        <item name="android:background">@drawable/custom_button</item>
        <item name="android:textColor">#FFF</item>
        <item name="android:stateListAnimator">@null</item>
    </style>

</resources>