Android Custom Button Example Tutorial

1. The purpose of this tutorial is to create custom button in android with custom background colors. The result will be like above image.
2. There is two way to create such a buttons in android by using images and by using xml file which i have describe here.
3. Android provides default UI buttons with default background sometimes we need some more custom design so it is look batter in any application User Interface.
4. Follow below step by step tutorial to create custom button with selected unselected state by xml file.

1. Create new Android Project call Android Custom Buttons and create btn1.xml file in res/drawable folder and modify as below.

    <?xml version="1.0" encoding="utf-8"?>  
    <selector xmlns:android="http://schemas.android.com/apk/res/android">  
      
      <item android:state_pressed="true"><shape android:shape="rectangle">  
          <corners android:radius="15dp" />  
      
          <solid android:color="#0097AA" />  
      
          <padding android:bottom="15.0dip" android:left="15.0dip" android:right="15.0dip" android:top="15.0dip" />  
      
          <stroke android:width="2dip" android:color="#FFFFFF" />  
        </shape></item>  
      <item android:state_pressed="false"><shape android:shape="rectangle">  
          <corners android:radius="15dp" />  
      
          <solid android:color="#0097AA" />  
      
          <padding android:bottom="15.0dip" android:left="15.0dip" android:right="15.0dip" android:top="15.0dip" />  
      
          <stroke android:width="2dip" android:color="#FFFFFF" />  
        </shape></item>  
    </selector>  
   

   By using this btn1.xml file we create one button by using selector in that we have taken two lt;itemgt; tags one for selected and one for unselected you can set both different color in this file for both the state. stroke property is for displaying border of buttons also you can set any type of color in stroke.
   
   
2. Now it time to use btn1.xml file so look at your main.xml file and modify as per below code.

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
      xmlns:tools="http://schemas.android.com/tools"  
      android:layout_width="fill_parent"  
      android:layout_height="fill_parent"  
           >  
      
      <ScrollView  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent" >  
      
        <RelativeLayout  
          android:layout_width="match_parent"  
          android:layout_height="match_parent" >  
      
          <Button  
            android:id="@+id/btn1"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:layout_alignParentTop="true"  
            android:layout_centerHorizontal="true"  
            android:layout_marginBottom="5dp"  
            android:layout_marginLeft="5dp"  
            android:layout_marginRight="5dp"  
            android:layout_marginTop="20dp"  
            android:background="@drawable/btn1"  
            android:gravity="center_horizontal"  
            android:onClick="btnClick"  
            android:text="@string/btn1_name" />  
      
        </RelativeLayout>  
      </ScrollView>  
      
    </RelativeLayout>  
   

3. Now Modify your MainActivity.java file as per below code.
   

    package com.idroid.custombuttons;  
      
    import android.app.Activity;  
    import android.os.Bundle;  
    import android.view.View;  
    import android.widget.Toast;  
      
    public class MainActivity extends Activity {  
      
         @Override  
         public void onCreate(Bundle savedInstanceState) {  
              super.onCreate(savedInstanceState);  
              setContentView(R.layout.main);  
      
         }  
      
         public void btnClick(View view) {  
              switch (view.getId()) {  
              case R.id.btn1:  
                   showToast("Button1 Action");  
                   break;  
              default:  
                   showToast("");  
                   break;  
              }  
         }  
      
         private void showToast(String name) {  
              Toast.makeText(this, "Button " + name + " is pressed!!!",  
                        Toast.LENGTH_SHORT).show();  
      
         }  
    }  
      
   

4. Now compile and run your project on Andoid simulator you can see first button display in below layout.If you want more buttons you can create that much xml files in drawable folder add you can create same layout like display in layout or you can download code from below link.

Download Source Code :Android_CustomButtons_Demo.zip