Custom Radio Buttons example in android

In this Post, Custom Radio Buttons using Drawable Resource(color code in selector XML files).

I have create two XML file. one for Radio Buttons Background selector and second for Radio Buttons text color selector.

1. Create One XML file in "res/drawable/rbtn_selector.xml" add below XML code for Radio Button background.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true"><shape>
            <solid android:color="#1c5fab" />

            <stroke android:width="1dp" android:color="#1c5fab" />
        </shape></item>
    <item android:state_checked="false"><shape android:shape="rectangle">
            <solid android:color="#ffffff" />

            <stroke android:width="1dp" android:color="#1c5fab" />
        </shape></item>

</selector>

Note : If we have custom background PNG images for radio Button background then create Selector like below(Put your images in "res/drawable" folder).

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/bg_radio_button_checked" android:state_checked="true"/>
    <item android:drawable="@drawable/bg_radio_button_unchecked" android:state_checked="false"/>

</selector>

2. Create One XML file in "res/drawable/rbtn_textcolor_selector.xml" add below XML code for Radio Buttons Text selector color.(Text Color Selector xml file)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:color="#ffffffff"/>
    <item android:color="#ff1c5fab"/>

</selector>

3. create XML file in layout folder "res/layout/activity_customradiobutton.xml".

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingTop="10dp" >

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/radioAndroid"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/rbtn_selector"
            android:button="@null"
            android:checked="true"
            android:gravity="center"
            android:padding="5dp"
            android:text="Android"
            android:textColor="@drawable/rbtn_textcolor_selector" />

        <RadioButton
            android:id="@+id/radioiPhone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/rbtn_selector"
            android:button="@null"
            android:gravity="center"
            android:padding="5dp"
            android:text="iPhone"
            android:textColor="@drawable/rbtn_textcolor_selector" />

        <RadioButton
            android:id="@+id/radioWindows"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/rbtn_selector"
            android:button="@null"
            android:gravity="center"
            android:padding="5dp"
            android:text="Windows"
            android:textColor="@drawable/rbtn_textcolor_selector" />
    </RadioGroup>

</LinearLayout>

4. Create on activity java file "CustomRadioButtonActivity.java"
I have use setOnCheckedChangeListener for  a callback to be invoked when the checked radio button changed in this group.

import android.app.Activity;
import android.os.Bundle;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.Toast;


public class CustomRadioButtonActivity extends Activity
{

 private RadioGroup radioGroup1;

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

  radioGroup1 = (RadioGroup) findViewById(R.id.radioGroup1);

  // Checked change Listener for RadioGroup 1
  radioGroup1.setOnCheckedChangeListener(new OnCheckedChangeListener() 
  {
   @Override
   public void onCheckedChanged(RadioGroup group, int checkedId) 
   {
    switch (checkedId) 
    {
    case R.id.radioAndroid:
     Toast.makeText(getApplicationContext(), "Android RadioButton checked", Toast.LENGTH_SHORT).show();
     break;
    case R.id.radioiPhone:
     Toast.makeText(getApplicationContext(), "iPhone RadioButton checked", Toast.LENGTH_SHORT).show();
     break;
    case R.id.radioWindows:
     Toast.makeText(getApplicationContext(), "windows RadioButton checked", Toast.LENGTH_SHORT).show();
     break;
    default:
     break;
    }
   }
  });
 }
}

5. Add your activity class in AndroidManifest.xml file

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.limbani.masterapp"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.limbani.masterapp.CustomRadioButtonActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Doanload Sample Here

enjoy :)
Thank you.

Radio Buttons example in Android

In this post, I write sample code for RadioButtons with RadioGroup.
Generally RadioButtons are grouped with RadioGroup, If RadioButtons are in group, when one RadioButton within a group is selected, all others are automatically deselected.

Also we can set orientation of the RadioButton vertical or horizontal using below property of the RadioGroup. I show RadioButtons both orientation in XML layout I have create two RadioButton there for example.

        android:orientation="horizontal"
        or
        android:orientation="vertical"

1. create xml file in layout folder "activity_radiobutton.xml".

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingTop="10dp" >

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/radioAndroid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Android" />

        <RadioButton
            android:id="@+id/radioiPhone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="iPhone" />

        <RadioButton
            android:id="@+id/radioWindows"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Windows" />
    </RadioGroup>

    <RadioGroup
        android:id="@+id/radioGroup2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:orientation="vertical" >

        <RadioButton
            android:id="@+id/radioAndroid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Android" />

        <RadioButton
            android:id="@+id/radioiPhone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="iPhone" />

        <RadioButton
            android:id="@+id/radioWindows"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Windows" />
    </RadioGroup>

    <Button
        android:id="@+id/btnDisplay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:text="Display" />

</LinearLayout>

2. Create on activity java file "RadioButtonActivity.java"
I have use setOnCheckedChangeListener for  a callback to be invoked when the checked radio button changed in this group.

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.Toast;

import com.limbani.masterapp.R;

public class RadioButtonActivity extends Activity
{

 private RadioGroup radioGroup1 , radioGroup2;
 private Button btnDisplay;

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

  btnDisplay = (Button) findViewById(R.id.btnDisplay);

  radioGroup1 = (RadioGroup) findViewById(R.id.radioGroup1);
  radioGroup2 = (RadioGroup) findViewById(R.id.radioGroup2);

  // Checked change Listener for RadioGroup 1
  radioGroup1.setOnCheckedChangeListener(new OnCheckedChangeListener() 
  {
   @Override
   public void onCheckedChanged(RadioGroup group, int checkedId) 
   {
    switch (checkedId) 
    {
    case R.id.radioAndroid:
     Toast.makeText(getApplicationContext(), "Android", Toast.LENGTH_SHORT).show();
     break;
    case R.id.radioiPhone:
     Toast.makeText(getApplicationContext(), "iPhone", Toast.LENGTH_SHORT).show();
     break;
    case R.id.radioWindows:
     Toast.makeText(getApplicationContext(), "windows", Toast.LENGTH_SHORT).show();
     break;
    default:
     break;
    }
   }
  });

  // Checked change Listener for RadioGroup 2 
  radioGroup2.setOnCheckedChangeListener(new OnCheckedChangeListener() 
  {
   @Override
   public void onCheckedChanged(RadioGroup group, int checkedId) 
   {
    switch (checkedId) 
    {
    case R.id.radioAndroid:
     Toast.makeText(getApplicationContext(), "Android", Toast.LENGTH_SHORT).show();
     break;
    case R.id.radioiPhone:
     Toast.makeText(getApplicationContext(), "iPhone", Toast.LENGTH_SHORT).show();
     break;
    case R.id.radioWindows:
     Toast.makeText(getApplicationContext(), "windows", Toast.LENGTH_SHORT).show();
     break;
    default:
     break;
    }
   }
  });


  //here displa checked radio button from radio group 1 only also we check same like radio gruop 2
  btnDisplay.setOnClickListener(new OnClickListener() 
  {
   @Override
   public void onClick(View v) 
   {
    int selectedId = radioGroup1.getCheckedRadioButtonId();

    // find the radiobutton by returned id
    RadioButton radioButton = (RadioButton) findViewById(selectedId);
    Toast.makeText(RadioButtonActivity.this, radioButton.getText(), Toast.LENGTH_SHORT).show();
   }
  });
 }
}

3. Add your activity class in AndroidManifest.xml file

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.limbani.masterapp"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.limbani.masterapp.RadioButtonActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

4. Screen Shot

Download APK file Here

enjoy :)
Thank you.