Build Basic NativeScript App Templates

15 minutes

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.

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.

pro-course-rss-logo

PRO RSS Feed

Create Vertical/Horizontal Layouts with StackLayout

P

Create an Absolute Positioned Layout Using AbsoluteLayout

P

Add Responsive Wrapping Using WrapLayout

P

Position Views in a Dock Using DockLayout

P

Make a Grid Layout Using GridLayouts

P

Create Flex Based Containers Using FlexboxLayout

P
js tutorial about Create Vertical/Horizontal Layouts with StackLayout

Create Vertical/Horizontal Layouts with StackLayout

1:02 js PRO

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.

js tutorial about Create an Absolute Positioned Layout Using AbsoluteLayout

Create an Absolute Positioned Layout Using AbsoluteLayout

1:31 js PRO

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.

js tutorial about Add Responsive Wrapping Using WrapLayout

Add Responsive Wrapping Using WrapLayout

2:16 js PRO

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.

js tutorial about Position Views in a Dock Using DockLayout

Position Views in a Dock Using DockLayout

1:42 js PRO

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.

js tutorial about Make a Grid Layout Using GridLayouts

Make a Grid Layout Using GridLayouts

3:40 js PRO

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.

js tutorial about Create Flex Based Containers Using FlexboxLayout

Create Flex Based Containers Using FlexboxLayout

5:15 js PRO

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.

Presented by:

Brad Martin

Brad Martin spends most of his time writing TypeScript and leveraging NativeScript to build cross platform native Android and iOS apps.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?