branstein_utboal_00 By Mike Branstein and Nick Branstein

This article has been excerpted from NativeScript in Action.

Creating pages for your app and navigating between them isn’t enough to make a good app. Mobile app development is also about creating compelling user experiences to accomplish a purpose. This means you need to present and organize your UI in different ways, depending upon what the users of your app need.

For example, let’s assume you design a fitness app with a dashboard showing how much you exercise each day, like the fitbit app shown in figure 1.


Figure 1 Two different UI layouts, with chart data points displayed on the left dashboard page, and more tabular data entry on the profile page, as seen in the fitbit app on iOS

On the dashboard, there are several different charts and graphs displaying your daily progress. The charts and graphs are oriented in different patterns on the screen to catch the eye of a user, drawing attention to the most important data first (your step count). On a different page, users complete a personal profile, including their name, birthdate, height, weight, and fitness goals. Because of the difference in information displayed on the profile page, the UI elements are arranged in a vertical stack.

Right now, designing a mobile app with these various organizational layouts might seem daunting, but don’t worry, it’s easier than you think. NativeScript makes organizing your UI easy with a collection of UI elements called layouts.

DEFINITION A layout is a special UI element that instructs and informs your app how to organize other UI elements on a mobile device’s screen. If you want a button to dock (or always be displayed) at the bottom of your screen, or if you’d like to organize several buttons in a grid-like collection of rows and columns, there are layouts to help you.

Because NativeScript layouts are UI elements, they’re defined in XML. Although I call layouts a UI element, they aren’t displayed on a mobile device’s screen when a page is loaded. Instead, they affect the location and arrangement of UI elements placed within the layout. Because layouts contain other UI elements, they’re referred to as layout containers.

In listing 1, I have included a Stack Layout with several nested UI elements. You’ll learn about Stack Layouts in a moment and even though you might not understand how a Stack Layout works right now, take note that when UI elements are placed inside of a layout container, they’re arranged and displayed on the mobile device screen in various ways (according to the rules of their container).

Listing 1 Stack Layout container with several UI elements

<StackLayout>                                     #A
<Button text=”Everything is awesome...” />        #B
<Button text=”when you’re using NativeScript!” /> #B

#A Stack Layout is a UI element, but won’t be displayed on the screen
#B UI elements contained within the Stack Layout element will be displayed, per the rules imposed upon them by the Stack Layout

In total, there are five different layouts: stack, grid, wrap, Dock, and absolute. I’m not going to go into detail about all the layouts, but instead focus on the most common layout you’ll use when building your first apps: stack. You’ll learn about the stack layout in this article

NOTE Every NativeScript app page you create will have a layout, but you’re not limited to having a single layout on a page. You can build more complex UIs by nesting (or combing) two or more layouts together.

TIP The NativeScript documentation on layout containers is an excellent resource:  The explanation of all five layouts is a great quick-reference guide. Bookmark it now.

Layouts and screen pixels

As you’re learning about layouts, it’s important for you to understand some basics of how NativeScript (and most mobile devices) display UI elements on the screen.

DEFINITION Screen resolution is a measure of the number of pixels on a screen, usually described in the form of width x height. For example, a screen resolution of 640×480 means the screen is 640 pixels wide and 480 pixels high.

DEFINITION Dots per inch (DPI) is a measure of dot (or pixel) density on a mobile device’s screen. In mobile apps, it’s used to describe the number of pixels appearing in an inch of screen along the width or height. Most devices have the same DPI in both horizontal and vertical directions, so the DPI is described as a single number. For example, 400 DPI would mean 400 pixels per inch exist in each row and column of pixels.

Although mobile devices have varying screen resolutions and DPI, all devices have rectangular screens organized in rows and columns of pixels. Each pixel on the screen can be references by using a coordinate of (X, Y), with X representing the number of pixels from the left of the screen and Y representing the number of pixels from the top of the screen.


Figure 2 The leftmost top pixel is referenced by the (0, 0) coordinate. The fourth pixel from the left and fifth from the top is referenced by the (3, 4) coordinate.

Figure 2 shows how the leftmost top pixel can be referenced by the coordinate of (0, 0). Similarly, the pixel in the fourth column and fifth row down can be referred to using the coordinate (3, 4).

NOTE You’ll notice that the first row and column on the screen is referred to using the number zero. You’re probably familiar with this practice of counting from zero instead of one, but I wanted to call your attention to it.

When you use NativeScript layouts to organize your UI elements, you won’t spend a lot of time thinking about individual pixels (at first). As you learn about each layout using screen coordinate to reference pixel, it’s an easy way to explain how NativeScript places UI controls on the screen.

Download the free first chapter of NativeScript in Action and see what NativeScript can do for you. For more information (and a discount code) also see this Slideshare presentation.