When it comes to customizing your Android home screen, choice is more than abundant. All you need to do is think of what you want, and there’s a good chance it already exists somewhere in the bylanes of the official Play store or in a developer forum somewhere. And for things that are too specific for a readymade solution, there are DIY apps that will let you build your home screen widget from scratch.
Ultimate Custom Clock Widget – or UCCW as it is popularly known — is one such app. With more options than you can shake a stick at, UCCW lets you build your own custom homescreen widgets pretty much the way you like. And although there is a whole community of enthusiastic modders who spend hours fine-tuning their UCCW creations and making them available to anyone to download, there is something to be said for the satisfaction of creating one of your own.
I reviewed UCCW here on Android.AppStorm some time back and promised to be back with a tutorial on creating your own custom clock widgets. It’s been a while, I know, but here we are finally with a quick guide. I don’t plan on covering every option the app throws at you — that would be a task too humongous for anyone to undertake — but cover the basics to get you going with the app. Here’s a quick look at what our widget will look like once it is done:
The completed widget on a home screen
Preparation
There’s not really much in the name preparation here. You will of course need to get the app installed. The free version should suffice for now. The second thing to do is to get a custom font on to your device. I’ll be using the excellend free font Sansation for this design. You can download it from here and copy all the files — a total of 6 TTF files in all — to your device. Make sure they are in a folder called “Fonts” on your SD card. Simply create one if it is not already there.
Now let’s start by launching the app and selecting “New Skin” from the menu. You will be greeted with a blank white background. That’s our playground. Since we’re building a widget fitted for a dark background, let’s start by changing the color to a dark grey. Hit the color button in the bottom half, select a dark shade from the color selector and hit OK. Don’t worry about being accurate, we will be removing this background before finishing off.
Add Elements
To get started, hit the +/- button in the row at the top, and check the following items:
- Hour
- Minute
- hour/minute separator
- Day of the month
- Month
- Week Bar
- Battery Level
- Battery Circle
Adding elements to a new skin
What you will end up with is a mess of jumbled up text in the top-left corner. Don’t worry, we’re going to make sure each element is perfectly styled and positioned to get the result we want.
Note that the dimensions and co-ordinates I’m listing here are specific to my Galaxy Nexus, which comes with a 1280 x 720 pixel screen. You may need to vary the numbers depending on your device’s screen size and resolution. In any case, you will see a preview of how big or small the elements get on the canvas, so it should be easy to tweak them to suit your needs.
Change Settings
The next step is to select each element and style it the way we want. To do so, hit the SELECT OBJECT link in the top bar and choose the element you want to edit. Then simply change settings from the Controls in the bottom half of the screen. Controls are divided into sets which you can access by swiping the bottom half left or right. Once you find the control to tweak, tap it and adjust the parameters to see the changes in real time in the top half.
I’ve listed below what I’ve changed for each element. This is in addition to the default settings each element comes with, so making the following edits should guarantee that your widget looks exactly like the one I shared above. Let’s get tweaking then, shall we?
Hour
- Position: x – 134, y – 160
- Size: 85
- Color: #ffffff
- Font: Sansation Bold
- Align: Right
Minute
- Position: x – 141, y – 160
- Size: 85
- Color: #ffffff
- Font: Sansation Light
- Align: Left
hour/minute separator
- Position: x – 130, y – 153
- Size: 85
- Color: #ffffff
- Font: Sansation Light
Day of the month
- Position: x – 607, y – 160
- Size: 82
- Color: #ffffff
- Font: Sansation Bold
- Align: Right
Month
- Position: x – 601, y – 198
- Size: 45
- Color: #ffffff
- Font: Sansation Regular
- Align: Right
Week Bar
- Position: x – 288, y – 83
- Size: 30
- Color: #ffffff
- Font: Sansation Regular
- Case: Uppercase
- Size2: 25
- Alpha2: 150
- Color2: #ffffff
- Font2: Sansation Light
- Case2: Lowercase
Battery Level
- Position: x – 137, y – 222
- Size: 30
- Color: #ffffff
- Font: Sansation Light
Battery circle
- Position: x – 20, y – 10
- Angle: 180
- Width & Height: 230
- Style: Hollow with gradient
Provided you followed the settings till this point, you should now be able to see the widget take shape exactly as I have it here. If not, go back and edit the settings to try and get everything aligned as closely as possible.
The skin after your setup is complete
Save & Add
Once you are happy with the widget and have everything exactly where you want it, select the Background element and change the Alpha value to 0. This way, your widget will appear to be transparent on top of your home screen wallpaper. To save the setup, select Save/export skin from the menu and give it a name.
To add the widget to your homescreen, go to whatever widget selection UI you have on your device (it may vary depending on the launcher you have running) and select the UCCW 4 x 2 (or 5 x 2 if you have a 5-column setup like mine). Next, choose the skin you just saved from the list and voila! You’re done! Move or resize the widget as you need and marvel at your acheivement for a bit before you show it off to your friends and family.
Most importantly though, remember that this is just the beginning. What we have built is in no way testing the limits of what you can do with UCCW. Explore, practice, dig deep and most importantly, have fun doing it!
0 commentaires:
Post a Comment