Beginner’s Guide to NativeScript (Part 3): Designing App Layouts for Android and iOS
We started this series with the core intention of designing cross-platform apps that can provide the same performance as native Android and iOS apps. The best part is that with NativeScript, these apps can be written in JavaScript and frameworks like Angular and Vue—we’ll explore this in more detail in upcoming posts.
Just to quickly recap what we’ve covered so far.
- The first post was about setting up our NativeScript environment and running our first NativeScript app:
- In the second post, we modified the previously-created app into a multi-page application:
In this post, we’ll learn how we can create different types of app layouts in NativeScript.
In general, layouts are important to learn before creating any UI view. They provide us the structures to place content on the screen. The more we learn about layouts, and the more that we practice them, the more we’ll be able to visualize content in a well-defined format.
Layouts in NativeScript
In our last post, we created a multi-page application by returning a page object, inside which we defined a button, a span, and more from the createViewModel function. It was also one of the ways to create a layout on the page.
The simplest and most scalable way to create a layout is to create an xml file and use it in the main-view-model.js file—i.e. the file that’s used to return the viewModel object to the frame.
If you are not following the series so far, you can create a new project using the command tns create projectname and then can follow the post below:
There are many types of possible layouts in NativeScript—we’ll cover the basic ones in this beginner series.
1. Stack Layouts
Stack layouts are used to stack components, one on top of each other. The stack layouts can place the components either horizontally or vertically.
In this layout, either the sum of all layout widths or the sum of all layout heights is equal to the width and height of the screen, respectively.
To create a stack layout of images, we can just use the tag StackLayout and use the Image tag inside them—like this inside our main-page.xml file:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
<ActionBar title="My App" icon=""></ActionBar> <StackLayout orientation="horizontal">
<Image src="res://logo" stretch="none"></Image>
<Image src="res://icon" stretch="none"></Image>
</StackLayout></Page>
Here, the orientation is set to horizontal, which displays both of the images in a horizontal stack:
Note: The images are taken from the res folder that you can find in src/main/res.
If we set the positioning as vertical:
<StackLayout orientation="vertical">
<Image src="res://logo" stretch="none"></Image>
<Image src="res://icon" stretch="none"></Image>
</StackLayout>
2. Wrap Layout
This layout wraps the items right next to each other. Unlike StackLayout, the height or width of each item remains the same:
<WrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray"> <Label text="Label 1" width="70" height="70"
backgroundColor="red"/> <Label text="Label 2" width="70"
height="70backgroundColor="green"/> <Label text="Label 3" width="70" height="70"
backgroundColor="blue"/> <Label text="Label4" width="70" height="70"
backgroundColor="yellow"/></WrapLayout>
Now, when we use the wrap layout with a vertical alignment, the wrapping will be done vertically, keeping all the width and height the same again:
<WrapLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray"> <Label text="Label 1" width="70" height="70"
backgroundColor="red"/> <Label text="Label 2" width="70"
height="70backgroundColor="green"/> <Label text="Label 3" width="70" height="70"
backgroundColor="blue"/> <Label text="Label4" width="70" height="70"
backgroundColor="yellow"/></WrapLayout>
3. Grid Layout
The next important layout is the grid layout. In the grid layout, the content is presented in the form of rows and columns, providing a kind of table structure.
Now, if you just place the content in each of these boxes (or probably merge some boxes), you’ll see a grid structure like this:
Creating a grid layout is super easy—we just need to specify the number of rows and columns in the grid, along with their width and height.
A grid layout can be broken into two parts: the parent grid element GridLayout and the child elements Label, Image, etc. Here, the parent element can have parameters like number, auto, * in both columns and rows.
- number: indicates the number of device-independent pixels for the column or row
- auto: indicates the width of the element present in the col specified as auto
- *: indicates the remaining space
In the child element, we need to specify to which row and column number the element belongs. rowspan and colspan indicate the number of rows and columns that are merged together.
The following code is an example of a grid layout:
<GridLayout columns="90, auto, *" rows="90, auto, *" width="210" height="210" backgroundColor="lightgray" >
<Label text="Label 1" row="0" col="0" backgroundColor="orange"/>
<Label text="Label 2" row="0" col="1" colSpan="1" backgroundColor="green"/>
<Label text="Label 3" row="1" col="0" rowSpan="1" backgroundColor="blue"/>
<Label text="Label 4" row="1" col="1" backgroundColor="yellow"/>
<Label text="Label 5" row="1" col="2" backgroundColor="red"/>
<Label text="Label 6" row="2" col="1" backgroundColor="pink"/>
<Label text="Label 7" row="2" col="2" backgroundColor="purple"/>
</GridLayout>
Now, you can play with this grid by adjusting the colspan or rowspan and the parameters of the GridLayout parent.
Conclusion
In this post, we’ve learned to create three different kinds of layouts in NativeScript. Whether it’s a StackLayout, WrapLayout, or a GridLayout, we’ll be using all of them in future posts. Sometimes, a combination of these layouts is required for an app, and in that case, understanding all of them separately first makes more sense.
In the next post of this series, we’ll dive deeper into layouts and their real-life use cases in writing declarative UIs.
If you liked the article, please clap your heart out. Tip — Your 50 claps will make my day!
If you’d like to get updates, follow me on Twitter and Medium. If anything isn’t clear or you want to point out something, please comment down below.
Editor’s Note: Heartbeat is a contributor-driven online publication and community dedicated to providing premier educational resources for data science, machine learning, and deep learning practitioners. We’re committed to supporting and inspiring developers and engineers from all walks of life.
Editorially independent, Heartbeat is sponsored and published by Comet, an MLOps platform that enables data scientists & ML teams to track, compare, explain, & optimize their experiments. We pay our contributors, and we don’t sell ads.
If you’d like to contribute, head on over to our call for contributors. You can also sign up to receive our weekly newsletters (Deep Learning Weekly and the Comet Newsletter), join us on Slack, and follow Comet on Twitter and LinkedIn for resources, events, and much more that will help you build better ML models, faster.
