Thursday, 12 September 2013

Android Custom Toggle Button Example

Android Custom Toggle Android Custom Switch
  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