Ultimate Custom Clock Widget Tutorial

2012-01-27T13:06:00.000-08:00

Ultimate Custom Clock Widget Tutorial

Let’s make the above clock widget.

First set ultimate custom clock widget on your home screen. Choose widget size as 4x2.

We will be needing the following images:
1) Background image

2) Clock hour hand image

3) Clock minute hand image

Observe the clock hands images. They are square in shape, same size and are fully transparent except the region showing the hands. The hands should be in the position shown (horizontal) only, to show correct time. The black border is to show the image region only; the border is not in the actual image. The size of the clock hands images should be such as to fit the clock shown in the background image.

Once you have designed the images in photo editing software like photoshop, gimp or paint.net, only thing left is to set the images in the app. I like to keep the images for a widget skin in the same folder and put that folder in “sd-card/ultimatecustomclockwidget”. This folder is already made by the app. This makes sharing skins easy as other have to just copy our folder and widget-skin-file to their phones. Widget-skin-file is made when you export your skins by pressing “Menu” -> “Export skins”. Widget-skin-file is found in “sd-card/ultimatecustomclockwidget” folder. Just copy widget-skin-file and images’ folder to share skins with other people. They only have to put them in “sd-card/ultimatecustomclockwidget” folder like you.

Widget Editor

Touch widget to open widget editor as shown below.

.

Ok. The first drop-down box that you see below the widget is the list of all the members. The members are as follows:

1) Background
2) Year
3) Month
4) Day of the week
5) Day of the month
6) Hour
7) Minute
8) Hour/minute separator
9) Am/Pm
10) Static text 1 – any text can be assigned
11) Static text 2 – same as Static text 1.
12) Analog clock
13) Battery level
14) Battery status

The static texts can come in handy if you want to display date as 01/06/2011 for 1st June’11 etc. Assign both static text as “/”.

So let’s first select “Background” member. We have to set

as background.

But first let’s set the widget dimensions. Widget dimensions should be same as the background image dimensions. The above image is 400x150 pixels. So press

You have the following screen:

Enter 400 as width and 150 as height and press save. Now you see

. Press “Background image” button. You have the following options depending on your installed apps.

. Choose gallery or a file manager to set image.

After the image is set you have the following screen.

. All options for background member are:

1) widget dimensions – Set dimensions of widget or background as already seen.

2) Color – Set background color – will replace background image.

3) “Background image” – Set background image.

4) “Background alpha” - Change transparency of background.

Now set the hour-hand and minute-hand images in the same manner as you set the background images. You have to select “Analog clock” member in the first drop-down list and press “Hour-hand image” and “Minute-hand image” buttons.

After the images have been set you have

. Notice that clock-hands are not in the center of the clock. Move them to center by touching on the editor area or pressbutton and then use arrow buttons for greater accuracy.

Image with clock-hands in the center of clock

All options available for “Analog clock” member are:

1)Move - Press to have move controls available. Members can also be moved by touching and sliding over the editor area.

2) “Hour hand image” – set hour hand image.

3) “Minute hand image” – set minute hand image.

4) “Analog clock alpha” - Change transparency of clock hands.

Now select “Day of the month” member (shown above as “16” in blue color). Move it toarea of the background image as shown below.

. Now let’s change the color.

Press and select color of your choice from the color chart. Let’s select blue.

The result.

.
Set size with .

The other options available for members are:
1) Format - First Drop-down button showing 01-31.

The formats for “day of the month” member are

. Each member (except background, analog clock and static texts) has its own formats. Choose what you like.

2)Move - Press to have move controls available. Members can also be moved by touching and sliding over the editor area.
3)Size – Change size of member.

4)Fonts – Choose from available fonts. Keep fonts in “sd-card/fonts” folder.

5)Color – Change color.

6)Angle – Change angle of member by moving slider.

7) Alpha – Change transparency and visibility of member. If you don’t want a particular member on the widget make its alpha to zero by moving the slider to the left most position.

8) Shadow – Give shadow, glow and other effects to members. Shadow radius, x-offset, y-offset and shadow color can be set.

9) Alignment – Change alignment of member with respect to their location. For example hour member will have right alignment and minute member will have left alignment in most of the cases.

Now set the alignment of “day of the month” member as center so that it stays in the center of the calendar image when day of the month is from 1 to 9. Use “Alignment” button.

Next select “month”, “year” and “day of the week” members turn by turn and set them as shown below.

Change color, size, alignment as required. Recommended alignment for “day of the week” is center, for “year” is right and for “month” is left.

Next deselect “hour”, “minute”, “hour/minute separator”, “am/pm”, “static text 1” and “static text 2” members by pressing because we don’t want them in this skin. And you have made your first clock.

. Press home button to see the result on widget on your home screen.

Home screen with widget sizes 4x2, 4x1, 2x1 and 1x1.

So the widget will show what you set in the editor irrespective of widget size. For portrait widgets like 1x2, 1x3, 2x4 etc set widget dimensions accordingly i.e. width< height.

Now touch widget again to open widget editor.

The buttonis to control the drawing order of members when they overlap. For example if “hour” and “minute” members overlap in your design and you want “hour” member to appear above “minute” member, move “hour” member below “minute” member as shown below.

Phone Menu button has following options:

1) Export skins – export skins for sharing. Skins are saved in “sd-card/ultimatecustomclockwidget” folder in sd-card with “.uccw” extension. Copy skin file and folder containing images for background, hour-hand and minute-hand to share.

2) Import skins – Likewise import exported skins or skins copied from other people.