Toggle Button in android

Today I thought of posting something which I came across recently. Toggle button.

As its name suggests, it toggles or switches between two states namely, ‘on’ and ‘off’. It is similar to a radio button.

Now, let’s see how this is implemented. I’ve given a simple example below to make you understand Toggle button easily.

Firstly let’s go to our UI part. Inside our XML file we can add ToggleButton widget and set its attributes.

The XML code is shown below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
          <ToggleButton
              android:id="@+id/tglbtn"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textOn="ON"
              android:textOff="OFF"
              />
</LinearLayout>

The attribute   android:textOn=”ON” means  that the text on the button is  ‘ON’ when the it is in the ‘on’ state and   android:textOff=”OFF” specifies that the text on the button is ‘OFF’ when it is in the ‘off’ state.

Next step.

When the user clicks the button some action has to be done.

Here, I’ve given a Toast when the user clicks the button.

Here is the code. Just have a look.

package com.deepthi.mytogglebutton;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;
import android.widget.ToggleButton;
public class MyToggleButtonActivity extends Activity {
    /** Called when the activity is first created. */
    ToggleButton toggle;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        toggle=(ToggleButton)findViewById(R.id.tglbtn);
        toggle.setOnClickListener(new OnClickListener() {
              public void onClick(View v) {
               // TODO Auto-generated method stub
              if(toggle.isChecked())
              {
               Toast.makeText(getApplicationContext(), "The state is changed to on", Toast.LENGTH_LONG).show();
               }
                else
                {
                  Toast.makeText(getApplicationContext(), "The state is changed to off", Toast.LENGTH_LONG).show();
                 }
                 }
                 });
    }
}

The Output looks like this:

When checked:

When Unchecked:

Advertisements

, , , , , ,

  1. #1 by Pedro on February 20, 2013 - 5:26 am

    That was useful, thanks!

  2. #2 by Qadir Hussain on March 11, 2013 - 3:36 pm

    Good example for biggners 🙂

  3. #3 by Giancarlo Leonio on March 14, 2013 - 2:39 am

    Thanks for this helpful tutorial on creating a toggle button in android! I compiled a list of some top tutorials on this topic. I included your post. Check it out/ feel free to share. http://www.verious.com/board/Giancarlo-Leonio/creating-a-toggle-button-in-android/ Hope this can be useful to other developers too. 🙂

  4. #4 by Meghna on August 6, 2013 - 12:11 am

    Thanks for the post, was really helpful, this http://www.compiletimeerror.com/2013/08/android-togglebutton-example.html might also help, have a look…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: