Igor Khrupin

How to make Android CheckBox and RadioButton custom style

Tweet

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:

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.

Tweet

Tags: Android, CheckBox, RadioButton, Style, UI

This entry was posted on 30 September, 2011, 14:58 and is filed under Android Development. You can follow any responses to this entry through RSS 2.0. Responses are currently closed, but you can trackback from your own site.

19 Comments

• #1 by fergonrom on 6 October, 2011 - 00:28

  

  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 by Igor on 6 October, 2011 - 08:39

  

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

  You are welcome!

• #3 by MIke on 18 October, 2011 - 04:29

  

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

  -Mike

• #4 by Igor on 21 October, 2011 - 14:21

  

  Hi, Mike

  You can do it through code. Just do next:

  checkBox.setButtonDrawable(R.drawable.checkbox_selector);

  That’s all.

• #5 by Mia Wallace on 12 November, 2011 - 22:13

  

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

• #6 by Abhishek on 16 January, 2012 - 08:25

  

  Hi Igor Khrupin

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

• #7 by Larry on 4 March, 2012 - 19:15

  

  Thank you very much for the easy to follow example.

• #8 by eCorke on 5 March, 2012 - 02:48

  

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

• #9 by Tony on 1 April, 2012 - 21:43

  

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

  Thanks!

• #10 by sham on 5 April, 2012 - 11:28

  

  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

• #11 by Igor on 5 April, 2012 - 11:54

  

  Hi, sham

  Could you please give me Logcat output for this error

• #12 by JGR on 12 April, 2012 - 04:40

  

  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?

• #13 by marco on 7 May, 2012 - 16:46

  

  Fantastic Tutorial, thanks.

• #14 by Ankur Paliwal on 31 May, 2012 - 07:57

  

  fantastic

• #15 by Excellent!!! on 2 June, 2012 - 16:54

  

  Excelent tutorial, thanks a lot mat!

• #16 by mobile application development on 5 June, 2012 - 08:11

  

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

• #17 by Craig on 9 June, 2012 - 22:26

  

  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.

• #18 by Chirag on 25 June, 2012 - 11:03

  

  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?

• #19 by Joonasj on 2 July, 2012 - 10:08

  

  Hi!

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

Comments are closed.