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.
Download the source code . Here you can download the Android project with the sample.

facebooktwittergoogle_plusredditpinterestlinkedintumblrmailby feather

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

  1. 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!

  2. 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

  3. 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?

  4. 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.

  5. 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?

Leave a Reply

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


4 × seven =

You may 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>