RadioButton tutorial

The topic for this tutorial is Radio buttons. Radio buttons are used in the user interface when a user must choose one option from a list. RadioButton component is quite similar to the Spinner component that I have written about previously.

Resources

res/values/strings.xml

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

    <string name="app_name">RadioButton Tutorial</string>
    <string name="option_africa">Africa</string>
    <string name="option_america">America</string>
    <string name="option_asia">Asia</string>
    <string name="option_australia">Australia</string>
    <string name="option_europe">Europe</string>

</resources>

As earlier, strings.xml contains string resources for the application. The option_* strings are used in the RadioButton components.

res/layout/activity_radiobutton.xml

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".RadioButtonActivity" >

    <RadioButton
        android:id="@+id/option_africa"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onRadioButtonClicked"
        android:text="@string/option_africa" />

    <RadioButton
        android:id="@+id/option_america"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onRadioButtonClicked"
        android:text="@string/option_america" />

    <RadioButton
        android:id="@+id/option_asia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onRadioButtonClicked"
        android:text="@string/option_asia" />

    <RadioButton
        android:id="@+id/option_australia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onRadioButtonClicked"
        android:text="@string/option_australia" />

    <RadioButton
        android:id="@+id/option_europe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onRadioButtonClicked"
        android:text="@string/option_europe" />

</RadioGroup>

The layout file contains five RadioButton widgets. The widgets are wrapped inside of a RadioGroup widget which groups them and makes sure that only one RadioButton can be selected at any time.

One thing to note is that every RadioButton widget has onClick attribute set with value onRadioButtonClicked. This means that every time any one of those RadioButtons is clicked a onRadioButtonClicked method is called in the parent Activity.

Code

com.caphal.android.radiobutton.RadioButtonActivity

package com.caphal.android.radiobutton;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class RadioButtonActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radiobutton);
    }

    public void onRadioButtonClicked(View view) {

        String selection = "";

        switch (view.getId()) {
        case R.id.option_africa:
            selection = "Africa";
            break;
        case R.id.option_america:
            selection = "America";
            break;
        case R.id.option_asia:
            selection = "Asia";
            break;
        case R.id.option_australia:
            selection = "Australia";
            break;
        case R.id.option_europe:
            selection = "Europe";
            break;
        }

        Toast.makeText(this, selection, Toast.LENGTH_SHORT).show();
    }
}

The activity is simple one containin only onCreate and onRadioButtonClicked methods. As I said earlier, the onRadioButtonClicked method is called when a RadioButton widgets is clicked. The method uses a simple switch statement to find out which RadioButton was clicked and then shows Toast message depending on the selection to the user.

By changing the onClick attribute value in the layout file you can select which method is called when the RadioButton is clicked. There are three things to remember when creating the click methods:

  1. The method needs to be public
  2. The method must return void
  3. The method has to take one parameter of type View. This parameter is the view class that was clicked.

Screenshots

Initial view Selection

Source code

Source code for this example project is available here

Further reading

Comments

comments powered by Disqus