Android Toggle Button example


            Toggle button is very useful if you want to switch between two states. A toggle button takes only two states ACTIVATED state & DEACTIVATED state [or] ON state and OFF state. This is the best alternative for radio buttons.

We can easily create Toggle buttons using <ToggleButton> tag in android layout. We can explicitly set the ON/OFF state texts in the xml layout. The default value for on state is ‘ON’ and for off state is ‘OFF’.
Listener for the button click can be created programmatically or can also be declared in the layout xml itself using android:onClick property.


For example:
android:onClick="onToggleClicked"
'onToggleClicked' is the method in the Activity class that uses this layout. This method should take one parameter of type ‘View’

public void onToggleClicked(View view) {
//Do whatever you want
}

To handle the click event programmatically we setOnCheckedChangeListener is used.

button.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
      public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
      //Do whatever you want
  }
});

In the example given below I have created two toggle buttons
ToggleButton1 is with default on/off text and its click event is declared in the xml file.
ToggleButton2 shows custom on/off text values and its click event is handled programmatically. 

Layout xml file:
activity_main.xml


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <ToggleButton
        android:id="@+id/toggleButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="22dp"
        android:layout_marginTop="24dp"
        android:onClick="onToggleClicked"
        android:text="ToggleButton" />

    <ToggleButton
        android:id="@+id/toggleButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/toggleButton1"
        android:layout_below="@+id/toggleButton1"
        android:textOn="Turn OFF"
        android:textOff="Turn ON"
        android:layout_marginTop="20dp"
        android:text="ToggleButton" />

   <EditText
        android:id="@+id/editText1"
        android:layout_width="160dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/toggleButton1"
        android:layout_toRightOf="@+id/toggleButton1"
        android:editable="false"
        android:ems="10"/>

    <EditText
        android:id="@+id/editText2"
        android:layout_width="160dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/toggleButton2"
        android:layout_toRightOf="@+id/toggleButton2"
        android:editable="false"
        android:ems="10"/>

</RelativeLayout>


Activity class:
MainActivity.java

package com.example.togglebutton;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.ToggleButton;

/**
 * @author Prabu
 *
 */
public class MainActivity extends Activity {
 private ToggleButton button1;
 private ToggleButton button2;
 private EditText textView1;
 private EditText textView2;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  button1 = (ToggleButton) findViewById(R.id.toggleButton1);
  button2 = (ToggleButton) findViewById(R.id.toggleButton2);
  textView1=(EditText) findViewById(R.id.editText1);
  textView2=(EditText) findViewById(R.id.editText2);
  //Setting initial values
  textView1.setText("Button1 is OFF");
  textView2.setText("Button2 is OFF");
  //Button2 click event is handled pragmatically  
  button2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
      public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    if (isChecked) {
     Log.i("info", "Button2 is on!");
     textView2.setText("Button2 is ON");
    } else {
     Log.i("info", "Button2 is off!");
     textView2.setText("Button2 is OFF");
    }
      }
  });
 }
 /**
  * Click event of the togglebutton1 is declared in the layout xml file itself.
  * @param view
  */
 public void onToggleClicked(View view) {
  boolean on = ((ToggleButton) view).isChecked();
  if (on) {
   Log.i("info", "Button1 is on!");
   textView1.setText("Button1 is ON");
  } else {
   Log.i("info", "Button1 is off!");
   textView1.setText("Button1 is OFF");
  }
 }
 
 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.activity_main, menu);
  return true;
 }

}

Output:






Source code of this example:
ToggleButton.zip

 



Reactions:

3 comments :

  1. Thanks a lot fo the nice tutorials.

    I'm not able to download the code of this example.

    beminoglu@hotmail.com

    ReplyDelete
  2. thanks for the tutorial, but does the same format works for more than 2 buttons...i am struggling to get it work...please suggest

    ReplyDelete
  3. nice 1
    thank u

    ReplyDelete