How to design a skin

13 11 2009

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 http://koxx3.free.fr/mail.jpg

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

About these ads

Actions

Information

18 responses

24 02 2010
A challenge for you graphic design types - Droid Forum - Verizon Droid & the Motorola Droid Forum

[...] 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) [...]

22 05 2010
Any skins designers here ? « Android 'Pure' widgets series (calendar)

[...] 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: [...]

27 05 2010
9 Patch PNG Help - Android Forums

[...] good but you should ask me, I have a skin help on my blog How to design a skin Android 'Pure' widgets series (calendar) [...]

20 06 2010
‘How to make a skin’ manual update « Android 'Pure' widgets series (calendar)

[...] 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 [...]

21 06 2010
jose

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.

26 07 2010
Pure messenger widget - Page 3 - Android Forums

[...] 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) [...]

24 01 2011
strucc007

Hi there. I’ve just installed your Pure Music Widget, and it’s great. I’d like to do some skins (at least one) and would like to know if there’s a possibility to change cover, text, buttons alignment, text scrolling. If so, could you pls provide some infos how?

24 01 2011
koxx3

Hi,
yes, you can make your own skin by changing all graphics :

http://koxx3.wordpress.com/2009/11/13/the-skins-design-challenge/

24 01 2011
strucc007

Well, I think you didn’t understand me. I’d like to totally redesign the widget. Not only the graphics but also graphics positions. I mean buttons from right to top, text alignment from center to left, etc. I doubt it’s possible…

25 01 2011
koxx3

It will never be possible because widgets alyouts cannot be loaded dynamically (layout needs to be hard coded in the widget app). Only grpahics can be loaded dynamically.

25 01 2011
strucc007

Thanks for the answer. It SUXX then :( Anyway, I hope it ill be possible one day…

25 01 2011
koxx3

I don’t believe Android allow this… even in Android 3.0

26 01 2011
strucc007

Hehe, I always knew Android is cr*p :)

Btw in the future releases of your Pure Music Widget could you pls add the followings:
– possibility to remove the ugly orange outline when you click the cover/song info/buttons
– instead of this ugly outline add another PNG pic for active buttons
– scrollable song info, if it doesn’t fit the layout
– roundable album layout :)
– possibility to change play/pause buttons size to bigger pic

Thank you!

26 01 2011
koxx3

- possibility to remove the ugly orange outline when you click the cover/song info/buttons
>>> no possible, need to be hardcoded
– instead of this ugly outline add another PNG pic for active buttons
>>> no possible, need to be hardcoded
– scrollable song info, if it doesn’t fit the layout
>>> no possible, scrollable text not handled by widgets
– roundable album layout :)
>>> yes, that is possible
– possibility to change play/pause buttons size to bigger pic
>>> you need to fit current skin image size.

26 01 2011
strucc007

- possibility to remove the ugly orange outline when you click the cover/song info/buttons
>>> no possible, need to be hardcoded
What do u mean about hardcoded? Do u mean in Android or in widget app?

– scrollable song info, if it doesn’t fit the layout
>>> no possible, scrollable text not handled by widgets
Hmmm… The Galaxy S Music widget (downloadable from the Market) scrolls artist name as well as song title :)

– roundable album layout
>>> yes, that is possible
I meant album artwork :)

– possibility to change play/pause buttons size to bigger pic
>>> you need to fit current skin image size.
It means that I can’t change its size :(

30 06 2011
Jayjoe

Hi koxx3, is it possible to change to twitter widget? I think so because in the ressources is the twitter icon, but i cannot manage to change.

1 07 2011
koxx3

Hi,
Here are icons names you need to place in your skin folder :
icon_call.png
icon_configure.png
icon_email_acc1.png
icon_email_acc2.png
icon_email_acc3.png
icon_email.png
icon_facebook.png
icon_general.png
icon_gmail_acc1.png
icon_gmail_acc2.png
icon_gmail_acc3.png
icon_gmail.png
icon_refresh.png
icon_sms.png
icon_twitter.png

30 06 2011
Jayjoe

sorry i mean to change the twitter icon in the widget

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Follow

Get every new post delivered to your Inbox.

Join 173 other followers

%d bloggers like this: