Android Button State Change Example

Android Button represents a push button and it is a sub class TextView ,In this post we will see how to decorate default button widget by add drawable xml resource which performs state change of button i.e ( focused , pressed )

Drawable Resource XML

file : button_default.xml

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

    <gradient
        android:angle="270"
        android:endColor="#2f6699"
        android:startColor="#449def" />

    <stroke
        android:width="1dp"
        android:color="#2f6699" />

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

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

</shape>

file : button_focused.xml

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

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

    <solid android:color="#6B7FFF" />

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

    <size
        android:height="60dp"
        android:width="270dp" />

</shape>

file : button_pressed.xml

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

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

    <gradient
        android:angle="45"
        android:centerColor="#386AE0"
        android:centerX="35%"
        android:endColor="#2F7999"
        android:startColor="#36EBFF"
        android:type="linear" />

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

    <size
        android:height="60dp"
        android:width="270dp" />

</shape>

file : buttonselector.xml

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

     <item android:drawable="@drawable/button_default"></item>

    <item android:drawable="@drawable/button_pressed"
               android:state_pressed="true">
    </item>

    <item android:drawable="@drawable/button_focused"  
               android:state_focused="true">
    </item>

</selector>

Main XML Layout

 file : activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="181dp"
        android:background="@drawable/buttonselector"
        android:text="Button"
        android:textColor="#ffffff"
        android:textSize="25dp" />

</RelativeLayout>

Main Activity

file : MainActivity.java

package com.pavan.buttonstatedemo;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

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

}

Download Code