5 Understanding the basics of app layouts

 

This chapter covers

  • Why it’s important for an app’s design to match its function
  • How to organize and layout the user interface (UI) of a NativeScript app with a Stack Layout
  • How to use common UI elements (labels, buttons, and text boxes)
  • How to create scrollable pages using the Scroll View

In Chapter 4, you learned how to navigate between the pages of a NativeScript app using XML and JavaScript code. You also began to create a mobile app for the Tekmo company. In this chapter, you’ll continue to refine Tekmo’s app while learning about UI layouts.

5.1   Understanding NativeScript layouts

Just creating pages for your app and navigating between them isn’t enough. 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 do.

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

Figure 5.1 Two different UI layouts, with charts 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

5.1.1   Layouts and screen pixels

5.2   Stack Layout

5.2.1   Adding content to the Tekmo app using Stack Layouts

5.2.2   Scrolling pages

5.2.3   Using textboxes and providing feedback to users

5.3   Summary

5.4   Exercise

5.5   Solutions