How to design a skin


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 https://i0.wp.com/koxx3.free.fr/mail.jpg

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

18 thoughts on “How to design a skin

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

  2. 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?

      1. 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…

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

      1. 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!

      2. – 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.

  3. – 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😦

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

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