10 Creating professional UIs with themes

 

This chapter covers

  • Styling your apps with NativeScript themes instead of custom CSS
  • Creating consistent-looking data entry forms to improve user experience

Over the last several chapters you’ve learned about data binding and interacting with mobile device hardware by creating the Pet Scrapbook app. The Pet Scrapbook app is functional, but it doesn’t feel like a well-designed app: it’s a little clunky. We’ve neglected the app’s visual design, the detail page is just hard to use, and the app is built for only phone-sized devices. It’s time to fix these issues and make the app feel polished.

Over the next two chapters, you’ll be learning how to turn functioning apps into more polished apps by using more advanced UI design techniques. What constitutes a more polished app is somewhat subjective, but there are solid UI design patterns that you can use to improve an app. In this chapter, we’ll start a journey of refactoring and refinement of the Pet Scrapbook app by using NativeScript themes to style the UI. Let’s get to it!

10.1   Themes

10.1.1   Incorporating themes into your app

10.2   Using text classes, alignment, and padding

10.2.1   Affecting text size

10.2.2   Aligning text

10.3   Styling buttons

10.3.1   Cleaning up

10.4   Styling list views

10.5   Working with images

10.6   Styling data-entry forms

10.6.1   Structuring data entry fields

10.7   Summary

10.8   Exercises

10.9   Solutions