Android Toggle Button/Switch Tutorial - How To work Toggle Button/Switch Example

What is ToggleButton

Toggle Button is allow to user change setting between two States.ToggleButton add to layout of basic toggle butto objects. ToggleButton two state of Checked or Unchecked work.
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. SwitchCompact is a version of the Switch widget which runs on devices back to API 7.

If you need to change button state listener you can use to
CompoundButton.setChecked() or CompoundButton.toggle() method.

ToggleButton Attribute

android:textOn

textOn Attribute is a checked state of ToggleButton worked.

android:textOff

textOff Attribute is a unchecked state of ToggleButton Worked.

Implemetation Of ToggleButton

Create activity_main.xml File and Write the following code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.practice.bhaumik.togglebuttons.MainActivity">

    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="Vibrate On"
        android:textOff="Vibrate Off"
        android:textAllCaps="false"
        android:layout_gravity="center"
        android:id="@+id/btn_toggle"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"
        android:textSize="25sp"
        android:layout_marginTop="20dp"
        android:layout_gravity="center"
        android:textColor="#000"
        android:id="@+id/tv_show"/>

</LinearLayout>

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

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

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:orientation="vertical"

tools:context="com.practice.bhaumik.togglebuttons.MainActivity">

<ToggleButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textOn="Vibrate On"

android:textOff="Vibrate Off"

android:textAllCaps="false"

android:layout_gravity="center"

android:id="@+id/btn_toggle"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello World"

android:textSize="25sp"

android:layout_marginTop="20dp"

android:layout_gravity="center"

android:textColor="#000"

android:id="@+id/tv_show"/>

</LinearLayout>

Now Create MainActivity.java file and write the following code

package com.practice.bhaumik.togglebuttons;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.TextView;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

    TextView showText;
    ToggleButton toggleButton;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        showText = (TextView) findViewById(R.id.tv_show);
        toggleButton = (ToggleButton) findViewById(R.id.btn_toggle);
        showText.setVisibility(View.INVISIBLE);
     

        toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                
                if (isChecked){
                    showText.setVisibility(View.VISIBLE);
                    showText.setText("Vibrate On");
                }else{
                    showText.setVisibility(View.VISIBLE);
                    showText.setText("Vibrate Off");
                }
            }
        });
        
    }
}

package com.practice.bhaumik.togglebuttons;

import android.content.Intent;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.CompoundButton;

import android.widget.TextView;

import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

TextView showText;

ToggleButton toggleButton;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

showText = (TextView) findViewById(R.id.tv_show);

toggleButton = (ToggleButton) findViewById(R.id.btn_toggle);

showText.setVisibility(View.INVISIBLE);

toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

@Override

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

if (isChecked){

showText.setVisibility(View.VISIBLE);

showText.setText("Vibrate On");

}else{

showText.setVisibility(View.VISIBLE);

showText.setText("Vibrate Off");

}

});

}

Now above the code is create one TextView and ToggleButton in xml file and implement CheckedChange Listener in toggle button to MainActivity.java file.CheckedChange Listener is a check of toggle button on ane off to boolean variable isChecked. i have implement if condition ane then check isChecked then textview visible and settext “Vibrate On” And isChecked is false means it is called else part to change textview in “Vibrate Off”.

What is Switch ?

A Switch is a two-state toggle switch widget that can select between two options. The user may drag the “thumb” back and forth to choose the selected option, or simply tap to toggle as if it were a checkbox.Switch is text property of On Off Control.

Implementation Of Switch

Now Create New activity_main.xml File And Following Code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_example2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.practice.bhaumik.togglebuttons.MainActivity">

	<Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="Wifi On"
        android:textOff="Wifi Off"
        android:layout_below="@+id/toggle_bluetooth"
        android:layout_marginTop="100dp"
        android:layout_centerHorizontal="true"
        android:id="@+id/switch_wifi"
        />
   
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Wifi"
        android:textSize="20sp"
        android:textColor="#000"
        android:layout_below="@+id/switch_wifi"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:id="@+id/tv_wifi"/>

</RelativeLayout>

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

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

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_example2"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="com.practice.bhaumik.togglebuttons.MainActivity">

<Switch

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textOn="Wifi On"

android:textOff="Wifi Off"

android:layout_below="@+id/toggle_bluetooth"

android:layout_marginTop="100dp"

android:layout_centerHorizontal="true"

android:id="@+id/switch_wifi"

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello Wifi"

android:textSize="20sp"

android:textColor="#000"

android:layout_below="@+id/switch_wifi"

android:layout_centerHorizontal="true"

android:layout_marginTop="30dp"

android:id="@+id/tv_wifi"/>

</RelativeLayout>

Now Create MainActivity.java File And Following Code

package com.practice.bhaumik.togglebuttons;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Switch;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView tvWifi;
    
    Switch wifi;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tvWifi = (TextView) findViewById(R.id.tv_wifi);
        wifi = (Switch) findViewById(R.id.switch_wifi);

        tvWifi.setVisibility(View.INVISIBLE);

        wifi.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                boolean checked = ((Switch)v).isChecked();

                if(checked)
                {
                    tvWifi.setVisibility(View.VISIBLE);
                    tvWifi.setText("Wifi On");
                }
                else
                {
                    tvWifi.setVisibility(View.VISIBLE);
                    tvWifi.setText("Wifi Off");
                }
            }
        });
    }
}

package com.practice.bhaumik.togglebuttons;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Switch;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

TextView tvWifi;

Switch wifi;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

tvWifi = (TextView) findViewById(R.id.tv_wifi);

wifi = (Switch) findViewById(R.id.switch_wifi);

tvWifi.setVisibility(View.INVISIBLE);

wifi.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

boolean checked = ((Switch)v).isChecked();

if(checked)

{

tvWifi.setVisibility(View.VISIBLE);

tvWifi.setText("Wifi On");

}

else

{

tvWifi.setVisibility(View.VISIBLE);

tvWifi.setText("Wifi Off");

}

});

}

In this above code i have Create one Switch And TextView And Implementation Click Listener in switch and check condition is true or false it means Switch is checked or unchecked and perform visiblity textview and change text in condition is true.