Welcome to the wonderful world of WYSIWYG editors.
You’re putting together a new theme, and you just can’t get the pre-made widgets from your various apps to mesh with your wallpaper and icon pack. Nothing to do but settle with an ill-fitting widget or go without, right? Wrong! When life gives you lemon widgets, we make our own lemonade widgets.
KWGT, like Zooper and UCCW, is a What You See Is What You Get (WYSIWYG) widget editor. You can take a built-in widget template and edit it, or you can build your own widgets from scratch, layer by layer. Today, we’re going to take a look inside this somewhat intimidating-looking app and show you what you need to know about building in it.
For KWGT, everything begins with placing a widget on the home screen. You have a variety of sizes to select from, and you can resize the widgets as needed, provided the launcher you’re using supports resizing widgets. Once you have the size of your widget where you want it, we can tap to configure it and dive into the editing interface.
We have three tabs here, Featured widgets, Installed widgets, and Exported widgets. These are where you can pull in widgets that have already been built, by you or by other people. At the top, you can search through the available widgets, you can navigate through your device to pull in more widget templates, or you can tap the new document icon to build a widget from scratch. For most users, starting off with a pre-made widget will be easier and helps ease you into the app better.
Once you select a widget, you’ll be taken to the Kustom Widget editor. You’ll have your widget in a preview box, surrounded by a lot of icons you may or may not recognize. Starting in the top left corner and working our way clockwise, we have:
- Menu icon: This brings out the options to load or export your widget’s preset, buy the pro version if you haven’t already, open the FAQ (which is always handy to have) or open other social and web assets such as the G+ community and the online tutorials (which you should consider checking out after you read this).
- Save icon: You HAVE to save a preset in order for your changes to show up on the home screen widget, so get in the habit of always saving before you exit the configuration screen.
- Restore preset: This will undo all the changes you’ve made to your preset and put it back the way you had it. If you mucked something up, here’s where you undo it.
- Add: on each page that this appears on it’ll add a new element. If you’re on the items page, it’ll add a new item (such as a Komponent or a new text layer). If you’re on the Globals layer, it’ll add a new Global.
- Zoom: This will toggle the automatic zoom, should you be working with a large widget that needs zooming in on certain elements.
- Preview Lock: This will lock your preview box.
- Hide layers: This toggle will let you either see all layers of your widget or hide unselected layers. This can be useful if you need to make sure things are lined up properly.
- Animation: This will turn your animations on or off in the preview box, which can also be helpful in getting animated layers lived up properly.
Next we have the customization tabs, where we’ll actually alter our layers and Komponents to get things the way we want them. You begin in the root menu, and its tabs and their functions are:
- Items: these are the individual layers or modules of your widget. You can click on any item in the list to edit that singular layer, or tap the Add icon in this screen to add a new one. By clicking on an item, you’ll be taken to that layer’s own configuration screen. Unlike graphic editors like Photoshop, where the top layer in the list is on top, the top layer in KWGT is on the bottom, so if you have shapes under your text, your shapes will be in the items above your text in the widget’s item list.
- Background: this is the base background of the widget. In most cases you’ll want to use a solid color (usually clear), but you also have the option to use a image as the background.
- Layer: This is where you can change the scale of the entire widget rather than one layer. Note that this is where you’ll adjust the size but not the positioning, which must be done by group or by individual item. If you’re using a location in your widget, this is where you can get that set (or set it to an alternate location, like New York or Tokyo). In the layer section of individual items, you’ll also find a conditional option to hide or show that item based on the orientation of the device: Always, Portrait, Landscape, and Never.
- Touch: You can add touch actions to the entire widget here. Considering KWGT does not have these enabled by default, you may want to add a Kustom Action so that when you touch the widget, it’ll bring up the widget editor. After you’re done getting your widget set up, you can either switch the action or you can check the checkmark on the right side of the touch action and then delete it using the icon on the top bar.
- Globals: Globals are settings that you can apply to multiple items in your widget. Say you have five text layers. Rather than changing them all from white to black one at a time, if all the text layers use a global color, you can change that global to recolor all of them. Globals can come in quite handy, especially with larger, more elaborate widgets. Anywhere you see a little globe icon in a widget preset, that’s a global at work.
Once you select an item to edit, you’ll be taken into that item’s editor. It’ll look very similar to the root menu, but the menu will deviate based on what item it is. Progress bars have fewer tabs of options than text do. Regardless what type of item it is, you will always have position and touch tabs, giving you the option to get your item where you need it and enable a touch point for individual items instead of the whole.
The list of item types is pretty long, but also features handy definitions below each one so you know what they do. The only ones that may seem tricky at first glance are Komponents, Overlap Groups, and Stack Groups. Stack Groups allow us to group items together for organization and consistency. By stacking several text layers in a group, we can move them all together and align them consistently. Overlap Groups enable groups to work together and supports animations, transformations, and other advanced items between and using multiple layers.
Then there are Komponents. Komponents are like a preset within the widget preset that you can build and export from widget to widget. Komponents are custom icons for weather status. Komponents are music player controls. Komponents are a lot of really cool and fun things, and while you can build them yourself, that is an article for another time. And another beer.
Komponents can be exported, and they can be packaged for the Play Store, meaning that once you sell out three bucks for the KWGT Pro Key, you can go out and buy/download a lot of really impressive-looking widgets that will import into KWGT for you to just select and set. For example, once you download Material Music Komponent and install it, you can open a blank widget, add one of the three Material Music komponent from the Komponent list, increase the Layer size till the widget fits in the preview box, hit save, and you’re done. You can re-color the widget to fit your theme if needed, but then you’re done.
So dig through a few of the installed presets and give KWGT a try. If you get frustrated, remember that like many good apps, Kustom has a good community behind it to help answer your questions. And if you’re looking to do a bit more with Komponents, then you should also look a KWLP, which is a live wallpaper version of KWGT. Yes, you heard that right. A custom live wallpaper with Komponents and widgets build right into it. Stay tuned for that in future Android Central theming coverage!
Download: KWGT (Free, $2.99)