Tutorial: change look of CheckBox

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...

Tutorial: change look of CheckBox

Postby darolla » Sun Jan 25, 2009 6:50 pm

Hi,

this little tutorial should show how to manipulate the look of a widget, in this case a checkbox.

Let's start from scratch with a new application.

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  5.  
  6.         android:orientation="vertical" android:layout_width="fill_parent"
  7.  
  8.         android:layout_height="fill_parent">
  9.  
  10.  
  11.  
  12.         <CheckBox android:layout_width="wrap_content"
  13.  
  14.                 android:layout_height="wrap_content" android:text="a checkbox" />
  15.  
  16.  
  17.  
  18.         <CheckBox android:layout_width="wrap_content"
  19.  
  20.                 android:layout_height="wrap_content" android:text="checked checkbox"
  21.  
  22.                 android:checked="true" />
  23.  
  24.  
  25.  
  26. </LinearLayout>
  27.  
  28.  
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


Greetings,
DaRolla
Attachments
1.png
1.png (7.39 KiB) Viewed 92120 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Top

Postby darolla » Sun Jan 25, 2009 6:56 pm

now let's take a look how a CheckBox is designed.

we start on "android-sdk-windows-1.0_r2\tools\lib\res\default\values\themes.xml".

searching for "checkbox" we find:

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <item name="checkboxStyle">@android:style/Widget.CompoundButton.CheckBox</item>
  3.  
  4.  
Parsed in 0.000 seconds, using GeSHi 1.0.8.4


this tells us that the name of the style is "Widget.CompoundButton.CheckBox".

lets take a look on "android-sdk-windows-1.0_r2\tools\lib\res\default\values\styles.xml".

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2.     <style name="Widget.CompoundButton.CheckBox">
  3.  
  4.         <item name="android:background">@android:drawable/btn_check_label_background</item>
  5.  
  6.         <item name="android:button">@android:drawable/btn_check</item>
  7.  
  8.     </style>
  9.  
  10.  
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


okay.

in the folder "android-sdk-windows-1.0_r2\tools\lib\res\default\drawable" we should be able to find file named "btn_check_label_background" and "btn_check". the suffix can be .xml or .png or .9.png.

well, we will find this:

btn_check_label_background.9.png

btn_check.xml

I will attach the btn_check_label_background.9.png.

Greetings,
DaRolla
Attachments
btn_check_label_background.9.png
btn_check_label_background.9.png (178 Bytes) Viewed 92116 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Sun Jan 25, 2009 7:04 pm

okay, the btn_check_label_background.9.png is transparent and because its a .9.png it has some help lines. left and top is for how to stretch the image. right and bottom is for placing the content (mostly text).

the btn_check.xml is more interesting for us right now.

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  5.  
  6.  
  7.  
  8.     <!-- Enabled states -->
  9.  
  10.        
  11.  
  12.     <item android:state_checked="true" android:state_window_focused="false"
  13.  
  14.          android:state_enabled="true"
  15.  
  16.          android:drawable="@drawable/btn_check_on" />
  17.  
  18.     <item android:state_checked="false" android:state_window_focused="false"
  19.  
  20.          android:state_enabled="true"
  21.  
  22.          android:drawable="@drawable/btn_check_off" />
  23.  
  24.  
  25.  
  26.     <item android:state_checked="true" android:state_pressed="true"
  27.  
  28.          android:state_enabled="true"
  29.  
  30.          android:drawable="@drawable/btn_check_on_pressed" />
  31.  
  32.     <item android:state_checked="false" android:state_pressed="true"
  33.  
  34.          android:state_enabled="true"
  35.  
  36.          android:drawable="@drawable/btn_check_off_pressed" />
  37.  
  38.  
  39.  
  40.     <item android:state_checked="true" android:state_focused="true"
  41.  
  42.          android:state_enabled="true"
  43.  
  44.          android:drawable="@drawable/btn_check_on_selected" />
  45.  
  46.     <item android:state_checked="false" android:state_focused="true"
  47.  
  48.          android:state_enabled="true"
  49.  
  50.          android:drawable="@drawable/btn_check_off_selected" />
  51.  
  52.  
  53.  
  54.     <item android:state_checked="false"
  55.  
  56.          android:state_enabled="true"
  57.  
  58.          android:drawable="@drawable/btn_check_off" />
  59.  
  60.     <item android:state_checked="true"
  61.  
  62.          android:state_enabled="true"
  63.  
  64.          android:drawable="@drawable/btn_check_on" />
  65.  
  66.  
  67.  
  68.  
  69.  
  70.     <!-- Disabled states -->
  71.  
  72.  
  73.  
  74.     <item android:state_checked="true" android:state_window_focused="false"
  75.  
  76.          android:drawable="@drawable/btn_check_on_disable" />
  77.  
  78.     <item android:state_checked="false" android:state_window_focused="false"
  79.  
  80.          android:drawable="@drawable/btn_check_off_disable" />
  81.  
  82.  
  83.  
  84.     <item android:state_checked="true" android:state_focused="true"
  85.  
  86.          android:drawable="@drawable/btn_check_on_disable_focused" />
  87.  
  88.     <item android:state_checked="false" android:state_focused="true"
  89.  
  90.          android:drawable="@drawable/btn_check_off_disable_focused" />
  91.  
  92.  
  93.  
  94.     <item android:state_checked="false" android:drawable="@drawable/btn_check_off_disable" />
  95.  
  96.     <item android:state_checked="true" android:drawable="@drawable/btn_check_on_disable" />
  97.  
  98.  
  99.  
  100. </selector>
  101.  
  102.  
