Tutorial: change look of CheckBox

darolla · by **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

 
<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
        android:orientation="vertical" android:layout_width="fill_parent"
 
        android:layout_height="fill_parent">
 
        <CheckBox android:layout_width="wrap_content"
 
                android:layout_height="wrap_content" android:text="a checkbox" />
 
        <CheckBox android:layout_width="wrap_content"
 
                android:layout_height="wrap_content" android:text="checked checkbox"
 
                android:checked="true" />
 
</LinearLayout>
 
Parsed in 0.002 seconds,  using GeSHi 1.0.8.4

Greetings,
DaRolla

darolla · by **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

 
<item name="checkboxStyle">@android:style/Widget.CompoundButton.CheckBox</item>
 
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

 
    <style name="Widget.CompoundButton.CheckBox">
 
        <item name="android:background">@android:drawable/btn_check_label_background</item>
 
        <item name="android:button">@android:drawable/btn_check</item>
 
    </style>
 
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

darolla · by **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

 
<?xml version="1.0" encoding="utf-8"?>
 
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 
    <!-- Enabled states -->
 
    <item android:state_checked="true" android:state_window_focused="false"
 
          android:state_enabled="true"
 
          android:drawable="@drawable/btn_check_on" />
 
    <item android:state_checked="false" android:state_window_focused="false"
 
          android:state_enabled="true"
 
          android:drawable="@drawable/btn_check_off" />
 
    <item android:state_checked="true" android:state_pressed="true"
 
          android:state_enabled="true"
 
          android:drawable="@drawable/btn_check_on_pressed" />
 
    <item android:state_checked="false" android:state_pressed="true"
 
          android:state_enabled="true"
 
          android:drawable="@drawable/btn_check_off_pressed" />
 
    <item android:state_checked="true" android:state_focused="true"
 
          android:state_enabled="true"
 
          android:drawable="@drawable/btn_check_on_selected" />
 
    <item android:state_checked="false" android:state_focused="true"
 
          android:state_enabled="true"
 
          android:drawable="@drawable/btn_check_off_selected" />
 
    <item android:state_checked="false"
 
          android:state_enabled="true"
 
          android:drawable="@drawable/btn_check_off" />
 
    <item android:state_checked="true"
 
          android:state_enabled="true"
 
          android:drawable="@drawable/btn_check_on" />
 
    <!-- Disabled states -->
 
    <item android:state_checked="true" android:state_window_focused="false"
 
          android:drawable="@drawable/btn_check_on_disable" />
 
    <item android:state_checked="false" android:state_window_focused="false"
 
          android:drawable="@drawable/btn_check_off_disable" />
 
    <item android:state_checked="true" android:state_focused="true"
 
          android:drawable="@drawable/btn_check_on_disable_focused" />
 
    <item android:state_checked="false" android:state_focused="true"
 
          android:drawable="@drawable/btn_check_off_disable_focused" />
 
    <item android:state_checked="false" android:drawable="@drawable/btn_check_off_disable" />
 
    <item android:state_checked="true" android:drawable="@drawable/btn_check_on_disable" />
 
</selector>
 
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.

darolla · by **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

darolla · by **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

 
<?xml version="1.0" encoding="utf-8"?>
 
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 
        <item android:state_checked="true" android:state_focused="true"
 
                android:drawable="@drawable/checkbox_on_background_focus_yellow" />
 
        <item android:state_checked="false" android:state_focused="true"
 
                android:drawable="@drawable/checkbox_off_background_focus_yellow" />
 
        <item android:state_checked="false" 
 
                android:drawable="@drawable/checkbox_off_background" />
 
        <item android:state_checked="true" 
 
                android:drawable="@drawable/checkbox_on_background" />
 
</selector>
 
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

 
<?xml version="1.0" encoding="utf-8"?>
 
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item android:drawable="@drawable/checkbox_label_background" />
 
</selector>
 
Parsed in 0.001 seconds,  using GeSHi 1.0.8.4

Greetings,
DaRolla

darolla · by **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

 
    <style name="Widget.CompoundButton.CheckBox">
 
        <item name="android:background">@android:drawable/btn_check_label_background</item>
 
        <item name="android:button">@android:drawable/btn_check</item>
 
    </style>
 
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

 
<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
        android:orientation="vertical" android:layout_width="fill_parent"
 
        android:layout_height="fill_parent">
 
        <CheckBox android:layout_width="wrap_content"
 
                android:layout_height="wrap_content" android:text="a checkbox" />
 
        <CheckBox android:layout_width="wrap_content"
 
                android:layout_height="wrap_content" android:text="checked checkbox"
 
                android:checked="true" />
 
        <CheckBox android:layout_width="wrap_content"
 
                android:layout_height="wrap_content" android:text="new checkbox"
 
                android:background="@drawable/checkbox_background" android:button="@drawable/checkbox" />
 
        <CheckBox android:layout_width="wrap_content"
 
                android:layout_height="wrap_content" android:text="new checked checkbox"
 
                android:checked="true" android:background="@drawable/checkbox_background"
 
                android:button="@drawable/checkbox" />
 
</LinearLayout>
 
Parsed in 0.003 seconds,  using GeSHi 1.0.8.4

all new we did was changing the background gfx

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
android:background="@drawable/checkbox_background" 
 
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

 
android:button="@drawable/checkbox"
 
Parsed in 0.000 seconds,  using GeSHi 1.0.8.4

Greetings,
DaRolla

darolla · by **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

silverburgh.meryl · by **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">

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

darolla · by **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

darolla · by **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

silverburgh.meryl · by **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

pskink · by **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 · by **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!!!

darolla · by **darolla** » Tue Feb 17, 2009 8:11 pm

thank you

guruk · by **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

Tutorial: change look of CheckBox

Tutorial: change look of CheckBox

Who is online