Monday, December 24, 2012

1 How to create custom Toggle Button in Android


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:

Android Custom Toggle Button - Figure 1

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
Android Custom Toggle Button

Android Custom Toggle Button


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

Android Custom Toggle Button - Figure 1

4.2. When click on button

Android Custom Toggle Button - Figure 2

You con download all source codes from here
Reference: http://www.technotalkative.com/android-custom-toggle-button-example/

1 comment: