Skinning Guide

Introduction

Skinning an Awesome Bar.

Basic Awesome Bar Skinning

Creating the skin.properties file

Skinning an Awesome Clock

Clock graphics sizes

Clock skin example graphics

Creating the skin.properties file

Packaging & Testing your skin

Advanced

Skinning Micro-Widget icons

Skinning Weather Icons

Introduction

Skinning Awesome Widgets is a fairly straightforward process and every skin follows a similar pattern, for example making a background or logo skin can be done in around 5 minutes.  You can have complete control over the look as every element is skinnable to your taste.  

 

Thank you for taking the time to make a skin for Awesome Widgets.  We appreciate it greatly!

Skinning an Awesome Bar.

 

There are 3 main items that can be skinned on the Awesome Bar

 

  1. Background Layer
  2. Highlight Layer
  3. Widget Icons

 

Typically, unless you want to completely change the look, you will deal with the background layer and possible the highlight layer.

 

Basic Awesome Bar Skinning

In order to create a skin you need to have a properties file to choose the qualities that the skin will have.  It must be named xxxxx.properties where xxxxx is any name.  We will describe the contents of the properties file below.  You must also have the graphics associated with the skin in .png format.  If you have graphics in jpg or other format it is pretty simple to change to png with any decent paint package (e.g. the free Paint.net for windows).

 

For our first skin we will use a blue patterned background and a custom highlight.  It will be named deltoidsblue-01.png (you can name it anything you like, just make sure you reference it in the skin.properties as shown below).  Both the background and highlight pngs should be 480x150 pixels.   You may create an HD texture that has a higher resolution (typically for tablets), but it should be clearly named as HD and maintain the same aspect ratio.

 

 

 

 

 

Here is the highlight - please note we have added a black background in order that you can see the white highlight, you would typically only save the white highlight in the hightlight.png file.  You may also want to put a dropshadow for your widget on the highlight layer, especially if you are going to allow your background to be coloured.

 

When these files are combined in the widget the blue file is drawn first, then the widget icons (or app shortcuts) and then the highlight layer on top.  

 

Like so: -

 

Creating the skin.properties file

 

Here is an example of a skin.properties file

 

name=Blue Deltoids

type=bar

backgroundon=true

userbackgroundcolour=false

usericoncolour=true

highlighton=true

backgroundlayer=deltoidsblue-01.png

highlightlayer=highlight.png

 

Lets go through each property and explain it’s function

 

name : This must be a unique name for this skin, it will be validated upon submission

type: This is the type of the widget the skin is made for, set to bar for Awesome Bar and clock for Awesome Clock

backgroundon : Specifies whether we have a background at all in this skin.  It is possible that you might want a skin with a highlight only for a glassy feel

userbackgroundcolour : if you produce a skin that you would like to allow the user to change it’s colour you would set this to true, but normally it should be set to false.

usericoncolor: Typically you’ll want to have this set to true as it allows the user to set the widget icon’s (e.g. wifi toggle) colour and transparency when they are on or off.

highlighton: whether or not the highlight is on by default, this can be overridden by the user, if a highlight is not specified in the skin the default highlight will be used.

backgroundlayer: This specifies our blue deltoid background layer as shown above

highlightlayer: This specifies our highlight layer and is optional if there is no highlight or dropshadow needed in this skin

 

Skinning an Awesome Clock

 

There are 5 optionally skinnable items on the Awesome Clock

 

  1. Background
  2. Numbers Background
  3. Numbers
  4. Icon Picture
  5. Weather

 

You can specify as many or as little options as you’d like.  You might want to create a skin that only has a background or one that only has a picture of your precious cat or dog, it’s up to you.  You might want to create a completely themed clock for Christmas or Halloween or for your favourite football or racing team.  In our example we will go through how to make a completely themed Christmas skin.  Here is an example of the end result: -

 

 

The basic structure of the skin is much the same with a skin.properties file and a number of png files.

 

Clock graphics sizes

 

Each type of PNG has a specific size

  1. Background - 480 x 350 pixels
  2. Numbers Background - 256 x 128 pixels
  3. Numbers - 86 x 128 pixels
  4. Icon Picture - 300 x 300 pixels
  5. Weather - 128 x 128 pixels

 

Clock skin example graphics

