The first beta of the Android OS was released back in 2007.  While I don’t claim to have been involved with the OS quite that long, I have been coding for Android since Cupcake became available in April of 2009.  After doing exclusively Android development for a number of years now, I sometimes forget that every day there are new programmers banging out their first line of Android code. So this week rather than cover some new feature that came along in the latest and greatest SDK, I decided to write a tutorial on one of the original widgets that gave me some problems when I was first starting out: the radio group.

The radio group (and subsequently the radio buttons within that group) are merely a mechanism for allowing the user to select a single item from a list of items. It’s a common paradigm in the modern user interface.  There is nothing remarkable about the Android implementation; in fact, for the most part it is controlled by the XML layout. There are a couple of gotchas, which I will point out as we progress. You can follow along with the step-by-step instructions, or download the entire project and import it directly into Eclipse.

1. Begin a new Android project in Eclipse. Target Android 1.6 or higher. Be sure to rename the startup class to Main.java and the related layout to main.xml.

2. In the /res/layout folder we will want to create a linear layout that contains the radio group and its buttons. Note the padding left attribute applied to each radio button. The padding property affects the text, not the button. Another issue that can cause problems happens when you apply a background such as a color to a radio button; this will frequently cause the text to become misaligned. If you can, I recommend applying the background up at the group tag. Last but not least, note the orientation property within the group. This is how you can align your radio buttons vertically (as I have for this demo) or horizontally, if a horizontal button layout better suits your application.

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#000000">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Radio Button Demo"
        android:textColor="#ffffff" />
    <RadioGroup
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/radio_group">
           <RadioButton
                      android:id="@+id/first_radio_button"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:text="First Radio Button"
                      android:checked="true"
                      android:textColor="#ff0000"
                      android:paddingLeft="40dip"/>
         <RadioButton
                     android:id="@+id/second_radio_button"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:text="Second Radio Button"
                     android:checked="false"
                     android:textColor="#00ff00"
                     android:paddingLeft="40dip" />
       <RadioButton
                   android:id="@+id/third_radio_button"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="Third Radio Button"
                   android:checked="false"
                   android:paddingLeft="40dip"
                   android:textColor="#0000ff" />
   </RadioGroup>
</LinearLayout>

3. Once the layout is mastered, very little code is needed to utilize the radio group and its buttons. In our /src/Main.java file we simply implement an on checked listener, wire up the radio group in the on create override, and override the on check changed call back.

Main.java
package com.authorwjf.radiobuttons;
import android.os.Bundle;
import android.app.Activity;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.Toast;
public class Main extends Activity implements OnCheckedChangeListener {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ((RadioGroup)findViewById(R.id.radio_group)).setOnCheckedChangeListener(this);
    }
       @Override
       public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
               String numeral = null;
               switch (checkedId) {
               case R.id.first_radio_button:
                       numeral = "first";
                       break;
               case R.id.second_radio_button:
                       numeral = "second";
                       break;
               case R.id.third_radio_button:
                       numeral = "third";
                       break;
               }
               Toast.makeText(getApplicationContext(), "You selected the "+numeral+" radio button.", Toast.LENGTH_SHORT).show();
       }
}

Now we are ready for some radio button action. Load the APK to a device or emulator, and get to clicking (Figure A). Hopefully you’ll agree that armed with just a bit of knowledge when defining our layout, the radio group isn’t so scary after all.
Figure A

If you’re new to Android and would like to see a beginner-oriented tutorial on a specific aspect of the OS, sound off in the discussion thread, and I’ll see what we can do.