Learn Mobile App Development: Use ToggleButton in Android

A toggle button is one which has only two states, for example, On and Off. In Android, “android.widget.ToggleButton” class can be used to render a toggle button. In this tutorial, we shall learn how to create two toggle buttons and a normal button, which when clicked shall display the existing state of both the toggle buttons. We shall also see how to keep a toggle button switched on by default.

1. Strings.xml

Open the strings.xml file to add the text strings to be displayed on the screen.
File : res/values/strings.xml


<resources>

  
<string name="app_name">MyApp</string>

<string name="toggle_turn_on">Turn On</string>

<string name="toggle_turn_off">Turn Off</string>

<string name="btn_display">Display</string>




</resources>

2. Add ToggleButton

Open the main.xml file, add two toggle buttons and a normal button in the following manner.
File : res/layout/main.xml


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

             android:layout_width="fill_parent"

             android:layout_height="fill_parent"

             android:gravity="center"

             android:orientation="vertical" >

   

<ToggleButton android:id="@+id/toggleButton1"

             android:layout_width="wrap_content"

              android:layout_height="70sp"

             android:textSize="25sp"

             android:text="ToggleButton" />

   

<TextView android:id="@+id/textView1"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"/>

   

<ToggleButton android:id="@+id/toggleButton2"

             android:layout_width="wrap_content"

             android:layout_height="70sp"

              android:textSize="25sp"

             android:textOn="@string/toggle_turn_on"

             android:textOff="@string/toggle_turn_off"

             android:checked="true" />

   

<TextView android:id="@+id/textView2"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"/>

   

<Button android:id="@+id/btnDisplay"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textSize="25sp"

        android:text="@string/btn_display" />



</LinearLayout>

Note: We have kept the toggleButton2 switched on by default using the attribute android:checked="true".

3. Java code

Inside the “onCreate()” method, attach a click listener on the normal button to display the existing state of the toggle button.

File : HomeScreen.java


package com.endeavour.android;



import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.Toast;

import android.widget.ToggleButton;



public class HomeScreen extends Activity {




private ToggleButton toggleButton1, toggleButton2;

private Button btnDisplay;




@Override

public void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.main);

       addListenerOnButton();

       }




public void addListenerOnButton() {

       toggleButton1 = (ToggleButton) findViewById(R.id.toggleButton1);

       toggleButton2 = (ToggleButton) findViewById(R.id.toggleButton2);

       btnDisplay = (Button) findViewById(R.id.btnDisplay);



       btnDisplay.setOnClickListener(new OnClickListener() {

           @Override

           public void onClick(View v) {

           StringBuffer result = new StringBuffer();

           result.append("ToggleButton1 State: ").append(toggleButton1.getText());

           result.append("\nToggleButton2 State: ").append(toggleButton2.getText());

           Toast.makeText(HomeScreen.this, result.toString(), Toast.LENGTH_SHORT).show();

           }

       });

    }

}