Here is the Christmas skin background - christmas.png (480 x 350 pixels)

Here is the “highlight” layer ( clockshadow.png ), it only contains a drop shadow (480 x 350 pixels)

 

 

Here is the number background on a blue background to make the white snowball visible (256 x 128 pixels

 

 

Here is an example of one of the numbers - candy_number_8.png ( 86 x 128 pixels)

 

 

The next section will show how they are tied together

Creating the skin.properties file

Here is the skin.properties file for our Christmas clock example

 

name=Christmas Candy Cane

type=clock

backgroundon=true

highlighton=true

userbackgroundcolour=false

backgroundlayer=christmas.png

highlightlayer=clockshadow.png

numbackground=snowclock.png

logo=chrissytree-01.png

GFX_NUMBERS_0=candy_number_0.png

GFX_NUMBERS_1=candy_number_1.png

GFX_NUMBERS_2=candy_number_2.png

GFX_NUMBERS_3=candy_number_3.png

GFX_NUMBERS_4=candy_number_4.png

GFX_NUMBERS_5=candy_number_5.png

GFX_NUMBERS_6=candy_number_6.png

GFX_NUMBERS_7=candy_number_7.png

GFX_NUMBERS_8=candy_number_8.png

GFX_NUMBERS_9=candy_number_9.png

 

Lets go through each property and explain it’s function

 

name : This must be a unique name for this skin, it will be validated upon submission

type: This is the type of the widget the skin is made for, set to bar for Awesome Bar and clock for Awesome Clock

backgroundon : Specifies whether we have a background at all in this skin.  It is possible that you might want a skin with a highlight only for a glassy feel

highlighton: whether or not the highlight is on by default, this can be overridden by the user, if a highlight is not specified in the skin the default highlight will be used.

userbackgroundcolour : if you produce a skin that you would like to allow the user to change it’s colour you would set this to true, but normally it should be set to false.

backgroundlayer: This specifies our christmas background layer as shown above

highlightlayer: This specifies our highlight layer and is optional if there is no highlight or dropshadow needed in this skin

logo: This specifies the picture associated with this skin / theme.  It is optional, if it is specified it will be added to the users list of logos when he/she downloads your skin.

GFX_NUMBERS_X: These allow you to specify the graphic used when displaying the clock number X, make sure you have all numbers between 0 and 9, if any or missing the clock will show a blank place.  These numbers are also optional, if they are not specified the skin will not be added to the list of numbers skins in Awesome Widgets.

 

Packaging & Testing your skin

Once you have your properties and png files finished, put them into an empty folder (e.g. MySkinNameFiles) and zip that folder up using Windows->Send To->Compressed folder or Winzip-style utilities.

 

In order to test your skin you need to register as a “skinner” on the Awesome Widgets website: - http://www.siroccosoftware.com/awesome/user/register

 

Once registered: -

  1. Log in
  2. Click on My Skins
  3. Click on Add New Skin.
  4. Add a Description
  5. Add a screenshot
  6. Upload

 

When you have Uploaded your skin you should be able to download the skin onto your Android device by choosing “Download Skins” from the main menu.

 

If you would like to make any changes to the skin simply go to My Skins after logging in on the Awesome Widgets website and click edit on any of your skins.  Resubmit an updated zip file and update the skin on your Android device.

 

*note* occasionally it may not update without changing to a different skin and back again or rotating the screen.  This is due to a limitation with Android Widgets, we are working on a workaround for this problem.


Advanced

Skinning Micro-Widget icons

 

As well as skinning the Awesome Bar icons the Micro-widget icons can be modified too.  This is very simple to achieve, but because of the number of Micro-widgets it can take a bit of time.

 

To specify alternative icons for the Micro-widgets you need to specify them in a properties file.  For example to specify a new icon for the Bluetooth toggle you would put: -

 

GFX_BLUETOOTH_OFF=mynewbluetoothtoggleoff.png

and

GFX_BLUETOOTH_ON=mynewbluetoothtoggleon.png

 

in your properties file.

 

Here is a complete list of the current widget properties that can be specified in a similar way: -

 

GFX_BLUETOOTH_OFF

GFX_BLUETOOTH_ON

GFX_WIFI_ON

GFX_WIFI_OFF

GFX_FLIGHT_ON

GFX_FLIGHT_OFF

GFX_LOCK_ON

GFX_LOCK_OFF

GFX_BRIGHTNESS_AUTO

GFX_BRIGHTNESS_LOW

GFX_BRIGHTNESS_MED

GFX_BRIGHTNESS_HIGH

GFX_SOUND_ON

GFX_SOUND_OFF

GFX_SOUND_VIBRATE

GFX_BATTERY_HIGH

GFX_BATTERY_MED

GFX_BATTERY_LOW

GFX_BATTERY_EMPTY

GFX_BATTERY_OFF

GFX_SMS_ON

GFX_EMAIL_ON

GFX_ROTATE_ON

GFX_ROTATE_OFF

GFX_TORCH_ON

GFX_TORCH_OFF

GFX_SYNC_ON

GFX_SYNC_OFF

GFX_FORCELOCK_ON

GFX_GPS_ON

GFX_GPS_OFF

GFX_HOTSPOT_ON

GFX_HOTSPOT_OFF

GFX_SETTINGSWIFI_ON

GFX_SETTINGSGPS_ON

GFX_SETTINGSFLIGHT_ON

GFX_SETTINGSWIMAX_ON

GFX_SETTINGSAPN_ON

GFX_SETTINGSBLUETOOTH_ON

GFX_SETTINGSDATETIME_ON

GFX_SETTINGSVPN_ON

GFX_SETTINGSLANG_ON

GFX_SETTINGSSOUND_ON

GFX_SETTINGSDISPLAY_ON

GFX_SETTINGSDOCK_ON

GFX_SETTINGSAPPS_ON

GFX_SETTINGSAPPLIST_ON

GFX_SETTINGSSECURITY_ON

GFX_SETTINGSPRIVACY_ON

GFX_SETTINGSADMIN_ON

GFX_SETTINGSACCESS_ON

GFX_SETTINGSVOICE_ON

GFX_SETTINGSTTS_ON

GFX_SETTINGSPASSWORD_ON

GFX_SETTINGSDEV_ON

GFX_SETTINGSQUICKLAUNCH_ON

 

 

Skinning Weather Icons

 

In order to skin weather icons your need to specify a new PNG to use for each weather condition in a properties file.

For example if we want to specify a new icon for a Sunny weather condition we would need: -

 

GFX_WEATHER_SUNNY=mygreatnewsunnyicon.png

 

Here is a complete list of weather conditions, it is normal to specify the same icon for more than one condition (don’t be scared!)

 

GFX_WEATHER_SUNNY

GFX_WEATHER_PARTCLOUDY

GFX_WEATHER_CLOUDY

GFX_WEATHER_OVERCAST

GFX_WEATHER_MISTY

GFX_WEATHER_PATCHYRAIN

GFX_WEATHER_PATCHYSNOW

GFX_WEATHER_PATCHYSLEET

GFX_WEATHER_PATCHYFREEZINGDRIZZLE

GFX_WEATHER_THUNDERYOUTBREAKS

GFX_WEATHER_BLOWINGSNOW

GFX_WEATHER_BLIZZARD

GFX_WEATHER_FOG

GFX_WEATHER_FREEZINGFOG

GFX_WEATHER_PATCHYLIGHTDRIZZLE

GFX_WEATHER_LIGHTDRIZZLE

GFX_WEATHER_FREEZINGDRIZZLE

GFX_WEATHER_HEAVYFREEZINGDRIZZLE

GFX_WEATHER_PATCHYLIGHTRAIN

GFX_WEATHER_LIGHTRAIN

GFX_WEATHER_MODERATERAINSHOWERS

GFX_WEATHER_MODERATERAIN

GFX_WEATHER_HEAVYRAINSHOWERS

GFX_WEATHER_HEAVYRAIN

GFX_WEATHER_LIGHTFREEZINGRAIN

GFX_WEATHER_MODERATEFREEZINGRAIN

GFX_WEATHER_LIGHTSLEET

GFX_WEATHER_MODERATESLEET

GFX_WEATHER_PATCHYLIGHTSNOW

GFX_WEATHER_LIGHTSNOW

GFX_WEATHER_PATCHYMODERATESNOW

GFX_WEATHER_MODERATESNOW

GFX_WEATHER_PATCHYHEAVYSNOW

GFX_WEATHER_HEAVYSNOW

GFX_WEATHER_HAIL

GFX_WEATHER_LIGHTRAINSHOWERS

GFX_WEATHER_MODERATERAINSHOWERS

GFX_WEATHER_TORRENTIALRAINSHOWERS

GFX_WEATHER_LIGHTSLEETSHOWERS

GFX_WEATHER_MODERATESLEETSHOWERS

GFX_WEATHER_LIGHTSNOWSHOWERS

GFX_WEATHER_MODERATESNOWSHOWERS

GFX_WEATHER_LIGHTHAILSHOWERS

GFX_WEATHER_MODERATEHAILSHOWERS

GFX_WEATHER_PATCHYLIGHTRAINTHUNDER

GFX_WEATHER_MODERATERAINTHUNDER

GFX_WEATHER_PATCHYLIGHTSNOWTHUNDER

GFX_WEATHER_MODERATESNOWTHUNDER

GFX_WEATHER_SUNNYNIGHT

GFX_WEATHER_PARTCLOUDYNIGHT

GFX_WEATHER_CLOUDYNIGHT

GFX_WEATHER_OVERCASTNIGHT

GFX_WEATHER_MISTYNIGHT

GFX_WEATHER_PATCHYRAINNIGHT

GFX_WEATHER_PATCHYSNOWNIGHT

GFX_WEATHER_PATCHYSLEETNIGHT

GFX_WEATHER_PATCHYFREEZINGDRIZZLENIGHT

GFX_WEATHER_THUNDERYOUTBREAKSNIGHT

GFX_WEATHER_BLOWINGSNOWNIGHT

GFX_WEATHER_BLIZZARDNIGHT

GFX_WEATHER_FOGNIGHT

GFX_WEATHER_FREEZINGFOGNIGHT

GFX_WEATHER_PATCHYLIGHTDRIZZLENIGHT

GFX_WEATHER_LIGHTDRIZZLENIGHT

GFX_WEATHER_FREEZINGDRIZZLENIGHT

GFX_WEATHER_HEAVYFREEZINGDRIZZLENIGHT

GFX_WEATHER_PATCHYLIGHTRAINNIGHT

GFX_WEATHER_LIGHTRAINNIGHT

GFX_WEATHER_MODERATERAINSHOWERSNIGHT

GFX_WEATHER_MODERATERAINNIGHT

GFX_WEATHER_HEAVYRAINSHOWERSNIGHT

GFX_WEATHER_HEAVYRAINNIGHT

GFX_WEATHER_LIGHTFREEZINGRAINNIGHT

GFX_WEATHER_MODERATEFREEZINGRAINNIGHT

GFX_WEATHER_LIGHTSLEETNIGHT

GFX_WEATHER_MODERATESLEETNIGHT

GFX_WEATHER_PATCHYLIGHTSNOWNIGHT

GFX_WEATHER_LIGHTSNOWNIGHT

GFX_WEATHER_PATCHYMODERATESNOWNIGHT

GFX_WEATHER_MODERATESNOWNIGHT

GFX_WEATHER_PATCHYHEAVYSNOWNIGHT

GFX_WEATHER_HEAVYSNOWNIGHT

GFX_WEATHER_HAILNIGHT

GFX_WEATHER_LIGHTRAINSHOWERSNIGHT

GFX_WEATHER_MODERATERAINSHOWERSNIGHT

GFX_WEATHER_TORRENTIALRAINSHOWERSNIGHT

GFX_WEATHER_LIGHTSLEETSHOWERSNIGHT

GFX_WEATHER_MODERATESLEETSHOWERSNIGHT

GFX_WEATHER_LIGHTSNOWSHOWERSNIGHT

GFX_WEATHER_MODERATESNOWSHOWERSNIGHT

GFX_WEATHER_LIGHTHAILSHOWERSNIGHT

GFX_WEATHER_MODERATEHAILSHOWERSNIGHT

GFX_WEATHER_PATCHYLIGHTRAINTHUNDERNIGHT

GFX_WEATHER_MODERATERAINTHUNDERNIGHT

GFX_WEATHER_PATCHYLIGHTSNOWTHUNDERNIGHT

GFX_WEATHER_MODERATESNOWTHUNDERNIGHT