Parsed in 0.008 seconds, using GeSHi 1.0.8.4


in this xml file there are lots of graphics used. all these graphics can be found in the same folder as the xml "android-sdk-windows-1.0_r2\tools\lib\res\default\drawable".

I will attach some files so that you can see them. from the screenshot 1.png you will know btn_check_off.png and btn_check_on.png.
Attachments
btn_check_off_selected.png
btn_check_off_selected.png (1.75 KiB) Viewed 92109 times
btn_check_off_pressed.png
btn_check_off_pressed.png (1.71 KiB) Viewed 92109 times
btn_check_on.png
btn_check_on.png (1.6 KiB) Viewed 92109 times
btn_check_off.png
btn_check_off.png (1.23 KiB) Viewed 92112 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Sun Jan 25, 2009 7:11 pm

okay, we analysed how it is done. but how can we use our knoweledge to change the look of a checkbox?

thanks to the developers there are some gfx and xml files in the folder "android-sdk-windows-1.0_r2\tools\lib\res\default\drawable" we can use :)

checkbox.xml
checkbox_background.xml
checkbox_label_background.9.png
checkbox_off_background.png
checkbox_off_background_focus_yellow.png
checkbox_on_background.png
checkbox_on_background_focus_yellow.png

Greetings,
DaRolla
Attachments
checkbox_on_background_focus_yellow.png
checkbox_on_background_focus_yellow.png (3.49 KiB) Viewed 92105 times
checkbox_on_background.png
checkbox_on_background.png (3.28 KiB) Viewed 92105 times
checkbox_off_background_focus_yellow.png
checkbox_off_background_focus_yellow.png (3.24 KiB) Viewed 92105 times
checkbox_off_background.png
checkbox_off_background.png (3.03 KiB) Viewed 92105 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Sun Jan 25, 2009 7:16 pm

lets start copying all these files into our drawable folder in our project.

well, thats works nicely. (sometimes there are problemes with the namesspace.)

lets take a look into both xml files.

checkbox.xml: here are the gfx called with less states than in the original. but thats okay.
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  5.  
  6.  
  7.  
  8.         <item android:state_checked="true" android:state_focused="true"
  9.  
  10.                 android:drawable="@drawable/checkbox_on_background_focus_yellow" />
  11.  
  12.                
  13.  
  14.         <item android:state_checked="false" android:state_focused="true"
  15.  
  16.                 android:drawable="@drawable/checkbox_off_background_focus_yellow" />
  17.  
  18.                
  19.  
  20.         <item android:state_checked="false"
  21.  
  22.                 android:drawable="@drawable/checkbox_off_background" />
  23.  
  24.        
  25.  
  26.         <item android:state_checked="true"
  27.  
  28.                 android:drawable="@drawable/checkbox_on_background" />
  29.  
  30.        
  31.  
  32. </selector>
  33.  
  34.  
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


checkbox_background.xml: it just references one gfx. (btw: we could use that gfx directly later on)
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  5.  
  6.  
  7.  
  8.     <item android:drawable="@drawable/checkbox_label_background" />
  9.  
  10.    
  11.  
  12. </selector>
  13.  
  14.  
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


Greetings,
DaRolla
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Sun Jan 25, 2009 7:24 pm

we could write our own theme, or we can do it the fast way.

do u remember the styles.xml?

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2.     <style name="Widget.CompoundButton.CheckBox">
  3.  
  4.         <item name="android:background">@android:drawable/btn_check_label_background</item>
  5.  
  6.         <item name="android:button">@android:drawable/btn_check</item>
  7.  
  8.     </style>
  9.  
  10.  
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


here it all starts.

and this we will use inside our main.xml.

lets build two new checkboxes:

main.xml:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  5.  
  6.         android:orientation="vertical" android:layout_width="fill_parent"
  7.  
  8.         android:layout_height="fill_parent">
  9.  
  10.  
  11.  
  12.         <CheckBox android:layout_width="wrap_content"
  13.  
  14.                 android:layout_height="wrap_content" android:text="a checkbox" />
  15.  
  16.  
  17.  
  18.         <CheckBox android:layout_width="wrap_content"
  19.  
  20.                 android:layout_height="wrap_content" android:text="checked checkbox"
  21.  
  22.                 android:checked="true" />
  23.  
  24.  
  25.  
  26.  
  27.  
  28.         <CheckBox android:layout_width="wrap_content"
  29.  
  30.                 android:layout_height="wrap_content" android:text="new checkbox"
  31.  
  32.                 android:background="@drawable/checkbox_background" android:button="@drawable/checkbox" />
  33.  
  34.  
  35.  
  36.         <CheckBox android:layout_width="wrap_content"
  37.  
  38.                 android:layout_height="wrap_content" android:text="new checked checkbox"
  39.  
  40.                 android:checked="true" android:background="@drawable/checkbox_background"
  41.  
  42.                 android:button="@drawable/checkbox" />
  43.  
  44.  
  45.  
  46. </LinearLayout>
  47.  
  48.  
