Android Custom Toggle Button Example

1. Toggle button is allowed to change setting between two state.
2. Today's Tutorial we show you how to create Custom Toggle Button in Android and how to change their state and store it in any variable.

1. Create new Android Project call Custom Toggle Button and create togglebutton.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:drawable="@drawable/switch_on" android:state_checked="true"/>  
      <item android:drawable="@drawable/switch_off" android:state_checked="false"/>  
      <item android:drawable="@drawable/switch_off"></item>  
      
    </selector>  
   

2. Now, You need two images on and off state and give name switch_off and switch_on and put in res/drawable folder.And modify main.xml file take ToggleButton and TextView for display on and off state.

    <?xml version="1.0" encoding="utf-8"?>  
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
      android:layout_width="fill_parent"  
      android:layout_height="fill_parent"  
      android:background="#345334"  
      android:orientation="vertical" >  
      
      <ToggleButton  
        android:id="@+id/toggle"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_centerHorizontal="true"  
        android:layout_centerVertical="true"  
        android:background="@drawable/toggleswitch"  
        android:button="@null"  
        android:textOff=""  
        android:textOn="" />  
      
      <TextView  
        android:id="@+id/tvstate"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_below="@+id/toggle"  
        android:layout_centerHorizontal="true"   
        android:layout_marginTop="20dp"  
        android:textColor="#FFFFFF"  
        android:textAppearance="?android:attr/textAppearanceLarge" />  
      
      
    </RelativeLayout>  
   

3. For getting toggle switch state need to understand setOnCheckedChangeListener() method. This method is executed when the ToggleButton State change from on to off and visa vars. For that you need to modify MainActivity.java as below.

    package com.idroid.toggleswitch;  
      
    import android.app.Activity;  
    import android.os.Bundle;  
    import android.widget.CompoundButton;  
    import android.widget.CompoundButton.OnCheckedChangeListener;  
    import android.widget.TextView;  
    import android.widget.ToggleButton;  
      
    public class MainActivity extends Activity {  
         ToggleButton toggleButton;  
      TextView stateOnOff;  
         @Override  
         public void onCreate(Bundle savedInstanceState) {  
              super.onCreate(savedInstanceState);  
              setContentView(R.layout.main);  
      
              toggleButton = (ToggleButton) findViewById(R.id.toggle);  
              stateOnOff=(TextView)findViewById(R.id.tvstate);  
              stateOnOff.setText("OFF");  
              toggleButton.setOnCheckedChangeListener(new OnCheckedChangeListener() {  
      
                   @Override  
                   public void onCheckedChanged(CompoundButton buttonView,  
                             boolean isChecked) {  
                          
                        if(isChecked){  
                             stateOnOff.setText("On");  
                        }else{  
                             stateOnOff.setText("Off");  
                        }  
      
                   }  
              });  
         }  
    }  
   

4. Now Build and run project in Simulator you can see the below like output and when click on switch TextView text will be change.

Download Source Code :Android_Custom_Toggle_Button.rar