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 Comments

  1. Aziz.cs February 26, 2013 at 8:11 am

    Well done

     
  2. Giancarlo Leonio March 13, 2013 at 8:47 pm

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

     
  3. ace March 28, 2013 at 7:27 am

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

     
  4. simone February 25, 2014 at 5:28 pm

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

     
    • James March 1, 2014 at 2:34 pm

      Did you remove the text in the Toggle button.

       

Leave a Reply

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

 

 

 

Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.