Android ToggleButton Examples

In Android, the “android.widget.ToggleButton” is a special class to render a button which has only two states, for example, “on and “off”. It’s best alternative to radio buttons to turn on or turn off a function.

In this tutorial, we show you how to use XML to create two toggle buttons and a normal button, when user click on the normal button, it will display the current state of both toggle buttons.

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. Custom String

Open “res/values/strings.xml” file, add some custom string for toggle buttons.

File : res/values/strings.xml

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

<resources>

    <string name="app_name">MyAndroidApp</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. ToggleButton

Open “res/layout/main.xml” file, add two “ToggleButton” and a normal button, inside the LinearLayout.

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:orientation="vertical" >

    <ToggleButton

        android:id="@+id/toggleButton1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="ToggleButton" />

    <ToggleButton

        android:id="@+id/toggleButton2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textOn="@string/toggle_turn_on"

        android:textOff="@string/toggle_turn_off"

        android:checked="true" />

    <Button

        android:id="@+id/btnDisplay"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

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

</LinearLayout>

Note

Review the “togglebutton2″, we did customized the togglebutton2′s display text on and off and made it checked by default.

3. Code Code

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

File : MyAndroidAppActivity.java

package com.bishnu.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 MyAndroidAppActivity 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 : ").append(toggleButton1.getText());

     result.append("\ntoggleButton2 : ").append(toggleButton2.getText());

     Toast.makeText(MyAndroidAppActivity.this, result.toString(),

   Toast.LENGTH_SHORT).show();

  }

 });

  }

}