In this course, we will learn how to use the core layouts for NativeScript apps. We will start with the basic principles of NativeScript layouts using XML. This course will use the app templates provided from the NativeScript framework and installed using [the NativeScript CLI](https://egghead.io/lessons/angular-1-x-set-up-a-native-app-project-with-the-nativescript-cli).

We will cover the following layouts: `StackLayout`, `WrapLayout`, `GridLayout`, `DockLayout`, `AbsoluteLayout` and `FlexboxLayout`. Understanding the concepts and usage of UI layouts in NativeScript is key for a great app.

The StackLayout component is one of the many layout containers for your UI. We will use the StackLayout to create a vertical and horizontal layout container in a NativeScript app.

Create Vertical/Horizontal Layouts with StackLayout 

We will use the AbsoluteLayout component to create a layout container which uses left-top coordinates to position its child components in a NativeScript app.

Create an Absolute Positioned Layout Using AbsoluteLayout 

We will use the WrapLayout component to create a layout that wraps UI widgets to a new row or column if no space is left in a NativeScript app.

Add Responsive Wrapping Using WrapLayout

We will use the DockLayout component to create a layout container which allows us to specify sides (top, bottom, left, right) to dock child components to in a NativeScript app.

Position Views in a Dock Using DockLayout

We will use the GridLayout component to create a layout container that can span any number of rows and columns. This allows us to create very complex UIs in a NativeScript app.

Make a Grid Layout Using GridLayouts 

Use the FlexboxLayout component to create a layout container that is based on the CSS flexbox-layout in modern browsers. We will examine several of the properties, behaviors, and benefits that the FlexboxLayout provides with native mobile UI layouts in a NativeScript app.

Build Basic NativeScript App Templates

Instructor

Course content (6 lessons)

Instructor