Android Toggle Button Example

 

Android Toggle Button is an interface which has 2 states i.e. for ON  &  OFF condition of our Button. Android Toggle Button is extensively used to indicate state of functionalities like ON/OFF , enable/disable , active/de-active , etc. Android Toggle Button displays checked/unchecked states as a button with a ‘light‘ indicator.

 

Similar to Buttons, Toggle Buttons can also be implemented to listen user clicks in 2 ways.

  1. Creating Button’s onClick-Listener directly from java File (MainActivity.java).
  2. Creating Button click handler method in java File (MainActivity.java) and adding its reference to our button in XML Layout file (activity_main.xml). We will be using this 2nd method for simplicity.

 



Download
Source Code : ToggleButton.zip


Now Let us work on Project : (Refer – Configuring Existing AndroidStudioProject) ToggleButton which you might have downloaded from above or you can follow the scripts below by copying it to implement in your Project. To launch Downloaded project, Extract the zip, copy it into AndroidStudioProjects. Now from Android Studio click open Existing Android Studio Project and select the path to extracted file we just copied in AndroidStudioProjects directory. If Sync SDK path prompt comes just click OK and you are ready to work. If still you get error check for AndroidStudioProjects/ToggleButton/app/build.gradle , it will contain different SDK Version. Change it to SDK Version which you have.

 

 

1. activity_main.xml : Layout file

Explaining above Code Separately :

  • Line 9 We have declared Toggle Button Inside our RelativeLayout with some of its properties like we have assigned a unique id to it, assigned layout height-width to it, aligned it to centre.
  • Line 15  onClick-handler method links method which we have declared in our MainActivity.java file. So whenever we click on this Toggle Button tgl_btn_click method from Java file will be called.
  • Line 16 android:checked=”true” makes our Toggle Button checked i.e. ON by default when we launch our App.
  • Line 17-18 Over here we have specified Toggle Button text which will be displayed when we change our Toggle Button ON/OFF state.

 

 

2. MainActivity.java

Explaining above Code :

  • Line 11 & 18 Initially we have declared our Toggle Button & linked with that of our Layout XML(activity_main.xml) file so that we can perform operations on it from MainActivity.java file.
  • Line 22  tg_btn1.toggle()  is used to change Toggle Button ON/OFF state programmatically. Try it by removing the comment. So far our Toggle Button was starting in ON state, whereas after we remove this comment it will be changed to OFF state.
  • Line 27 It is our onclick-handler method which will be invoked when we click on our Toggle Button. We have passed an instance of View class as a parameter since we are working on UI-thread.
  • Line 30 Over here we check for Toggle Button state – ON/OFF, inside our if-condition.
  • Line 32,36 We have placed Toast which will prompt us for the current state of Toggle Button.

 

 

Final Output :

Android Toggle Button Example Output

 

Do It Yourself :

  • Implement the toggle() method which we have commented (Line 22 MainActivity.java). Also try adding a simple button, when we click on this button it should change state of  Toggle button. For this inside Button’s click-handler method add toggle() method which will change state of the toggle button.
  • Implement the project without property android:checked=”true” (Refer Line:15 of our activity_main.xml).
  • Change the ON/OFF state text (Refer Line:16-17 of our activity_main.xml).

 

Trouble-Shooting :

  • App Crashes (Error says – java.lang.IllegalStateException: Could not find a method for onClick handler on view class )
    Check that you are not working outside of UI thread i.e. you should be working inside onCreate() or onStart() or onResume() or the onClick handler method has been passed View argument i.e. handler_method(View v) or see whether the click-handler method is not missing in our MainActivity.java.

 

Report Errors + Bugs & Become Insider for Nestedif.com

We would like to hear you, if you find any error or misspelled phrase while reading our tutorials. By reporting mistakes through email to insider@nestedif.com you could help other peers.