Custom button in android

In this blog post, I would like explain how to create a custom Button in Android.

First, create a layout “main.xml” . Now, include the following XML code in “main.xml” :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:background ="#FFFFFF" >


    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" 
        android:paddingBottom="25dip" 
        android:paddingTop="5dip"/>

    <Button
        android:id="@+id/Button01"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="@string/button_text" 
        android:layout_gravity="center_horizontal" 
       
        android:layout_marginBottom="10dp"
        />
    
     <Button
        android:id="@+id/Button02"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
         android:text="@string/button_text" 
        android:layout_gravity="center_horizontal" 
        
        android:layout_marginBottom="10dp"
        />


  </LinearLayout>

Next, create an Activity ” Main.java”. Now, include the following Java code in “Main.java”:

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

public class Main extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Now, we have a button without custom style.
The output will be:

Screenshot_2014-05-02-15-40-26

If you wish to give any custom style to the button, include the following XML code in “style.xml”.

 <style name="btnStyleOrange" parent="@android:style/Widget.Button">
		<item name="android:textSize">15sp</item>
		<item name="android:textStyle">bold</item>
		<item name="android:textColor">#FFFFFF</item>
		<item name="android:gravity">center</item>
		<item name="android:shadowColor">#000000</item>
		<item name="android:shadowDx">1</item>
		<item name="android:shadowDy">1</item>
		<item name="android:shadowRadius">0.6</item>
		<item name="android:background">@drawable/custom_btn_orange</item>
		<item name="android:padding">10dip</item>
	</style>
	
    <style name="btnStyleBlackpearl" parent="@android:style/Widget.Button">
		<item name="android:textSize">15sp</item>
		<item name="android:textStyle">bold</item>
		<item name="android:textColor">#FFFFFF</item>
		<item name="android:gravity">center</item>
		<item name="android:shadowColor">#000000</item>
		<item name="android:shadowDx">1</item>
		<item name="android:shadowDy">1</item>
		<item name="android:shadowRadius">0.6</item>
		<item name="android:background">@drawable/custom_btn_black_pearl</item>
		<item name="android:padding">10dip</item>
	</style>

Next, you have to include the following two XML files (custom_btn_black_orange.xml and custom_btn_black_pearl.xml), inside a “drawable” folder:

custom_btn_black_orange.xml

<?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="3dip" />
             <stroke android:width="1dip" android:color="#c53e2b" />
             <gradient 
               	 android:angle="-90"   
                 android:startColor="#a11005"
                 android:endColor="#d62608"  />            
         </shape>
     </item>
    <item android:state_focused="true">
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#c53e2b" />
             <solid  android:color="#e0341e"/>       
         </shape>
     </item>	
    <item >
        <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#c53e2b" />
             <gradient 
               	 android:angle="-90"   
                 android:startColor="#ff6c52"
                 android:endColor="#e0341e" />            
         </shape>
     </item>
</selector>

custom_btn_black_pearl.xml

<?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="3dip" />
             <stroke android:width="1dip" android:color="#1a1f23" />
             <gradient 
               	 android:angle="-90"   
                 android:startColor="#050505"
                 android:endColor="#394247"  />            
         </shape>
     </item>
    <item android:state_focused="true">
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#1a1f23" />
             <solid  android:color="#394247"/>       
         </shape>
     </item>	
    <item >
        <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#1a1f23" />
             <gradient 
               	 android:angle="-90"   
                 android:startColor="#394247"
                 android:endColor="#051016" />            
         </shape>
     </item>
</selector>

Now, we have a button with custom style.

Screenshot

Screenshot_2014-05-02-14-49-01

Hope this blog post was helpful. Do let me know your feedback.

Leave a Reply

Your email address will not be published. Required fields are marked *