How to make Android CheckBox and RadioButton custom style

Hi,

Anybody know that real cool Android application must have not only excelent business logic. The one of the most important things what application must have is a nice UI.

If you want to create realy interesting application you need to create good UI. And …. hire a designer :)

Below i want to tell you how to create your own CheckBoxes and RadioButtons for your Android Applications. Sorry for this sample UI design. I didn’t hire a designer :).

First look at screenshot:

Custom Android CheckBox style and RadioButton style. Device screenshot

Here you can see simple app with only one activity. Also below you can download the source code of Android project.

To make your own style for CheckBox or RadioButton you need to do next:

  • Create Image Drawables for their two stater (checked/unchecked)
  • Create selector for this two drawables. The sample content must be seem like this:
<?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/star_down" />
	<item android:state_checked="false" android:drawable="@drawable/star" />
</selector>
  • Add this selector as android:button attribute for CheckBox or RadioButton
<CheckBox 
		android:text="Custom CheckBox" 
		android:button="@drawable/checkbox_selector"
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"/>

That’s all. To make custom style for CheckBox and RadioButton you must do same steps.
Here you can download the Android project with the sample.

Download it from github

21 thoughts on “How to make Android CheckBox and RadioButton custom style

  • By fergonrom - Reply

    Good job. It have been util for me but I’ve got a problem and I can’t donwload the project because the link is wrong.
    I’d appreciate your solutions as.

    Thanks!

  • By Igor - Reply

    Hi, fergonrom
    Please, check the link. I just made some changes.

    You are welcome!

  • By MIke - Reply

    Hi , thanks for this!. How can I do this dynamically through code?

    -Mike

  • By Igor - Reply

    Hi, Mike

    You can do it through code. Just do next:

    checkBox.setButtonDrawable(R.drawable.checkbox_selector);

    That’s all.

  • By Mia Wallace - Reply

    Thank you so much.
    I´ve been very useful for my first android application.

  • By Abhishek - Reply

    Hi Igor Khrupin

    Thanks for explaining the custom concept of checkbox : )))))

  • By Larry - Reply

    Thank you very much for the easy to follow example.

  • By eCorke - Reply

    yeah, thanks man, simple, clear solution.. thanks again :)

  • By Tony - Reply

    Very nice, I was trying to solve this. Worked the first time.

    Thanks!

  • By sham - Reply

    Error generating final archive: Failed to seal APK
    I found this error while executing the above code.. im new to android, can u plz help me out

  • By Igor - Reply

    Hi, sham

    Could you please give me Logcat output for this error

  • By JGR - Reply

    hi! in the checkbox, how can I change the size of the image dinamically.. like in a imageview–> android:scaleType=”centerCrop”?.. lets take your star example. if I have a bigger size star.png the checkbox would wrap_content this. How can I crop it?

  • By marco - Reply

    Fantastic Tutorial, thanks.

  • By Ankur Paliwal - Reply

    fantastic

  • By Excellent!!! - Reply

    Excelent tutorial, thanks a lot mat!

  • By mobile application development - Reply

    I am sure that what you have said will definitely pierce the ears of your readers and make them think more deeply about it

  • By Craig - Reply

    How do you resize the checkbox, though? I’m trying to do it in the XML and just cannot figure it out. There are no “scale type” or “adjust view bounds” properties for checkboxes, and things like “max height” seem to have no effect.

  • By Chirag - Reply

    Hi,
    I think this was a good example and explains a lot about check boxes and radio buttons.

    But I am having a tough time displaying an image as the content of the radiobutton. This next line will make it clear:

    (0) Image1
    (0) Image2

    Is it possible to add image in such a manner to a radiobutton? If Yes, how? I have to do the same to checkbox also. Is it possible for checkbox? If yes how?

  • By Joonasj - Reply

    Hi!

    Is it also possible to change the pressed stage by this method?

  • By mzennis - Reply

    its all i need, tq so much ^^

  • By satish - Reply

    IOS and Android

Leave a Reply

Your email address will not be published. Required fields are marked *


8 − = three

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">