Customizing Radio Button In Android

Custom Radio Buttons

In android we can customize  the default Radio Buttons. Default Radio Buttons are small and also not attractive, By using customized Radio Buttons we can design more attractive and better user interface.

To customize Radio Buttons we need to have two drawables
1:  when radio button is selected.
2:  when radio button is not selected.

In this example I have  used these two drawables for selected and not selected state.

                                          

We need to define the xml for our customized Radio Buttons

create the custom_radio_button.xml  file and put it in drawable folder( if drawable folder is not there ,cerate it (inside res folder, and put custom_checkbox_design.xm  file in this folder). It should look like following in pacakgae explorer

res
  -> drawable
         -> custom_radio_button.xml


custom_radio_button.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/checkedradiobutton" />
         <item android:state_checked="false" android:drawable="@drawable/unchekedradiobutton" />
    
    </selector>
    
    

In RadioButton(in your .xml file)   set android:button  property to the  custom_checkbox_design.xml   drawable  like

android:button="@drawable/custom_checkbox_design"

See the differences in default checkbox and customize checkbox in below screenshot

<LinearLayout
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:orientation="vertical"
               xmlns:android="http://schemas.android.com/apk/res/android">

   <TextView
                android:id="@+id/textView1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:gravity="center_horizontal"
                android:textSize="25dp"
                android:text="Default Radio Buttons" />
 
  
 
   <!--   Default RadioButtons  -->

   <RadioButton
                   android:id="@+id/radioButtonDeafult1"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:layout_gravity="center_horizontal"
                   android:text="Radio Button Selected"
                   android:layout_marginTop="20dp"
                   android:checked="true"
                   android:textSize="20dp" />
     <RadioButton
                   android:id="@+id/radioButtonDeafult2"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:text="Radio Button Not Selected"
                   android:layout_marginTop="10dp"
                   android:checked="false"
                   android:textSize="20dp" />
   
   
        <View
                   android:layout_width="fill_parent"
                   android:layout_height="1dp"
                   android:layout_marginTop="20dp"
                   android:background="#B8B894" />
   
      <TextView
                   android:id="@+id/textView1"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:layout_marginTop="30dp"
                   android:gravity="center_horizontal"
                   android:textSize="25dp"
                   android:text="Customized Radio Buttons" />
    
    
      <!--   Customized RadioButtons  -->

   <RadioButton
                   android:id="@+id/radioButtonCustomized1"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:text="   Radio Button Selected"
                   android:layout_marginTop="20dp"
                   android:checked="true"
                   android:button="@drawable/custom_radio_button"
                   android:textSize="20dp" />
     <RadioButton
                   android:id="@+id/radioButtonCustomized2"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:text="  Radio Button Not Selected"
                   android:layout_marginTop="10dp"
                   android:checked="false"
                   android:button="@drawable/custom_radio_button"
                   android:textSize="20dp" />
 

</LinearLayout>