Correctly Layout and Anchor your Themes
Themer Zooper Logo.png

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.



THE GRID

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.

Universal Layout
8 Columns x 16 Rows

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.

Zooper Anchor Instructions.jpg


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.

  1. The first layer in this theme is the network connection name Rich text layer.
    ANCHOR - Top Left
    TEXT ALIGNMENT - Left
    X OFFSET - 6
    Y OFFSET - 1
  2. The second, 3rd and 4th layers are the batter, cell, and wifi iconsets.
    ANCHOR - Top Right
    TEXT ALIGNMENT - Right
    X OFFSET - 5
    Y OFFSET - -11

***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.

  1. The background. Since this widget is a solid, I used an off white background color. If built correctly, this should be the only part of the widget that scales.
  2. The first set of layers in this theme are the colored bars at the bottom of the screen. These are 4 shape layers each a different color and spaced evenly edge to edge.
    ANCHOR - Center bottom
  3. The second set of layers are the FONT based icons that will form the basis for the body of my widget.
    ANCHOR - Center Left
    TEXT ALIGNMENT - Left
    X OFFSET - 25
  4. The Third set of layers are the icons on the opposite side of the page. Since I build these fonts myself, I know their size and kernering are exactly the same, because of this I know that my spacing will also be the same.
    ANCHOR - Center Right
    TEXT ALIGNMENT - Right
    X Offset - 25
  5. The fourth set of layers are the text layers in the body of my widget.
    ANCHOR - Center Left
    TEXT ALIGNMENT - Left
    X Offset - 40

    ***You might be wondering why I chose center left or center right, when I said that center alignment is bad. When we are done with this widget, the only part that might need a little fixing from device to device is the vertical (y axis) placement of these layers. This is simple enough though as we can group select them and move them up or down to the center of the body.
  6. The Fifth layer is the grey shape that is going to make up the basis for our top menu bar. Adding this layer first is actually pretty important. Its width is actually much larger than what is visible here in this screenshot. Its actually edge to edge in width.  
    ANCHOR - Top Left
    X OFFSET - 0
    Y OFFSET - 0
  7. The sixth layers are the green and white boxes. I simply cloned the grey bar from the fifth layer and changed its anchor to top right. I then changed its color so I could see, and since the height of the rectangle shape was 73, I made its width 73. Now I had a perfect green square box sitting over the grey rectangle on the opposing side of the screen. I simply cloned this new shape 3 times and spaced each of the next two layers edge to edge with each other. All three of these shape layers stay Anchored Top Right.
    The white box is not actually white, its set to a drawing style of “Clear” which clips through all of the layers all the way down to the bottom widget background color.  
    ANCHOR - Top Right
    X OFFSET - 0, 73, 146
    Y OFFSET - 0


    ***The importance of the grey bars length  and z order,, should now be obvious. When the width of a display changes, the grey bar will stay anchor to the left of the screen while the green boxes will stay anchored to the right of the screen. This means that the width of the grey bar will appear to increase if the theme is used on a device with a larger horizontal aspect ratio.
  8. The 7th layers are the set of font based icons that sit in the menu bar. Again these are custom build font glyphs so I know their exact size and shape to be all the same. I start with just one icon, setting it to align top right and then its text alignment to center. This puts the icon half off of the screen. I then move its x axis value until its centered in my green box. Now I know the spacing from the edge of the green box to its center. Now when I clone the next icon from this one, I know that I need to move it over the same distance to evently sit in the center of the next box.
    ANCHOR - Top Right
    TEXT ALIGNMENT - Center
    X OFFSET - 21, 92, 161
    Y OFFSET - 19

    ***Again, these icons will stay perfectly center in the boxes below them, and will always stay the exact same distance from the top of the widget and the right edge of the widget, no matter the horizontal/vertical aspect of the screen they are being rendered on.
  9. The eighth layer is the clock based text. Another thing you guys are not really taking advantage of is the new dynamic time variable which chooses 12 or 24 hour based on users preference. This is written as follows #DP:mm# if its 12 hour and your want AM/PM write it as follows #DP:mm p#
    ANCHOR - Top Left
    TEXT ALIGNMENT - Left
    X OFFSET - 10
    Y OFFSET - -2
  10.  The ninth layer is the date text. Since this is a Rich Text layer I can have both the Weekday, Month and day on two separate lines in a single layer.
    ANCHOR - Top Left
    TEXT ALIGNMENT - Left
    X OFFSET - 10
    Y OFFSET - 31

    *** So with both 9 and 10 set to Top Left anchor and their alignment set to Left, they will always be exactly 10 grid units from the left edge of the screen. Since the grey box (6) is also aligned Top Left, these two text layers will always be exactly vertically centered in the grey box no matter the resolution of the display.



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.