Switch
A switch is type of button that can only have two states ON and OFF. You can set the initial state and then the user can change it. To get the current state you can check if the switch is checked or not, in addition to that you can attach a OnCheckedChangeListener to the switch to get notification when the state changes.
ToggleButton
Toggle button looks like a button but works like a switch. You can choose to implement the same functionality using just 2 radio buttons or a single checkbox. Just like a checkbox a Toggle button has two states whether or not its checked. You can customize the Text for both states, defaults are ON/OFF.
In this example I will show you how to implement both Switch and ToggleButton.
Let’s get start by creating a project in Eclipse IDE.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)
2. Open your your AndroidManifest.xml file and set minSdkVersion to 14, because Switch only works from 14 API Level.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.android_switch_n_togglebutton_demo" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> |
3. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. In this layout i had just taken one switch and one togglebutton.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:orientation="vertical" android:padding="5dp" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="Switch" android:textSize="20sp" /> <Switch android:id="@+id/switch_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:textOff="OFF" android:textOn="ON" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="Toggle Button" android:textSize="20sp" /> <ToggleButton android:id="@+id/toggle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:text="ToggleButton" android:textOff="Turn On" android:textOn="Turn Off" /> </LinearLayout> |
4. Now, come to MainActivity.java and add the following code. In this class a Toast will be displayed when switch or togglebutton checked change.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
package com.android_switch_n_togglebutton_demo; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.widget.CompoundButton; import android.widget.CompoundButton.OnCheckedChangeListener; import android.widget.Switch; import android.widget.Toast; import android.widget.ToggleButton; public class MainActivity extends ActionBarActivity { ToggleButton toggle; Switch swtch; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toggle = (ToggleButton) findViewById(R.id.toggle); swtch = (Switch) findViewById(R.id.switch_button); setListeners(); } // Setting listeners to switch and toggle button void setListeners() { swtch.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { // If ischecked means if it is ON the it will show true else // show false if (isChecked) { Toast.makeText(MainActivity.this, "Switch is : " + isChecked, Toast.LENGTH_SHORT) .show(); } else { Toast.makeText(MainActivity.this, "Switch is : " + isChecked, Toast.LENGTH_SHORT) .show(); } } }); toggle.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { // If ischecked means if it is ON the it will show true else // show false if (isChecked) { Toast.makeText(MainActivity.this, "Toggle button is : " + isChecked, Toast.LENGTH_SHORT).show(); } else { Toast.makeText(MainActivity.this, "Toggle button is : " + isChecked, Toast.LENGTH_SHORT).show(); } } }); } } |
5. Now, run the app and you will get the output as shown in video.
Thanks.
Subscribe to us and get the latest news.
1 Comment
Tia
Monday, May 21st, 2018Thanks a lot for this tutorial! It helped me