Wednesday, June 5, 2013

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>

15 comments:

  1. Really very useful for me. Thanks. Great Work

    ReplyDelete
  2. Vey simple, clean, easy to understand and elegant..

    ReplyDelete
  3. it gives an error no resource found that matches the given text @drawable/checkedradiobutton.please help me

    ReplyDelete
    Replies
    1. add picture of your radio button in you @drawable folder

      Delete
  4. can i add image and text with radio button with arrylist

    ReplyDelete
  5. Simple and very effective. Many thanks.

    ReplyDelete
  6. Hello, i think that i saw you visited my web site thus i came to “return the favor”.I am attempting to find things to improve my web site!I suppose its
    ok to use some of your ideas!!

    ReplyDelete
  7. There is such a great amount in this article I would never have considered all alone. Your substance gives perusers things to consider in a fascinating way. Much obliged to you for your reasonable data. running snail weather radio manual

    ReplyDelete