How to make designing responsive apps real easy in Native Studio
So you’ve got your design canvas, and you’ve got a vast array of elements to choose from. Here’s a quick overview of how to bridge that gap between them: this is the Aligning Elements in Native Studio post. Also includes a few tips on how to make your prototype work on actual devices — no matter the size — from the get-go!
Dragging elements
The easiest way to align Elements is by dragging them to (and around) the design canvas. Of course, it’s not the most scientific approach — have a look at what happens when the devices get bigger. The image nicely placed in the middle of the screen on an iPhone 5 suddenly looks a bit silly on an iPhone 6 (not to even mention an iPad…):
Not to worry though, young padawan. There are other ways.
Layout tab: Align Edges
To make sure that Elements stay where they should no matter the device, Native Studio also gives you an option of adjusting Elements’ alignments by hand — just select the Element and open up the Layout tab on the right.
These alignments work on a pretty straightforward principle. By default, an Element aligns itself in relation to the top and left-hand sides. You can specify the offsets either in physical units (points) or percentages.
For example, when it comes to images, you can easily make it stretch out across the screen on all devices by checking both the Left and Right checkboxes (offset by 0). By the same logic, turning on all four alignments makes the image fullwidth.
You can also “center” Elements by tweaking their offset numbers. Offset by 5 on the left side and by -5 on the right-hand side will quite nicely give the Element some margins on both sides.
Keylines
What works really well with the other alignments are Keylines. They work a bit like guides in Photoshop — although ours are a tad smarter. Their position is always defined in proportion to the screen. If you create a Keyline halfway across the screen, it’ll keep that 50% position in every screen format.
On the bottom-right in your design canvas, just click on Create keyline… → Horizontal center, then select the Element and Align… → Center on keyline. (There are other options as well — centering is not the only thing Keylines enable you to do.)
Bear in mind that this is all live: you can check that everything’s in its right place by running the app on a simulator or on a real device. And if you’ve got device-specific problems, you can always do an override — which will certainly be a topic for a future post. Stay tuned!
Not sure what this is all about? Check www.neonto.com out.
