Friday, July 29, 2016

android - How to create a custom Button

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#c9d7cd"
    >
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Custom Button"
        style="@style/CustomButton"
        android:layout_gravity="center"
        />
</android.support.design.widget.CoordinatorLayout>
values/styles.xml

<resources>

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

        <!-- Important for CoordinatorLayout  -->
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="CustomButton" parent="@android:style/Widget.Button">
        <item name="android:gravity">center_vertical|center_horizontal</item>
        <item name="android:textColor">#fff</item>
        <item name="android:background">@drawable/states_custom_button</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:focusable">true</item>
        <item name="android:clickable">true</item>
    </style>

</resources>
drawable/states_custom_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/custom_button_pressed"
        />
    <item
        android:state_focused="true"
        android:state_enabled="true"
        android:drawable="@drawable/custom_button_focused"
        />
    <item
        android:state_enabled="true"
        android:drawable="@drawable/custom_button_enabled"
        />
</selector>
drawable/custom_button_enabled.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <gradient
        android:startColor="#5567c4"
        android:endColor="#6a80f1"
        android:angle="90"
        />
    <padding
        android:left="15dp"
        android:top="15dp"
        android:right="15dp"
        android:bottom="15dp"
        />
    <stroke android:color="#384380" android:width="1dp"/>
    <corners android:radius="8dp"/>
</shape>
drawable/custom_button_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <gradient
        android:startColor="#6073d9"
        android:endColor="#798efa"
        android:angle="90"
        />
    <padding
        android:left="15dp"
        android:top="15dp"
        android:right="15dp"
        android:bottom="15dp"
        />
    <stroke android:color="#ff1d1d" android:width="1dp"/>
    <corners android:radius="8dp"/>
</shape>
drawable/custom_button_focused.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <gradient
        android:startColor="#5567c4"
        android:endColor="#6a80f1"
        android:angle="90"
        />
    <padding
        android:left="15dp"
        android:top="15dp"
        android:right="15dp"
        android:bottom="15dp"
        />
    <stroke android:color="#22ac30" android:width="1dp"/>
    <corners android:radius="8dp"/>
</shape>