Custom Button Using XML

1. Create a custombuttonlayout.xml file in the drawable folder


Selector: this element surrounds the entire xml. It defines this drawable as a selecter (e.g. buttons, list rows, or anything that can be "selected")


Items: There are three buttons states that must be defined: pressed, focused, normal. However, there are a total of seven states that can be defined(pressed, focused, selected, checkable, checked, enabled, and window_focused).These are defined as three separate "items". Due to the nature of the way java programs are read (basically from the top down) you need to define items in this specific order, with pressed first, focused next, and normal last to get the buttons to display correctly.


Gradient: Android buttons typically have a highlight/lowlight gradient, so you should define two colors, and the angle of the "shadow".


Stroke: I think this defines the outline style of the button? Not too sure...


Corners: creates a rounded button corner. The default android radius value is "5dp".


Padding: This defines the blank space between the button text and the button borders.


custombuttonlayout.xml



<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:state_pressed="true">
    <shape>
      <gradient
        android:startColor="#FFFF40"
        android:endColor="#FFFFC0"
        android:angle="270" />
      <stroke
        android:width="1dp"
        android:color="#000000" />
      <corners
        android:radius="5dp" />
      <padding
        android:left="10dp"
        android:top="15dp"
        android:right="10dp"
        android:bottom="15dp" />
    </shape>
  </item>
  <item
    android:state_focused="true">
    <shape>
      <gradient
        android:endColor="#8080FF"
        android:startColor="#C0C0C0"
        android:angle="270" />
      <stroke
        android:width="1dp"
        android:color="#4A494A" />
      <corners
        android:radius="5dp" />
      <padding
        android:left="10dp"
        android:top="15dp"
        android:right="10dp"
        android:bottom="15dp" />
    </shape>
  </item>
  <item>
    <shape>
      <gradient
        android:endColor="#8080FF"
        android:startColor="#C0C0C0"
        android:angle="270" />
      <stroke
        android:width="1dp"
        android:color="#000000" />
      <corners
        android:radius="5dp" />
      <padding
        android:left="10dp"
        android:top="15dp"
        android:right="10dp"
        android:bottom="15dp" />
    </shape>
  </item>
</selector>




2. In the main.xml layout when you insert a button that you want to apply the layout to:


Define the button background source as the drawable/custombuttonlayout.xml from above.


excerpt from main.xml:



<Button
          android:layout_width="wrap_content"
          android:text="Sample Text"
          android:id="@+id/Button01"
          android:layout_height="wrap_content"
          android:background="@drawable/custombuttonlayout"></Button>






Resources:


1) http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList


2) http://developer.android.com/guide/topics/resources/color-list-resource.html


3) http://developer.android.com/reference/android/widget/Button.html


4) http://androiddrawableexplorer.appspot.com/


5) http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape