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 : http://pureapps.mooo.com/skins_manager
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_toggle_mode_small.png
ic_menu_add_small.png
ic_menu_date_small.png
ic_menu_preferences_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.

19 thoughts on “Publish skins for Pure widgets

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

    1. yes, look at the ‘Pure calendar skinnable ressources’.
      there is a ‘cal_day_bkgrd.png’ image that you must fill with transparent color, and the job is done !

  1. One question: Is it possible to move the buttons from the top of the wigets to the left or right side ? This will leave more space for the information (more entrys).

      1. Oh, I was just trying to find if it was possible.
        I would like to have them vertically on the right, is it even planned in a future release or not ?
        Thanks

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