Go to Content
Design System
Playroom Storybook
#ClimateEmergency

Navigation - Top

Status Bar

Example - Status Bar
Open in Figma

The Status Bar is a fixed element that is visible on every view of George App. It is based on the device / OS of the user and commonly shows the time, and certain system status like mobile internet speed and remaining battery.

Status Bar is implemented in many components that are commonly used to compose a view, like Navigation Bar, Header, etc.
Keep in mind to add it to your design in case you are assembling a view from scratch that don’t use them.

Rules For Android
  • Status bar color should be already set by theme.
  • Can be set in Compose with rememberSystemUIController().setStatusBarColor()

Navigation Bar BETA

Rules For Designers
  • The Figma component is currently undergoing refactoring to make the latest design decisions easier to use.

Similar to the Status Bar, the Navigation Bar is an element that is visible on every view of George App. Its styling and some of the functionality is based on the OS, but they share their function which is to navigate between views within the app.

They share the following functionality:

  • the left action is used to navigate to the previous view
  • the title indicates the current view (on Android, the title is left-aligned, next to the back action, on iOS, it’s horizontally centered)
  • to the right, one or more actions that are related to the current view can be placed. it can be either a text label, or up to two icons.
Example - Navigation Bar
Open in Figma
Rules For Android

Modality

One difference between Android and iOS is their handling of modality.
Android basically presents all views on one axis, and users can always use the back action to return to the previous screen

iOS presents modal views in a different way, by stacking views on top of each other. this is visualised by showing the origin view behind the active view. When a modal view is used, the actions in the Navigation Bar change as well. By default, a Close action is placed at the right side of it, but it can be moved to the left in case there is a different primary action needed:

Example - Modality on iOS
Open in Figma

Large Header BETA

Rules For Designers
  • The Figma component is currently undergoing refactoring to make the latest design decisions easier to use.

The Large Header component is a custom design and not based on specific OS guidelines - but it is aligned with current design patterns on both the latest iOS version and Android Material 3.

Rules For Android

Core Views

The aligned design direction for George App is, that Core Views - that’s first level views that can be navigated to via the Tab bar - feature a Large Header tinted in George Blue.

Example - Large Header Core
Open in Figma
Rules For Android
  • Use GeorgeTopAppBarDefaults.coloredAppBarColors for parameter colors

Standard Views

Subsequent views should use the Large Header as well, but without a specific tint - we call these instances “Clear Header”

Rules For Android
  • Use GeorgeTopAppBarDefaults.clearAppBarColors for parameter colors
Example - Large Header Default
Open in Figma

If the view is scrolled, the Large Header collapses into a standard Navigation Bar:

Rules For Android
  • Use TopAppBarDefaults.exitUntilCollapsedScrollBehavior for the scrollBehavior
Example - Scrolling Behaviour Android
Open in Figma
Example - Scrolling Behaviour iOS
Open in Figma