Android Custom Radio Button

Android Custom Radio Button is a subclass of TextView, so everything discussed in the preceding section in terms of formatting the face of the button still holds.

The properties are already seen in the previous Android TextView Tutorial .

We have already seen about how to display words using TextView, changin its color, face properties, setting up action listener and background for our button, using Toast to display a notification, using ImageButton, checkbox, custom checkbox and radio button in the previous tutorials.

Now we are going to discuss about Android Custom Radio Button

Methods to be used in Java Code

isChecked() — to determine if the radio button has been checked
setChecked() — to force the radio button into a checked or unchecked state
toggle() — to toggle the radio button as if the user checked it

Most times, you will want to put your RadioButton widgets inside of a RadioGroup.

The RadioGroup indicates a set of radio buttons whose state is tied, meaning only one button out of the group can be selected at any time.

If you assign an android:id to your RadioGroup in your XML layout, you can access the group from your Java code and invoke.

Methods to be used in Java Code

check()–to check a specific radio button by using its ID. For example => group.check(R.id.radio1)
clearCheck()–to clear all radio buttons, so none of the radio buttons in the group are checked
getCheckedRadioButtonId()–to get the ID of the currently-checked radio button. It will return -1 if none are checked.

For this tutorial I have create Four Radio Buttons.

Paste the following code in your main.xml layout button, and play with the property values till you get your desire result.

Creating Layout For Custom Radio Button

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/phone_mode_"
        android:padding="10dp" />
    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        <RadioButton
            android:id="@+id/gen_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="@string/general"
            android:button="@drawable/my_radio"/>
        <RadioButton
            android:id="@+id/sil_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/silent"
            android:button="@drawable/my_radio"/>
        <RadioButton
            android:id="@+id/met_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/meeting"
            android:button="@drawable/my_radio"/>
        <RadioButton
            android:id="@+id/off_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/offline"
            android:button="@drawable/my_radio" />
    </RadioGroup>
</LinearLayout>

Assigning Custom Image to the Radio Button

my_radio.xml

<?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_on" />
    <item android:state_checked="false" android:drawable="@drawable/radio_off" />
</selector>

Below you can find the description of each properties.

android:id=”@+id/radioGroup1″ — Unique Id of the Radio Group used to refer later in our java code.

android:id=”@+id/gen_radio” — Unique Id of the Radio Button used to refer later in our java code.

android:layout_width=”wrap_content” — Radio Button width will be same as the content width.

android:layout_height=”wrap_content” — Radio Button width will be same as the content width.

android:typeface=”serif” — Typeface (normal, sans, serif, monospace) for the text. [enum]

android:text=”@string/general” — You need to set a string to the Radio Button to display.

Paste the following code in Activity java file inside the src folder.

AndroidRadioActivity.java

package com.vimaltuts.android.androidradio;
import android.app.Activity;
import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.Toast;
public class AndroidRadioActivity extends Activity implements OnCheckedChangeListener{
    private RadioGroup mode;
	private String str;
	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mode=(RadioGroup)findViewById(R.id.radioGroup1);
        mode.setOnCheckedChangeListener(this);
    }
	@Override
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		switch(checkedId){
			case R.id.gen_radio:
				str="General Mode";
				break;
			case R.id.met_radio:
				str="Meeting Mode";
				break;
			case R.id.sil_radio:
				str="Silent Mode";
				break;
			case R.id.off_radio:
				str="Offline Mode";
				break;
		}
		Toast.makeText(AndroidRadioActivity.this, str , Toast.LENGTH_SHORT).show();
	}
}

Lets split the code for better understanding

Create a RadioGroup and give a ID.

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

Inside RadioGroup Create four RadioButtons and set the following properties

   <RadioButton
            android:id="@+id/gen_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="@string/general"
            android:button="@drawable/my_radio"/>

create a xml file in the res->drawable-hdpi folder named my_radio

import images for the radio button on and off state

Now you can map the images to the button state by using the following code

  <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/radio_on" />
    <item android:state_checked="false" android:drawable="@drawable/radio_off" />
  </selector>

In AndroidRadioActivity Apply setOnCheckedChangeListener() to the RadioGroup.

In the onCreate() method create a RadioGroup private field and assign the RadioGroup reference by using findViewById(R.id.radioGroup1).

Set OnCheckedChangeListener to RadioGroup and place the desire code inside it’s onCheckedChanged() method.

Now we are going to check whether the RadioButton is checked by using its checkedId.

Inside the switch assign a string to variable str based on the case.

Finally display the result using the Toast.

Toast.makeText(AndroidRadioActivity.this, str , Toast.LENGTH_SHORT).show();

Output Screen of the Android Custom Radio Button

In this Android Custom Radio Button Tutorial we have seen about the Advanced Custom Radio Button. In the next tutorial we are going to see about the Android List View Control

Google+