Android Toggle Buttons

A toggle button allows the user to change a setting between two states.

You can add a basic toggle button to your layout with the ToggleButton object. Android 4.0 (API level 14) introduces another kind of toggle button called a switch that provides a slider control, which you can add with a Switch object.

The ToggleButton and Switch controls are subclasses of CompoundButton and function in the same manner, so you can implement their behavior the same way.

Toggle Button Click Event

When the user selects a ToggleButton and Switch, the object receives an on-click event.

To define the click event handler, add the android:onClick attribute to the <ToggleButton> or <Switch>element in your XML layout. The value for this attribute must be the name of the method you want to call in response to a click event. The Activity hosting the layout must then implement the corresponding method.

Within the Activity that hosts this layout, the following method handles the click event:

<ToggleButton

android:id="@+id/togglebutton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:onClick="onToggleClicked"

android:textOff="Sound off"

android:textOn="Sound on" />

Within the Activity that hosts this layout, the following method handles the click event:

public void onToggleClicked(View view) {

// Is the toggle on?

boolean on = ((ToggleButton) view).isChecked();

if (on) {

// Enable Sound

} else {

// Disable Sound

}

}

The method you declare in the android:onClick attribute must have a signature exactly as shown above. Specifically, the method must:

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.

2. ToggleButton

<LinearLayout 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"

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:text="ToggleButton" />

<Button

android:id="@+id/btnDisplay"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Display" />

</LinearLayout>

3. Code 

package com.learnsimply.toggelbuttonexample;

import android.os.Bundle;

import android.app.Activity;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.Toast;

import android.widget.ToggleButton;

public class MainActivity extends Activity {

private ToggleButton toggleButton1, toggleButton2;

private Button btnDisplay;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

InitializeButtonClick();

}

public void InitializeButtonClick() {

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(MainActivity.this, result.toString(),

Toast.LENGTH_SHORT).show();

}

});

}

}

Run the application

Download Source Code ToggelButtonExample.zip