Monday, December 24, 2012

2 How to create custom Radio Button in Android


From Developer.android.com: "Radio buttons allow the user to select one option from a set…"

Radio buttons are usually grouped by RadioGroup. When one RadioButton within a group is selected, all others are automatically deselected.

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

Here is a result of this tutorial:

Android Custom Radio Button - Figure 3


This project is developed in Eclipse 4.2.0.
1. Make a custom RadioButton by XML Layout



<RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"   >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Radio 1"
               android:onClick="onRadioButtonClicked"
               android:button="@drawable/radio_selector" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Radio 2"
               android:onClick="onRadioButtonClicked"
               android:button="@drawable/radio_selector" />

        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Radio 3"
               android:onClick="onRadioButtonClicked"
                     android:button="@drawable/radio_selector" />
    </RadioGroup>

Note: To create each radio button option, create a radio button in your layout. However, because radio buttons are mutually exclusive, you must group them together inside a RadioGroup. By grouping them together, the system ensures that only one radio button can be selected at a time.

We need a xml file “radio_selector” in folder drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
    android:drawable="@drawable/radio_check" />
<item android:state_checked="false"
    android:drawable="@drawable/radio_uncheck" />
</selector>
And of course two image with name “radio_check” and “radio_uncheck” for two state of RadioButton.
Android Custom Radio Button - Figure 1

Android Custom Radio Button - Figure 2

2. Two ways to attach a click listener to the RadioButton, when user click on any radio button, show info on the textview control
2.1. Use  android:onClick attribute in your radio button  XML definition:
android:onClick=" onRadioButtonClicked"

Within the activity that hosts this layout, the following method handles the click event for all RadioButtons:

public void onRadioButtonClicked(View view) {
        // Is the button now checked?
        boolean checked = ((RadioButton) view).isChecked();
        
        // Check which radio button was clicked
        switch(view.getId()) {
            case R.id.radio0:
                if (checked)
                       textview.setText("Radio Button 1 is selected buy onClick from xml layout");
                break;
            case R.id.radio1:
                if (checked)
                       textview.setText("Radio Button 2 is selected buy onClick from xml layout
                break;
            case R.id.radio2:
                if (checked)
                       textview.setText("Radio Button 3 is selected buy onClick from xml layout");
                break;
        }
    }
2.2. Or using an OnClickListener
In OnCreate method
radiobutton1.setOnClickListener(myOptionOnClickListener);
radiobutton2.setOnClickListener(myOptionOnClickListener);
radiobutton3.setOnClickListener(myOptionOnClickListener);

And execute OnclickListener for all radio button outside OnCreate
RadioButton.OnClickListener myOptionOnClickListener =
         new RadioButton.OnClickListener()
{
@Override
   public void onClick(View v) {// Is the button now checked?
       boolean checked = ((RadioButton) v).isChecked();
// Check which radio button was clicked
       switch(v.getId()) {
          case R.id.radio0:
          if (checked)
           textview.setText("Radio Button 1 is checked by setOnClickListener");
              break;
          case R.id.radio1:
           if (checked)
           textview.setText("Radio Button 2 is checked by setOnClickListener");
               break;
           case R.id.radio2:
           if (checked)
           textview.setText("Radio Button 3 is checked by setOnClickListener");
                         break;
          }
     }
   };
3. How to get the setOnCheckedChangeListener for radio buttonThis method is executed when there is any change from RadioGroup where contains all radio buttons. You can randomly select radio button from a button like:
button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {                              
                  // ==== random choice a radio on radiobutton group ====
                  Random num = new Random();
                  int radio_id = num.nextInt(3);
                  if(radio_id == 0)
                      radiogroup.check(R.id.radio0);
                  else if(radio_id == 1)
                      radiogroup.check(R.id.radio1);
                  else if(radio_id == 2)
                      radiogroup.check(R.id.radio2);
            }
        });

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


radiogroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
    public void onCheckedChanged (RadioGroup group, int checkedId) {
       RadioButton checkedRadioButton = (RadioButton)group.findViewById(checkedId);
       // This puts the value (true/false) into the variable
       boolean isChecked = checkedRadioButton.isChecked();
      // If the radiobutton that has changed in check state is now checked...
      if (isChecked)
      {
      // Changes the textview's text to "Checked: example radiobutton text"
      textview.setText(checkedRadioButton.getText() + " is selected by click on button");
      }
     }
});
4. DEMO
 4.1. When click on the radio button
Android Custom Radio Button - Figure 3
4.2. When click on the button
Android Custom Radio Button - Figure 4
 You can download all source codes from here
Reference: http://developer.android.com/guide/topics/ui/controls/radiobutton.html

2 comments: