Android ToggleButton Example

android.widget.ToggleButton class is used to implement the toggle button in the android application. This article will show you two examples of how to use it.

1. Example Overview.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/OCfFwznztGc

1. The above video is the example screen effect. When clicking ToggleButton, the first example will change the other two buttons’ direction. The second example will turn the light on or off. They are all implemented with android.widget.ToggleButton.
2. There are the following core files in the above two examples.
3. activity_toggle_button.xml: This is the layout file that contains all the UI components.
4. ToggleButtonActivity.java: This is the activity java file that uses the activity_toggle_button.xml layout file and manipulates the UI components in it.
5. Below are the four images that are used in the second turn light on/off example.
   
   
6. If you are not familiar with android image manipulation, please read the article How To Add Images In Android Studio Drawable Folder.

2. activity_toggle_button.xml

1. Please note the below android.widget.ToggleButton properties.
2. textOff: Button text when the toggle button is not checked.
3. textOn: Button text when the toggle button is checked.
4. checked: Set whether the toggle button is checked or not.
5. background: Toggle button background image.
6. activity_toggle_button.xml

   <?xml version="1.0" encoding="utf-8"?>
   <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context="com.dev2qa.example.ToggleButtonActivity">
   
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical">
   
           <!-- ToggleButton example 1, change button direction. -->
           <TextView
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="ToggleButton Example One"
               android:textSize="30sp"/>
   
           <LinearLayout
               android:id="@+id/linearLayout1"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:orientation="vertical"
               tools:layout_editor_absoluteY="8dp"
               tools:layout_editor_absoluteX="8dp">
   
               <ToggleButton
                   android:id="@+id/toggleButtonLayout"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:textOff="Horizontal Layout"
                   android:textOn="Vertical Layout"/>
   
               <LinearLayout
                   android:id="@+id/toggleButtonTestlayout"
                   android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:orientation="horizontal">
   
                   <Button
                       android:id="@+id/button2"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_weight="1"
                       android:text="Submit" />
   
                   <Button
                       android:id="@+id/button"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_weight="1"
                       android:text="Reset" />
               </LinearLayout>
           </LinearLayout>
   
           <!-- ToggleButton example 2, turn light on / off. -->
           <TextView
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="ToggleButton Example Two"
               android:textSize="30sp"/>
           <LinearLayout
               android:id="@+id/linearLayout2"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:orientation="vertical"
               tools:layout_editor_absoluteY="8dp"
               tools:layout_editor_absoluteX="8dp">
   
               <ToggleButton
                   android:id="@+id/toggleButtonTurnLight"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:textOff=""
                   android:textOn=""
                   android:text=""
                   android:background="@drawable/toggle_button_on"/>
               <ImageView
                   android:id="@+id/toggleButtonLightImage"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:background="@drawable/light_turn_off"/>
           </LinearLayout>
       </LinearLayout>
   </android.support.constraint.ConstraintLayout>

3. ToggleButtonActivity.java

1. ToggleButtonActivity.java

   package com.dev2qa.example;
   
   import android.os.Bundle;
   import android.support.v7.app.AppCompatActivity;
   import android.widget.CompoundButton;
   import android.widget.ImageView;
   import android.widget.LinearLayout;
   import android.widget.ToggleButton;
   
   public class ToggleButtonActivity extends AppCompatActivity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_toggle_button);
   
           // ToggleButton example one. Change the LinearLayout direction.
           ToggleButton toggleButtonLayout = (ToggleButton)findViewById(R.id.toggleButtonLayout);
           // Make toggle button text not all upper case.
           toggleButtonLayout.setAllCaps(false);
           // Set ToggleButton text.
           toggleButtonLayout.setText("Click This Button To Change Layout");
           // Get the two test button exist LinearLayout object.
           final LinearLayout testLinearLayout = (LinearLayout)findViewById(R.id.toggleButtonTestlayout);
           // Listen to ToggleButton check state change event.
           toggleButtonLayout.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
               @Override
               public void onCheckedChanged(CompoundButton compoundButton, boolean checked) {
                   // Change testLinearLayout direction based on toggle button checked status.
                   if(checked)
                   {
                       testLinearLayout.setOrientation(LinearLayout.VERTICAL);
                   }else
                   {
                       testLinearLayout.setOrientation(LinearLayout.HORIZONTAL);
                   }
               }
           });
   
   
           // ToggleButton example two. Turn light on or off.
           final ToggleButton toggleButtonTurnLight = (ToggleButton)findViewById(R.id.toggleButtonTurnLight);
           // Get the ImageView object.
           final ImageView lightImageView = (ImageView)findViewById(R.id.toggleButtonLightImage);
           // Listen to ToggleButton check state change event.
           toggleButtonTurnLight.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
               @Override
               public void onCheckedChanged(CompoundButton compoundButton, boolean checked) {
                   // Change both toggleButtonTurnLight and lightImageView's background image
                   // according to toggle button checked status.
                   if(checked)
                   {
                       lightImageView.setImageResource(R.drawable.light_turn_on);
                       toggleButtonTurnLight.setBackgroundResource(R.drawable.toggle_button_off);
                   }else
                   {
                       lightImageView.setImageResource(R.drawable.light_turn_off);
                       toggleButtonTurnLight.setBackgroundResource(R.drawable.toggle_button_on);
                   }
               }
           });
       }
   }