Saturday, February 9, 2013

How To Create Your Own Android Widget



When it comes to the Android home screen, few things are as useful as a widget. Android widgets are minimal version of an app running from your home screen. The downside of using a widget is you are limited to what comes with the apps, or are you?

When you aren’t too keen on the coding aspect of things, a few options are available for creating your own widget. Here we will talk about Ultimate custom widget (UCCW).

The lay of the land

Knowing where the options are and how everything works will greatly increase your chance of creating a useful widget instead of a mess on your screen.
To get started, add a widget to your home screen the way you normally do and select UCCW as the widget. Choose a larger size like a 4×4 for this learning process.
create-android-widget-select-size
Tap the “Create a new skin” button.
create-android-widget-create-skin
Now we are at the build screen.
create-android-widget-blank-canvas
If you do nothing and press the home button, you will see nothing more than a white square on your home screen.
create-android-widget-blank-widget
Let’s learn the basics. In the navigation bar across the top, you’ll see three choices: “Select Object”, “+/-” and “Sort”. Each of these are very important to adding and arranging the different things to the widget.

Select Object

Select Object is where you choose an object to modify. It can be the color, transparency, font, size and so on.

+/-

This is where you add or remove a object.

Sort

When you have more than one item in your widget (i.e. time, date, message notification, etc.), each of these is in their own layer and sometimes are not accessible by simply tapping on them. The Sort option lets you arrange the layers so you can access the item you’d like to modify.

Menu icon

The menu is where you will save your skin (the widget you are creating), export it, turn on the hot spots ( we’ll talk about this later) and more.
create-android-widget-menu

Adding items to the widget

While working on your custom Android widget, make sore you save your progress regularly. Start to add a few items to the custom widget by pressing the +/- button and look through the long list of options. Check the box next to the items you like to add and press “Close”.
create-android-widget-add-object
All of the items whose the boxes you checked are now placed within the widget in a big mess.
create-android-widget-object-selected
Press the “Select Object” button and choose an item. Here I chose time. You will see all of the options to customize the time display on the screen. The first thing you might want to do is press the Position button. This will give you the ability to move this item across the screen. I recommend either using your finger to drag the item across the screen or take the Faster movement box and use the arrows.
create-android-widget-move-object
Now that the time is in a place where we can see the changes we are making, press the Close button and start making adjustments to the size, color, angle, transparency, font and/or the format (12 or 24 hour).
create-android-widget-select-font
When you are somewhat happy with the way the clock looks, move on to some of the other items you’ve added to the widget. The adjustments for all of the options are pretty similar to each other but look closely at what options are available for each item, some items have different customizing options.
create-android-widget-change-color

Downloading add-ons for custom looks

The default fonts and options give you some pretty good starting points. Since we are creating a widget specifically for us, we will need some more fonts and other means to customize it.

The Google Play Store

Head over to the Google Play Store and search for “UCCW skin” you will find a lot of options – some paid and some free.

UCCW Fonts

Adding a font to UCCW is actually quite easy. Any .ttf font can be used. You can go to any free font site like dafont.com and find something you like. When you download it, transferred over to the storage of your Android in a folder labeled “fonts”. Once this is done, you’ll be able to press the font button and select your newly added font.

Now What?

Well, the rest is about your creativity. Spend some time to play with the app and familiarize yourselves with the different objects and icons. Personally, I like to have a transparent background so there isn’t a big blocky widget sitting on the screen.
It is also best to take some time and create hotspots. These will let you activate an app when you tap on a section of the widget. For example you could have a timer start when you tap the clock or time icon in the widget.

Conclusion

This is definitely an application you need to play around with to get the hang of. However, once you do, you can really start to design some pretty cool looking widgets. There really isn’t the room in one article to go over all of the options and possibilities. For some good examples check out MyColorScreen. You are sure to see something there to inspire you.