Monday, December 24, 2012

4 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

4 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Radio button using android studio
    http://themasterworld.com/android-radio-button/

    ReplyDelete
  3. Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very useful for me.

    Best Linux training in Noida
    Linux Training Institute in Noida
    Shell Scripting Training Institute in Noida

    ReplyDelete