How to design a 

skin
13112009
Rate This

If you want to create a skin, here are some explanations.

Which widgets are we talking about ?

- Pure calendar
- Pure grid calendar
- Pure messenger
- Pure music

What should be provided ?

- a skin background,
- if possible, replaced icons
- if possible, all layered images (PSD or TIFF) or vector images,
- if possible, a screenshot.

How to create a skin ?

All skins are stored on SDCARD.

They are generally composed of a background image, and multiples icons.

For backgrounds, 2 possibilities :

- you generate a skin that match the exact background size to avoid generating a strechable skin. For
example a 4×2 skin use a 320×200 background. A 4×4 use 320×400 background. Don’t worry about
high resolution screens, they are streched.
- you generate a strechable nackground. This is a more advanced technique. I strongly advise you to
generate a fixed size background. I’ll make it strechable if you want.

Here are files used for defaults skins.

For backgrounds :
Pure calendar background
Pure grid calendar 4×2 (regular PNG)
Pure grid calendar 4×3 (regular PNG)
Pure grid calendar 4×2 (regular PNG)
Pure messenger classic background (with 9-patch)
Pure messenger list background (with 9-patch)
Pure music background (with 9-patch)

For icons :
Pure calendar skinnable ressources
Pure grid calendar skinnable ressources
Pure messenger skinnable ressources
Pure music skinnable ressources

A full skin sample (with 9-patch background) :

Pure messenger Sense skin

How to test ?

You have to put your PNG file in the

/sdcard/.org.koxx.xxxxxxxxxxx/skins(_vx)/background/your_skin_name/.

For example, here is the Pure messenger ‘sense_list’ skin structure :

Now, we’ll edit the XML file _local_skin_list.xml file and add this line just before the last “</list>” :
<background zip_name="your_skin_name"
long_name="Long skin name"
version="v1.0"
installed_version=""
sizes=""
file_type="zip"
prefered_text_color="-16777216"
/>

The prefered color is to specify a text color (ARGB on 4 bytes signed).

-16777216 = black
-1 = white
Save and unmount the sdcard.
Now, enter the skin manager, it will be reconnized by skin manager.

Definition of strechable zones

Now, the most tricky part !

First, if you arrived here, I would gladly accept your skin with with a fixed size… don’t worry 
To define a strechable skin, you need to create a 9-patch PNG background (not useful for Pure grid
calendar, they only use fix background).

9 patch PNG ? what is that ?

It’s PNG images, where you define some strechable zones.

Some explanations about 9 patch PNG images :
http://developer.android.com/intl/fr/guide/developing/tools/draw9patch.html
http://photics.com/android-development-tools-learning-about-draw-9-patch/

How to make my skin strechable ?

> For Pure calendar

Here is the 9-patch PNG of the Pure calendar default background :

You have to use the 9-patch tool to define and test you scalling (cf here).
Once you defined the strechable zones, you save & keep the 9 patch image. We’ll see later you to use it.
But you have to put a normal PNG image in the skin folder (without thin borders with black lines for
strechable zones).

Strechable zone are normally stored in the 9-patch PNG, but for the skin, we need to extract those data
and store them in a the skin parameters file on the sdcard.

Here are interesting points :

1 – Y strech start point = 44 (last transparent pixel)
2 – Y strech end point = 47 (last black pixel)
3 – X strech start point = 126
4 – X strech end point = 146
5 – strechable zone color, here transparent white =

Be carefull, position will be coded on 4 values, each value is coded with 8bits signed values.
For example :
- 44 equals 44
- 146 become -109 >>>> coded on 8 bytes inverted -> if > 127 then val = pix pos – 255 = 146-255 =
-109

Now, we’ll edit the XML file _local_skin_list.xml file and add this line just before the last “</list>” :
<background zip_name="your_skin_name"
long_name="Long skin name"
version="v1.0"
installed_version=""
nine_patch_chunk="1, 2, 2, 9, 0, 0, 0, 0, 0, 0, 0, 0, 126, 0, 0, 0, 13, 0, 0, 0, 44,
0, 0, 0, 19, 0, 0, 0, 0, 0, 0, 0, 126, 0, 0, 0, -109, 0, 0, 0, 44, 0, 0, 0, 47, 0, 0,
0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0,
1, 0, 0, 0, 1, 0, 0, 0"
sizes=""
file_type="zip"
prefered_text_color="-16777216"
/>

My advise is to test with a true 4×2 in 320×200, then reduce it to a 160×66 by cutting strechable parts.
This ‘nine patch chunck’ included in the xml strech the image following this rules (same image than
example given ) :
- in height, from pixels 44 to 46
- in width, from pixels 126 to 146
If you want, I can generate you another nine chunck patch, just send me your ‘image.9.png”.

