Android Toggle Button Tutorial With Example

Hello Readers! In this tutorial, we will learn about Android Toggle Button widget. We will also learn about different attributes of toggle button widget that are used to configure this widget.

Output

Android Toggle Button Widget Toggle Button Tutorial

Toggle Button Output

Getting Started

Android Toggle Button widget can be defined as below –

Android Toggle button is a widget that are used to display checked/unchecked state as button with light indicator and by default accompanied with the text ON or OFF.

It is subclass of Compound button.

Different Attributes of Android Toggle Button Widget

Attributes in toggle button are –

Sr. XML Attributes Description
1 android:disabledAlpha This is value of alpha you want to set when indicator is disabled.
2 android:textOff Text to be shown when toggle button is in OFF state.
3 android:textOn Text to be shown when toggle button is in ON state.

Attributes in Toggle Button are also inherited from TextView and Compound Button. Some of the popular attributes inherited from TextView are –

Sr. XML Attributes Description
1 android:background Sets background to this View.
2 android:backgroundTint Sets tint to the background.
3 android:clickable Sets true when you want to make this View clickable. Otherwise, set false.
4 android:drawableBottom This is drawable to be drawn at bottom of the text.
5 android:drawableEnd This is drawable to be drawn to end of the text.
6 android:drawableLeft This is drawable to be drawn to left of the text.
7 android:drawablePadding This is padding of the drawable.
8 android:drawableRight This is drawable to be drawn to right of the text.
9 android:drawableStart This is drawable to be drawn to start of the text.
10 android:drawableTop This is drawable to be drawn at top of the text.
11 android:text Sets the text of the TextView.
12 android:textAllCaps Shows text in capital letters.
13 android:textColor Sets color of the text.
14 android:textSize Sets size of the text.
15 android:textStyle Sets style of the text. For example, bold, italic, bolditalic etc.
16 android:typeface Sets typeface of the text. For example, normal, sans, monospace etc.

Attributes in Toggle Button inherited from Compound Button are –

Sr. XML Attributes Description
1 android:button Drawable used for the button graphic (for example, checkbox and radio button).
2 android:buttonTint Tint to apply to the button graphic.

Note: – Visit android official documentation for more details about attributes of Toggle Button in android.




Example of Android Toggle Button Widget

In this section, we will learn how to use android Toggle Button widget in any android application. At first, we will create android application. Then, we will use Toggle Button widget in the application.

Follow the steps below to create new android project. Please ignore the steps if you have already created the project.

1. Creating New Project

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as ToggleButton. Then, click next button.
3. Select minimum SDK you need. However, we have selected 17 as minimum SDK. Then, click next button
4. Then, select Empty Activity => click next => click finish.
5. If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit post to create a new project to know steps in detail.

Since we have a project now. We will modify xml and java file to use Toggle Button widget. Please follow the steps below.

2. Modify Values folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
	<string name="app_name">ToggleButton</string>
	<string name="togglebutton">ToggleButton</string>
</resources>

Other values folder have not been changed.

3. Use Toggle Button in xml file

Open res/layout/activity_main.xml file. Then, add below code into it.

<?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="match_parent"
	android:gravity="center">

	<ToggleButton
		android:id="@+id/toggleButton"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/togglebutton"/>

</LinearLayout>

Here, we have defined toggle button in xml file. Now, we will access this toggle button in java file and show a toast message when it is checked on/off.

4. Access Toggle Button in java file

Open src/main/java/com.tutorialwing.togglebutton/MainActivity.java file. Then, add below code into it.

package com.tutorialwing.togglebutton;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.CompoundButton;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

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

		ToggleButton toggleButton = findViewById(R.id.toggleButton);
		if (toggleButton != null) {
			toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
				@Override
				public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
					String msg = "Toggle Button is " + (isChecked ? "ON" : "OFF");
					Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
				}
			});
		}
	}
}

Since AndroidManifest.xml is very importatnt file for any android application . We are also going to mention it here.

AndroidManifest.xml file

Code inside main/AndroidManifest.xml file is as below.

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.tutorialwing.togglebutton"
		  xmlns:android="http://schemas.android.com/apk/res/android">

	<application
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		<activity android:name=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN"/>

				<category android:name="android.intent.category.LAUNCHER"/>
			</intent-filter>
		</activity>
	</application>

</manifest>

Now, when we run the application, we will get output as shown above.

That’s end of tutorial on Android Toggle Button tutorial and it’s example.

Leave a Reply