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.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/OCfFwznztGc
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);
}
}
});
}
}