Creating Themes

Quick Start, Download the WLTheme Base Pack and start editing the images. Come back here when you have trouble with the _3.png files.

Themes for WidgetLocker are simple zip files containing the replacement slider images. The name of the theme is taking from the file name. Themes must include a preview image for each slider style (Android, Motorla, iPhone, Sense, Rotary) that is supported. For example to create an iPhone like theme that looks like this:

We would need 4 image files:

iphone_preview.png

Tells WidgetLocker that iPhone style is supported, and displayed to the user in the "Select theme" menu.

iphone_slider_left.png

iphone_slider_right.png

iphone_background_3.png - This is the background image for the iPhone slider. Note that this is stretchable, this image is a ThreePatch Image, described below!

ThreePatch Images The images need to be stretchable for a few reasons:

1. WidgetLocker supports phones and tablets of many screen sizes and ratios
2. Users may resize the slider
3. The slider may be used horizontally in landscape mode, or vertically in portrait mode.

WidgetLocker has special image files called "Three-Patch" signified by the "_3" at the end of the file name. These images contain a 1 pixel border around the whole image (So an image that's viewable size is 100x100, should have a Three-Patch size of 102x102). The top border should be transparent except for 1 or more black pixels signifying where the image can be stretched. If using multiple pixel, they must be contiguous. This is very similar to Android's Nine-Patch images. The key differences are:

1. Three versus Nine. Nine-Patches are ideal for button like images, where the corners are most important and the middles can be stretched. Three patches are ideal for images which can stretch in one direction but should be scaled (maintaining the aspect ratio) in the other.
2. NinePatches can't (easily) be included in themes unless the theme is built as an APK file, rather than a zip file.

The left shows a (hideous) example of how a nine-patch might scale the Motorola slider. The right shows an example of how the ThreePatch can. Note that it's not just the white arrow that is deformed in the NinePatch, but also the curve of the slider is lost and the gradient and the diagonal between the two colors. When editing a ThreePatch you may freely increase the width of the image. However the wider you make it the more likely it is to be scaled down if the user is on a smaller screen or resizes the slider. For this reason, it's advisable to make the image as narrow as possible. An example of a wider ThreePatch is the PacMan Theme. Here the iphone_background_3.png looks like this:

Note it's stretch mark is on the left hand side right before the white dots start. This means on a tablet it might look like this: And on a phone:

To get started, you can download the Base Pack which includes wlthemes for each slider style using the default (widgetlocker) images.

WLTheme BasePack

For more examples check the Negate themes in the directory listing