Custom Android RadioButton

I was browsing StackOverflow and came across a question about making custom RadioButtons I figured I could answer so I decided to take the plunge.

So here is how to implement a custom styled RadioButton, you can find the source here.

To do so, you need to take the following steps:

Create the drawable resources for your custom RadioButton. You should have at least 4 icons:

Pressed Checked
True True
True False
False True
False False

Place your images in res/drawable or if if you make version for each screen density in their corresponding res/drawable-ldpi, res/drawable-mdpi, and res/drawable-hdpi folders.

Then create a selector type XML file in res/drawable. Here is my res/drawable/button_radio.xml

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

Then set-up your RadioGroup like so:

<RadioGroup android:layout_width="fill_parent"
   android:layout_height="50dp"
   android:orientation="horizontal"
   android:checkedButton="@+id/first">
   <RadioButton android:id="@+id/first"
      android:width="50dp"
      android:height="50dp"
      android:button="@drawable/button_radio"/>
   <RadioButton android:id="@+id/second"
      android:width="50dp"
      android:height="50dp"
      android:button="@drawable/button_radio"/>
   <RadioButton android:id="@+id/third"
      android:width="50dp"
      android:height="50dp"
      android:button="@drawable/button_radio"/>
   <RadioButton android:id="@+id/fourth"
      android:width="50dp"
      android:height="50dp"
      android:button="@drawable/button_radio"/>
</RadioGroup>

I have specified dimension of 50dp as the dimension of my drawables are 50px x 50px. Also notice I am setting android:button and not android:background.

Hopefully this can serve as a nice starting point for anyone looking to create some new and interesting effects with simple RadioButtons.

Leave a comment ?

24 Comments.

  1. 个性化Android中的RadioButton | 紫老虎 - pingback on December 23, 2010 at 21:45
  2. awesome tutorial =)

    tnx man

  3. Superb tutorial..!!! thanks

  4. Great, THanks for sharing helpful tutorial.

  5. great tutorial sample.
    Thank you very much.

  6. Thanks!!! It’s exactly what i was looking for!!!

  7. perfect site and provide the latest information for the world community. please give comments to my site : http://aboutandroidapps.com/

    thank’s

  8. 5. Excellent goods from you, man. I’ve understand your stuff previous to and you are just extremely magnificent. I really like what you’ve acquired here, certainly like what you’re saying and the way in which you say it. You make it entertaining and you still take care of to keep it smart. I can not wait to read far more from you. This is really a terrific web site.

  9. Hey,

    I see a radio button of size approx 35dp in my custom which is the same size of a normal android provided sdk radio button.It is not reducing when i define the sizes anywhere.How can i reduce the size of the displayed radio button.

    Thanks,
    Aarti

    • @Aarti: you can not reduce the size than the drawable size you have used. To do so make sure you took smaller drawable or same sized of your requirement.

  10. I am no longer certain where you are getting your info, however good topic. I must spend a while finding out more or working out more. Thanks for magnificent information I was searching for this information for my mission.

  11. Thx guys..
    its really helpfull for me.

  12. Bernard Czaiński

    I’ve applied this, it looks great. Thank very much.
    Bernard Czaiński (Poland) :razz:

  13. Aarti: To get the image to resize use android:background=”@drawable/yourimage” for your image. I then created a 1×1 transparent gif that I used for android:button=”@drawable/transparent_gif”. That will get rid of the ugly round button. I know it sucks to have to do this, but it works!

  14. Although I actually like this publish, I think there was an spelling error close to the end of your third section.

  15. Hi nice tutorial Only thing i dont understand is when i implement this code it works perfect when button is unchecked. once checked it does not show unchecked state by any means. Have you ever faced this kind of situation? any help will be appreciated.
    Best regards,
    Mahesh.

  16. Custom Radio Button in Android | Asish's Blog - pingback on March 6, 2013 at 10:01
  17. Nice tutorial.
    It was very helpfull to me.

  18. Hi there my good friend! I need to state that this informative article is actually incredible, good written and are available by using virtually all critical infos. I will peer additional articles similar to this .

  19. Thank you for this

  20. i just want to ask how to make a radiobutton reveal an image when check.
    ex
    radiobutton male when clicked will reveal a male image
    radiobutton female when clicked will reveal a female image.

  21. Doesn’t work for me. It turns into pressed mode, but it never goes back to off mode.

  22. Incredible story tɦere. What happened after? Take care!

    mʏ web-site; Paul Cwalina

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackbacks and Pingbacks: