Creating the skin.properties file
Creating the skin.properties file
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
- Background Layer
- Highlight Layer
- 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
- Background
- Numbers Background
- Numbers
- Icon Picture
- 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
- Background - 480 x 350 pixels
- Numbers Background - 256 x 128 pixels
- Numbers - 86 x 128 pixels
- Icon Picture - 300 x 300 pixels
- 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: -
- Log in
- Click on My Skins
- Click on Add New Skin.
- Add a Description
- Add a screenshot
- 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