> For Pure messenger

Same thing.
My advise is to test with a true 4×2 in 320×200, and keep this resolution. Other resolution used (for 4×3
and 4×4) are greater, so, no need to reduce the image size.
 A classic ‘nine patch chunck’ :
nine_patch_chunk="1, 2, 4, 15, 0, 0, 0, 0, 0, 0, 0, 0, 63, 0, 0, 0, 62, 0, 0, 0, 56,
0, 0, 0, 103, 0, 0, 0, 0, 0, 0, 0, 63, 0, 0, 0, 2, 1, 0, 0, 56, 0, 0, 0, 97, 0, 0, 0,
110, 0, 0, 0, -105, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0,
0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0,
1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0"
This ‘nine patch chunck’ , strech the image following this rules :
- in width, from pixels 63 to 257,
- in height, from pixels 56 to 96 and from 110 to 149 (the middle part is used to keep a good ratio for
arrows)

If you have difficulties with 9 patch, mail me, I’ll explain you.

How to submit ?

Send me your skin by mail at 

If you have any question or remark, ask here, I’ll answer 

Possibly related posts: (automatically generated)

 A new widget ‘Pure Grid calendar’ is coming

 [Pure Grid Calendar] Scrollable ?

 Tips : change color bars in Pure calendar and Pure grid calendar

 Pure Grid calendar widget – Android app on AppBrain

Ads by Google

IVR Hosting & Development

Integrate with any database visit our web site for live demo
www.telecomhostingservices.com

« How to help me to debug an applicationWeek updates »

Actions

  Comments RSS
  Trackback

Information

 Date : November 13, 2009

 Categories : Uncategorized

6 responses
24022010
A challenge for you graphic design types - Droid Forum - Verizon Droid & the Motorola
Droid Forum (17:33:13) :

[...] A challenge for you graphic design types Can someone design a smoked glass skin
for the Pure Messenger product and the Pure Grid product? Is this a hard thing to do? I
would do it myself, but of course I have no expertise with the arcane arts of skin design.
I am sure that if you take on this quest of beauty and matching-ness your name will
forever be writ in the "Annals of Great Design" and Pure product owners, who have
installed a smoked glass ROM everywhere will sing your praises. PARTICULARLY if you
do this for the 4X3 Grid Calendar and 4X3 List Messenger "Say What!?" How to design a
skin Android 'Pure' widgets series (calendar) [...]

Reply

22052010
Any skins designers here ? « Android 'Pure' widgets series (calendar) (10:56:50) :

[...] like to see more skins submited. If anybody have design skills, there is a guide to
create them here. Possibly related posts: (automatically generated)Spurring
ContributionsHumble Indie Bundle Part 2: [...]

Reply

27052010
9 Patch PNG Help - Android Forums (16:56:16) :
 [...] good but you should ask me, I have a skin help on my blog How to design a skin
Android 'Pure' widgets series (calendar) [...]

Reply

20062010
‘How to make a skin’ manual update « Android 'Pure' widgets series (calendar) (13:26:57) :

[...] PDRTJS_settings_132352_post_1121 = { "id" : "132352", "unique_id" : "wp-post-

1121", "title" : "%27How+to+make+a+skin%27+manual+update", "item_id" :
"_post_1121", "permalink" : "http%3A%2F%2Fkoxx3.wordpress.com
%2F2010%2F06%2F20%2Fhow-to-make-a-skin-manual-update%2F" } I made a big
update of the ‘how to make a skin’ manual : here [...]

Reply

21062010

jose (01:47:15) :

I would love it if you made skins available to everyone through the app. I would love to
get something with white letters and slightly dark background. Something a little
sleeker and modern.

Reply

26072010
Pure messenger widget - Page 3 - Android Forums (11:19:06) :

[...] Originally Posted by stainlessray Hey koxx, love the apps the latest update seems to
have addresses the redraw issue on low mem, and email is working with messenger
much better. thanks for the great work. your presence here in the forum is evidence of
how much you put into the performance of the applications with your name on them.
that commands respect. keep it up. Any chance the future holds further
skincustomization options? like the ability to use pics for backgounds? or is that going
to far you think? (it's less important than performance to me, but a novelty i would
enjoy) I really want it to be the best messenger agregator widget, so, yes, I am ready to
spend a loooot of time on it Next release will offer slight visual improvements, and a
new option for rock stable service. For skins, you can already create skin your self very
easily : How to design a skin Android 'Pure' widgets series (calendar) [...]

Reply