A la Carte: Screen Types

From Spot Specific Documentation

Overview

This page describes the different types of screens available in Spot Specific Apps a la Carte. These are native, styled and blank.

About screen types

A screen's type determines its overall look-and-feel. Screen types determine such things as:

• Button appearance
• Default text colour
• Screen background colour
• The location of the navigation bar which allows users to find their way back up the logical structure of the application
• The appearance of certain built-in features

Mixing screen types

It's possible to mix native, styled and blank screens in the same application without any restrictions. Any combination of these screen types is permitted.

Changing screen type

The screen type selector

To change a screen's type to a different style, simply click the 'Edit' button at the bottom of the screen details page. The 'Type' selector (shown in the picture at the right) is used to determine which appearance the screen should use.

Screen types

Native

A Native screen running on Android.

The same Native screen running on iPhone.

Native screens appear with the default set of user interface elements and colours available on each platform. On iPhone, the default iOS buttons, menus and headers are used. Likewise, on Android, the standard set of Android buttons, menus and headers are rendered.

Native screens have the advantage of looking consistent with the rest of the platform on each device. This means that users will be instantly familiar with the basic elements of the interface, and consequently may find it easier to navigate your application. However, it using the native appearance may make it more difficult to ensure a consistent look and feel for each app across the two platforms.

Styled

The same screen, set to use the Styled screen type. The colours are set to the defaults, but these can be overridden using a custom stylesheet.

Styled screens appear with a a simple unified cross-platform look and feel, based around the Spot Specific green colour scheme. This appearance shows up identically on iPhone and Android platforms.

Blank

The same screen, using the Blank style. This example also uses a background image and image button widgets for navigation elements.

Blank screens are skeletal layouts containing no style information at all. They are therefore most suitable to building a completely customised look-and-feel.

Appearance information is added to blank screens by editing screen settings, as well as by attaching stylesheet assets.