Parsed in 0.004 seconds, using GeSHi 1.0.8.4


all new we did was changing the background gfx
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. android:background="@drawable/checkbox_background"
  3.  
  4.  
Parsed in 0.000 seconds, using GeSHi 1.0.8.4


and the button gfx with its states
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. android:button="@drawable/checkbox"
  3.  
  4.  
Parsed in 0.000 seconds, using GeSHi 1.0.8.4


Greetings,
DaRolla
Attachments
2.png
2.png (8.42 KiB) Viewed 92098 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Top

Postby darolla » Sun Jan 25, 2009 7:31 pm

I hope this helps you helping yourself.

Just try to change some other widgets.

Its the same, everytime.

Starting with theme.xml, then styles.xml, copying the files, calling them inside your own main.xml based on the information that is in styles.xml.

I'll attach the project for you.

Greetings,
DaRolla

PS: these links may help you, too

http://www.anddev.org/making_own_theme-t4052.html

http://www.anddev.org/tutorial_ui_themes-t4367.html

http://www.anddev.org/tutorial_buttons_ ... t4369.html
Attachments
CheckThisBox.zip
(22.9 KiB) Downloaded 2903 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby silverburgh.meryl » Tue Feb 17, 2009 5:31 pm

Can you please tell me how can I do the same for to configure my own widget?

I have my own styles.xml for my widget:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyWidget">
<!-- my drawables -->
</style>
</resources>

but in my layout xml file, I need to put 'style="@style/MyToggleButton' everywhere I use my own widget in order for android to pick up my drawables.

<com.mycompany.MyWidget android:id="@+id/widget" style="@style/MyWidget" />
otherwise, this won't work:
<com.mycompany.MyWidget style="@style/MyWidget" />

Can you please tell me how can I put the style of my own widget in theme?

I tried this:
<resources>
<style name="MyTheme">
<item name="android:textColor">#808</item>
<item name="buttonStyleMyWidget">@style/MyWidget</item>
</style>
</resources>

but this won't work.

Thank you.
silverburgh.meryl
Junior Developer
Junior Developer
 
Posts: 23
Joined: Sun Feb 08, 2009 11:17 pm

Postby darolla » Tue Feb 17, 2009 5:42 pm

please take a look here: new_widget_-_panel-t4400.html

they did their own widget with styles and more.

I did some themeing on the calculator api source, the magic button: new_button_-_magic_flame-t4476.html

greetings
darolla
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Tue Feb 17, 2009 5:43 pm

if you take a look at my samples: please note the double namespace definition in the xml :D
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby silverburgh.meryl » Tue Feb 17, 2009 6:53 pm

darolla,

Thank you for your quick response.

In your example, I am seeing you need to put 'style="@style/button_style"' every time you use MagicFlameButton as well:

<tut.orial.MagicFlameButton android:text="Red"
android:layout_height="73px" android:layout_width="73px"
style="@style/button_style" />

I am looking for a way not to do that. Define it some where so that android will use style="@style/button_style" everytime I use tut.orial.MagicFlameButton
silverburgh.meryl
Junior Developer
Junior Developer
 
Posts: 23
Joined: Sun Feb 08, 2009 11:17 pm

Postby pskink » Tue Feb 17, 2009 7:48 pm

darolla wrote:okay, the btn_check_label_background.9.png is transparent and because its a .9.png it has some help lines. left and top is for how to stretch the image. right and bottom is for placing the content (mostly text).


btw, right & bottom lines are very helpful when .9.png resource is used as a background for layouts - in this case they define how children of layout are placed
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm

Postby pskink » Tue Feb 17, 2009 8:01 pm

in my previous post i forgot to say it is an excellent, step by step tutorial describing how theming/styling works.

congrats darolla!!!
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm

Postby darolla » Tue Feb 17, 2009 8:11 pm

thank you :)
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby guruk » Fri Mar 27, 2009 8:30 pm

Hi,

do you know how I would change a style in a styles.xml
in my code.

i have

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="DatiButton">
<item name="android:background">#666666</item>
<item name="android:textSize">12sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#FFF</item>
<item name="android:layout_height">30px</item>
<item name="android:padding">4px</item>
<item name="android:paddingTop">6px</item>
<item name="android:layout_marginLeft">1px</item>
<item name="android:layout_marginRight">1px</item>
<item name="android:layout_marginTop">1px</item>
<item name="android:layout_marginBottom">1px</item>
</style>
</resources>

and I would need to change the layout_height within my code, when the layout is horizontal for example.
something like: setlayout_height(datibutton) = "60px" :)

thanks
chris
guruk
Junior Developer
Junior Developer
 
Posts: 24
Joined: Sun Mar 08, 2009 8:05 pm

Top
Next

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 8 guests