How to create a Custom Toggle Button in android?

By | May 20, 2012

Hello everyone…

In today’s tutorial I will show you how to create a custom toggle button in android. Often in our applications we don’t need a default toggle button, so I will show you how to change that to make a toggle button according to your need.

First I will create a fresh project named “CustomToggleButton” and name the main activity “CustomToggleButtonDemo”.

Now These are the two images that I am using to create the toggle button.

add icon

delete icon

First the layout file main.xml that contains the toggle button.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""


This will create a toggle button.

Now we will make an xml that contains the resource definition that applies when the button toggles and the background of the button.
We will make the button background transparent and for toggle action we will create another xml that contains the “on” and “off” resource for the button.

Create a new file inside the drawable folder and name it “btn_toggle_bg.xml” and copy this code to it.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="">
    <item android:id="@+android:id/background" android:drawable="@android:color/transparent" />
    <item android:id="@+android:id/toggle" android:drawable="@drawable/btn_toggle" />

Now create another xml inside the drawable folder and name it “btn_toggle.xml” and it contains …

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="">
    <item android:state_checked="true" android:drawable="@drawable/add_icon" />
    <item android:state_checked="false" android:drawable="@drawable/delete_icon" />

This means that when the button is on(true) the image will be “add_icon.png” and when “off” the image will be “delete_icon.png”.

Now we are going to write a theme that is to be applied to the toggle button that overrides the default android theme.

Create a new file called “themes.xml” inside the strings folder and copy this code to it.

<?xml version="1.0" encoding="utf-8"?>
<!-- Overwrite the ToggleButton style -->
<style name="Widget.Button.Toggle" parent="android:Widget">
    <item name="android:background">@drawable/btn_toggle_bg</item>
    <item name="android:textOn">Add</item>
    <item name="android:textOff">Del</item>
    <item name="android:disabledAlpha">?android:attr/disabledAlpha</item>

<style name="OurThemeName"  parent="@android:Theme.Black">
    <item name="android:buttonStyleToggle">@style/Widget.Button.Toggle</item>
      <item name="android:textOn"></item>
    <item name="android:textOff"></item>

Please look at the main.xml file where this theme has been applied.


	<strong>style="@style/OurThemeName" </strong>

OK now our custom toggle button is ready. Go on and run it.

Custom toggle button

Custom toggle button

Actually we dont need the activity java file because everything can be done in the xml itself.

Download the complete source code from here.

Website Pin Facebook Twitter Myspace Friendfeed Technorati Digg Google StumbleUpon Premium Responsive

Leave a Reply

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