Android ToggleButton Control - ToggleButton Control Example | W3schools

A ToggleButton control can be defined as a simple on-off button with a light indicator to represent a checked state. A ToggleButton can be switched to either of the two available states, which are checked and unchecked.

Also Read: Android ImageButton Control

Various ToggleButton Attributes
The important and often used attributes of the ToggleButton control are mentioned in the below tables. The complete list of the ToggleButton attributes is available on the official Android document. There you will also be introduced to the methods which can change the value of the ToggleButton attributes at the runtime.

S. No. Attribute Description
1 android:textOn * This is the text displayed on the button whenever it is flicked to the checked state.
2 android:textOff * This is the text displayed on the button whenever it is flicked to the unchecked state.
3 android:disabledAlpha * Whenever the alpha is disabled, the value will be applied to the indicator.

 

[post_middile_section_ad]

The following list of ToggleButton attributes is inherited from the android.widget.TextView class.

S. No. Attribute Description
1 android:text * The textual value provided to this attribute will be displayed on the screen.
2 android:autoText * This attribute sets the TextView as an editable field that is capable of correcting common spelling mistakes on its own.
3 android:editable * The value of this attribute decides whether the displayed TextView can be edited or not.
4 android:drawableRight * The drawable accepted by this attribute will be displayed to the right of the text.
5 android:drawableBottom * The drawable accepted by this attribute will be displayed below the text.

The following list of ToggleButton attributes is inherited from the android.view.View class.

S. No. Attribute Description
1 android:id * The value of this attribute is accepted as the name of the identifier for the view.
2 android:background * This drawable value is used as the view’s background.
3 android:visibility * The initial visibility of the view is determined by the value of this attribute.
4 android:contentDescription * This value contains the brief description of the view’s content.
5 android:onClick * This method is invoked in the context of a view. It is called whenever a user clicks on the view.

Step 1: Create an Android application by the name myapplication on the Android Studio IDE. Save this file under the package of com.example.w3school.myapplication. To understand this step more clearly, you can take a look at the already explained Hello World Example chapter.

Step 2: The second step is to include the following code to the main activity file which is MainActivity.java. Look into the src/ directory to locate this file. Other than the modified content, the file will be carrying the fundamental lifecycle callback methods.

package com.example.w3school.myapplication;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import android.widget.ToggleButton; 

public class MainActivity extends ActionBarActivity
{
   ToggleButton tg1,tg2;
   Button b1;
   protected void onCreate(Bundle savedInstanceState)
   {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);      
      tg1=(ToggleButton)findViewById(R.id.toggleButton);
      tg2=(ToggleButton)findViewById(R.id.toggleButton2);      
      b1=(Button)findViewById(R.id.button2);
      b1.setOnClickListener(new View.OnClickListener()
      {
         @Override
         public void onClick(View v)
         {
            StringBuffer result = new StringBuffer();
            result.append(“This is the 1st ON Button).append(tg1.getText());
            result.append(“This is the 2nd ON Button”).append(tg2.getText());
            Toast.makeText(MainActivity.this, result.toString(),Toast.LENGTH_SHORT).show();
         }
      });
   }
}

[post_middile_section_ad]

Step 3: Go to the res/layout/ directory. Look for the activity_main.xml file. In this file, you need to add the required two Toggle Button controls with a TextView and one Button control.

<RelativeLayout 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”
   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=”.MainActivity”>   

   <TextView
      android:id=”@+id/textView2″
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:text=”W3School”
      android:textColor=”#ff87ff09″
      android:textSize=”30dp”
      android:layout_above=”@+id/imageButton”
      android:layout_centerHorizontal=”true”
      android:layout_marginBottom=”40dp” />      

   <ImageButton
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:id=”@+id/imageButton”
      android:src=”@drawable/abc”
      android:layout_centerVertical=”true”
      android:layout_centerHorizontal=”true” />      

   <ToggleButton
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:text=”On”
      android:id=”@+id/toggleButton”
      android:checked=”true”
      android:layout_below=”@+id/imageButton”
      android:layout_toEndOf=”@+id/button2/>      

   <ToggleButton
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:text=”Off”
      android:id=”@+id/toggleButton2″
      android:checked=”true”
      android:layout_alignTop=”@+id/toggleButton” />      

   <Button
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:id=”@+id/button2″
      android:text=”ClickMe”
      android:layout_alignParentBottom=”true”
      android:layout_centerHorizontal=”true” />      
</RelativeLayout> 

Step 4: The Android Studio IDE then automatically defines all of these new constants in the strings.xml file. To take a look at its default content, trace the res/values/ path where you can find the file. 

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
   <string name=”app_name”>My Application</string>
</resources>

Step 5: The AndroidManifest.xml file should be left untouched. The already existing content of the file will look like the following.

 
<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”
   package=”com.example.w3school.myapplication” >   
   <application
      android:allowBackup=”true”
      android:icon=”@drawable/ic_launcher”
      android:label=”@string/app_name”
      android:theme=”@style/AppTheme” >      

      <activity
         android:name=”com.example.My Application.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>

[post_middile_section_ad]

Step 6: At last, you just need to run this newly created application i.e., myapplication. For that, you need to have an AVD (that you have already created during the environment setup). Now, open any of your project’s activity files on the Android Studio IDE. Look for the Run button in the toolbar and click on it. The Studio then initiate the process of installing your app on the AVD. Once done successfully, you will be displayed with the final output on the Emulator window.

On the final output window, you will be displayed with the two ON Toggle Buttons. Whenever a user clicks on the first ON button, he/she will receive a message printed on the screen saying “This is the 1st ON Button”. If the user selects the second ON button, he/she will get another toast message as “This is the 2nd ON button.”