Navigation - Top
Status Bar
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.
Rules For Android
- For a simple toolbar use
Toolbar, see GitHub:Toolbar.kt - This toolbar does not expand
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:
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
- Use a
GeorgeTopAppBarin aGeorgeScaffold - See Github: GeorgeTopAppBar.kt
- See Github: GeorgeScaffold.kt
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.
Rules For Android
- Use
GeorgeTopAppBarDefaults.coloredAppBarColorsfor parametercolors
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.clearAppBarColorsfor parametercolors
If the view is scrolled, the Large Header collapses into a standard Navigation Bar:
Rules For Android
- Use
TopAppBarDefaults.exitUntilCollapsedScrollBehaviorfor thescrollBehavior
