Android Tutorial On Toggle Button

[et_pb_section admin_label=”section”][et_pb_row admin_label=”row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Android toggle button :

Introduction :

Android has provided wide variety’s of options for developers to make their application much more flexible for user.We have seen various components previous tutorials as well.

Generally there will be few options like vibration on or off , lights on or off and many other types of functionality where there is a requirement of On /Off switch for which we can easily use toggle button.

Not only On/Off it can be used according to our requirement in this tutorial i am showing it as On Off Button for turning light on and off.

You can design the toggle button according to the app theme there will be a same color with both dark and light shades for button.

In profile screen you can make use of this component to customize the features in the app according to the user requirements.

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Android toggle button :

activity_main.xml

Add a toggle button to activity as stated below.

<ToggleButton
    android:id="@+id/toggleButton"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_marginTop="50dp"
    android:text="ToggleButton"
    android:textOn="Light ON"  // When Light is set ON display this msg
    android:textOff="Light OFF" />  // When Light is OFF Display this msg

And also a textview to show output of the data selected from toggle button.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:layout_marginTop="30dp"
    android:id="@+id/textView" />

Then

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center">

    <ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="50dp"
        android:text="ToggleButton"
        android:textOn="Light ON"
        android:textOff="Light OFF" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_marginTop="30dp"
        android:id="@+id/textView" />


</LinearLayout>

Creating MainActivity.java

Initialize android toggle button as below

ToggleButton togglebut;

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

Then setOnClickListener for toggle button and read the state of Toggle Button and set it to TextView we have added to show output.

togglebut.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {

        String text = togglebut.getText().toString();

        Toast.makeText(MainActivity.this, "" + text, Toast.LENGTH_SHORT).show();

        textView.setText(text);

    }
});

MainActivity.java

Full Code :

Providing the full code for toggle button implementation in android app.

package com.example.abhishek.togglebutton;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ToggleButton;

import com.example.abhishek.togglebutton.R;

public class MainActivity extends Activity {

    ToggleButton togglebut;
    TextView textView;

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

        addListenerOnButton();

    }


    public void addListenerOnButton() {

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

        textView = (TextView) findViewById(R.id.textView);

        togglebut.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {

                String text = togglebut.getText().toString();

                Toast.makeText(MainActivity.this, "" + text, Toast.LENGTH_SHORT).show();

                textView.setText(text);

            }
        });

    }
}

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Output :

This screen below depicts android toggle button implementation in both on and off state.

If you have any query on this tutorial on android toggle button do let us know in the comment section below.

If you like and share this tutorial for more interesting tutorials.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]