Android ToggleButton Example

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

1. Example Overview.

Below is the example screen effect. When click ToggleButton, the first example will change other two buttons direction. The second example will turn light on or off. They are all implemented with android.widget.ToggleButton.

There are following core files in above two example.

1. activity_toggle_button.xml : This is the layout file that contains all the ui components.
2. ToggleButtonActivity.java : This is the activity java file which use activity_toggle_button.xml layout file and manipulate the UI components in it.
3. Four images that are used in the second turn light on / off example.
   
   

If you are not familiar with android image manipulation, please read article How To Add Images In Android Studio Drawable Folder.

2. activity_toggle_button.xml

Please note below android.widget.ToggleButton properties.

1. textOff : Button text when toggle button is not checked.
2. textOn : Button text when toggle button is checked.
3. checked : Set whether the toggle button is checked or not.
4. background : Toggle button background image.

<?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

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);
                }
            }
        });
    }
}