Correctly Layout and Anchor your Themes
I wanted to go over how to correctly layout and anchor your themes designed in Zooper. I have noticed for some time that most of you do not quite understand how this should work and why it is beneficial.
The basic idea you should be following or at the least considering when designing your layouts is, the same thing that web-page designers have been doing for decades. The idea is that you want your negative space to be the only thing that stretches or scales when you move your widgets from one device resolution to another. Everything else should stay exactly where it is and spaced exactly the way it was when you designed it. For the most part this means that ANCHOR CENTER = YOU’RE DOING IT WRONG!
With the image below I hope to illustrate this clearly to you. I will be dividing the sections up based on the widgets, and color coding them to match the image.
If you follow these directions, not only will you make my life easier when I port your work to other devices, but it will make your life easier as a designer.
First off though, we should talk about the desktop grid. We all know that larger grid sizes allow us more freedom in terms of layout. With that said, the grid can also cause unwanted spaces between widgets. The general rule of thumb is that the number for your rows should be evenly divisible with the vertical resolution of your phones display, and the number of columns should be evenly divisible with the horizontal resolution.
The biggest problem though is that while your row and column count may evenly divide on your device, it does not evenly divide on another device with a different resolution.
After playing around with different grid count sizes and getting frustrated with designs, I sat down and ran the numbers for all of our supported resolutions. What I found was a grid size large enough to allow for a good deal of layout freedom, and a column and row count that are evenly divisible on ALL our supported devices. The only exception to this rule is the Sony Experia M, this devices oddball resolutions requires a 8x17 layout.
Why should you need to bother with this, why can't you just use your own grid size that you love so much. The answer is that it slows us down when porting themes to other devices. This has to do with the way Zooper scales widgets. Lets say you use a layout count that is not evenly divisible with another device. That means I need to manually change the grid size on that device and then scale the widget to fit the new grid size. Worse yet is that Zooper will ALWAYS get the scaling wrong after this. This means that your widget that was nice and crisp looking will come out blurry.
To fix this, I need to open your widget, save your widget to the device, delete your widget, add a new blank widget with the correct size, and finally apply the saved widget. I then have to do this for EVERY WIDGET IN YOUR THEME.
Ok so lets take a look at this layout. You can see the grid size at 8x16, and the layout is comprised of two widgets. The one at the top is 8 columns by 1 row, and the widget at the bottom is 8 columns by 8 rows.
The numbering is not just for reference use here in this tutorial. They are also the ordering of the layers in the widget. Ordering plays an important part for correct scaling.
I should note that this theme, whose screenshot you see here was captured on a 1080p device (1080x1920), but the theme itself was exported on a 768p device (768x1280). These are different aspect ratio screens, but I was able to install this theme directly on a 1080p device and did not need to change any of the alignment. It just worked out of the box.
The Green Arrows in the image above indicate what areas of the widget should scale.
Widget One - Status Bar
This 8x1 widget has a transparent background.
***It’s important to note why the X and Y offsets are different here. Since all of these layers are actually based on TTF fonts, their size, WinAssent, WinDecent, and Kerning levels are all a bit different.
If you are dealing with a font or any layer based asset whose sizing is determined outside of Zooper, you can’t just assume that the spacing from Zero on the Zooper grid is going to be the same for each asset. This is usually where a bit of eyeballing it comes in.
The way I did this and the way you should be doing it is pretty simple. When I added the battery iconset layer into the widget, I first had it aligned Top Right. I then set about resizing the layer and making sure it was the same vertical size as the network text. After I had it all aligned I changed the anchor to Top Right and eyeballed the distance to the edge of the screen.
The end result is a widgets whose asset spacing values are linked to the top and outer edges of the screen. This makes the transparent area in between these layers the only part of the widget that scales if I were to bring this widget to a different resolution.
For example if I built this widget on a device with a 768 horizontal resolution and then applied it on a device with a 1080p resolution, even though the aspect for the two resolutions is different the text and icons will always be exactly the same distance from the edge of the screen. The only difference is that the spacing in between the text on the left and the 3 icons on the right is now smaller.
If I were to have built this with a Center Align Anchor, and exported from a 768 to 1080, then the icons and the text would both be cut off with their starting points outside of the drawable widget area.
WIDGET 2 - The main body
This is an 8x8 widget with an off-white background color.
***Backgrounds can play an important role in your widget. Its important to note that background always scale to the exact size of the widget itself from device to device. If you have a main background color for your widget, don’t build the background with a colored shape, use the background color feature.
***Its also important to note that the only limitation to the widget background color is that it is not capable of interacting with the XOR or Clear drawing styles. So if you want a window in your widget that shows the wallpaper, you should not use a background color , and should instead build the background with shapes or other assets.
In the end, we have a widget where the only part that scales is the background of the widget.
I hope this was helpful, and I hope to start seeing these tips used in your submitted themes.