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="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
<ToggleButton 
	android:background="@drawable/btn_toggle_bg"
	style="@style/OurThemeName" 
	android:checked="true"
	android:id="@+id/ToggleButton01" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content">
</ToggleButton>

</LinearLayout>

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="http://schemas.android.com/apk/res/android">
    <item android:id="@+android:id/background" android:drawable="@android:color/transparent" />
    <item android:id="@+android:id/toggle" android:drawable="@drawable/btn_toggle" />
</layer-list>

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="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/add_icon" />
    <item android:state_checked="false" android:drawable="@drawable/delete_icon" />
</selector>

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"?>
<resources>
<!-- 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>

<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>
</style>
</resources>

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

Here

<ToggleButton 
	android:background="@drawable/btn_toggle_bg"
	<strong>style="@style/OurThemeName" </strong>
	android:checked="true"
	android:id="@+id/ToggleButton01" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content">
</ToggleButton>

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.

5 thoughts on “How to create a Custom Toggle Button in android?

  1. Giancarlo Leonio

    Hey James, thanks for this helpful tutorial on creating a custom toogle button in android!

    Reply
  2. ace

    where can i find the main.xml? us it on systemui or in framework-res

    Reply
  3. simone

    I follow this tutorial without using the theme. on both images i visualize “on” “off”.Do you know why?

    Reply

Leave a Reply to ace Cancel reply

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