1 How to create custom Toggle Button in Android

Tweet

From Developer.android.com: “A toggle button allows the user to change a setting between two state…”

In this tutorial, we show you how to customize a toggle button, add a click listener by a few different ways, and how to get the setOnCheckedChangeListener for this toggle button.

Here is a result of this tutorial:

This project is developed in Eclipse 4.2.0.

1. Make a custom toggle button by XML Layout

<ToggleButton

        android:id="@+id/toggleButton1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:background="@drawable/btntoggle_selector"

        android:textColor="@android:color/white"

        android:textOff="Toggle Button OFF"

        android:textOn="Toggle Button ON "

        android:onClick="onToggleButtonClick"/>

We need a xml file “btntoggle_selector” in folder drawable:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/bg_fbautoshare_selected" android:state_checked="true" android:state_pressed="true"/>

    <item android:drawable="@drawable/bg_fbautoshare_selected" android:state_checked="true" android:state_focused="false"/>

    <item android:drawable="@drawable/bg_fbautoshare_normal" android:state_checked="false" android:state_pressed="true"/>

    <item android:drawable="@drawable/bg_fbautoshare_normal" android:state_checked="false" android:state_focused="false"/>

</selector>

And of course two image with name “bg_fbautoshare_normal” and “bg_fbautoshare_selected” for two state of RadioButton. In my tutorial I use the 9-patch file. For detail of 9-patch, see http://developer.android.com/tools/help/draw9patch.html

2. Two ways to attach a click listener to the toggle button, when user click on the toggle button, show info on the textview control

2.1. Use  android:onClick attribute in your toggle button  XML definition:

android:onClick="onToggleButtonClick"

Within the activity that hosts this layout, the following method handles the click event for toggle button:

public void onToggleButtonClick(View view) {

       if(togglebutton.isChecked())

              textview.setText("ToggleButton is checked ON on it");

       else

              textview.setText("ToggleButton is checked OFF on it");

    }

2.2. Or using an OnClickListener

togglebutton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

      boolean checked = ((ToggleButton) v).isChecked();

       if (checked)

       textview.setText("ToggleButton is checked ON by setOnClickListener");

       else

      textview.setText("ToggleButton is checked OFF by setOnClickListener");

                     

       }

});

3. How to get the setOnCheckedChangeListener for toggle button. This method is executed when there is any change in the state of the toggle button. You can change the state of toggle button from a button like:

button = (Button)findViewById(R.id.button1);

        // when click on the button

        button.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {

              togglebutton.setChecked(!togglebutton.isChecked());

            }

        });

And if you want to do something when state of toggle button is changed, you want to some code below:

// this method implement when have change between state ON and OFF of toggle button

togglebutton.setOnCheckedChangeListener(new             CompoundButton.OnCheckedChangeListener() {

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

       if (isChecked) {

       // The toggle is enabled

          textview.setText("ToggleButton is checked ON click on button");

       } else {

       // The toggle is disabled

          textview.setText("ToggleButton is checked OFF by click on button");

       }

    }

});

4. DEMO

 4.1. When click on toggle button

4.2. When click on button

You con download all source codes from here

Reference: http://www.technotalkative.com/android-custom-toggle-button-example/