Publish skins for Pure widgets


You can now publish skin yourself and they will be available for everyone.

What do you need :
- a 9 patch strechable image for the widget background (we’ll see how to create it just after)
- some icons for other graphics like buttons
- a preview image (50×50 pixels).

Then, you are ready to publish your first skin.

PUBLISH A SKIN

Go on the Pure skin manager website.
Create an account the skin manager and confirm it with the email you receive.

Once you are logged, on the top menu, go to ‘Member’ -> ‘My skins’.
Click the ‘create skin’ button.

Then, you need to fill the publish form.

And press the ‘post’ button.
Your skin is now on the skin server.
You can try it from the Pure widget: enter in the widget config panel and press ‘continue and skin’ to enter in the skin manager.
Press the first button, and select ‘BETA’ skin (or ‘USER’ and enter you skin publisher account name).

Then, ‘install’ and ‘select’ your skin… and ‘save & exit’.

If the skin is ready for an official submission, you can go back the skin manager server page, ‘Member’ -> ‘My skins’ and on the skin line, on the right : ‘POST TO ADMIN’
I’ll receive an email, validate the skin and flag it as official.

HOW TO CREATE A 9 PATCH BACKGROUND IMAGE

To define a strechable skin, you need to create a 9-patch PNG background.

9 patch PNG ? what is that ?

It’s PNG image, where you define 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/

Here is a 9-patch PNG for Pure calendar background :

You can use a 9-patch tool if you want to test the scaling (cf here).
But you can use a simple image editor if you prefer (be sure the first/last row and columns are only transparent or with black pixels).
Once you defined the strechable zones, you save the image & keep the 9 patch image.
This is the file you’ll have to publish to the skin server.

Nota 1: use ONLY 1 vertical and 1 horizontal strech zones
Nota 2: do not use ‘padding’ zones.

WHICH IMAGE SHOULD I CREATE FOR BUTTONS

I advise 48×48 pixels images, but they are stretched for fill the button layout.

Pure calendar:
ic_menu_add_small.png
ic_menu_preferences_small.png
ic_menu_refresh_small.png

Pure Grid calendar:
ic_menu_add_small.png
ic_menu_date_small.png
ic_menu_preferences_small.png
ic_menu_refresh_small.png
ic_menu_toggle_mode_small.png

Pure Messenger:
ic_app_filter.png
ic_app_launch.png
ic_app_msg.png
ic_app_refresh.png
ic_arrow_down.png
ic_arrow_up.png

Pure News:
ic_widget_feed_action.png
ic_widget_reconfigure.png
ic_widget_refresh.png

SKIN EXMAPLES

For backgrounds :
Background for Pure calendar, Pure Grid calendar and Pure news
Background for Pure messenger

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

NOTES

Currently, I manualy affect skins ratings. Later, users will be able to vote and donate for skins.

10 responses

9 01 2012
mrZoSo

My dark version for ICS.

9 01 2012
9 01 2012
koxx3

Very nice !

9 01 2012
mrZoSo

How do we publish them?

9 01 2012
koxx3

Hi,
publish it here :
http://pureapps.planethoster.org/skins_manager/
No need to worries about XML or anything like this now ;)
It is not very well documented yet, but if you have any question, please let me know.
ciao,
Francois

9 01 2012
mrZoSo

Get this error when I try to upload:
[ERROR] Generation backgroung.png 9patch chunk return an error.

9 01 2012
koxx3

Can you please send me the 9PNG by email ?

26 05 2012
tito

[ERROR] Generation background.png 9patch chunk return an error (11).

26 05 2012
koxx3

did you completly read the tutorial to make a good 9PNG file ? (do not extract 9PNG from APK for example)

27 05 2012
tito

it is this image that I want to …
http://www.zimagez.com/zimage/background79.php

you think you’d come to me a 9patch correct?

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 )

Connecting to %s




Follow

Get every new post delivered to your Inbox.

Join 125 other followers