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.
- activity_toggle_button.xml : This is the layout file that contains all the ui components.
- ToggleButtonActivity.java : This is the activity java file which use activity_toggle_button.xml layout file and manipulate the UI components in it.
- 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.
- textOff : Button text when toggle button is not checked.
- textOn : Button text when toggle button is checked.
- checked : Set whether the toggle button is checked or not.
- 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); } } }); } }