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.
    toggle_button_ontoggle_button_off
    light_turn_onlight_turn_off
  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);
                    }
                }
            });
        }
    }
0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x