Tool bar(s)

[Tosin-Balogun]

What

When it comes to native app layout and structure, the apps often comprise of system bars, tool bars and content views as a whole. The system bars includes the status bar (battery, signal etc) and drag handle or navigation bar controls (on android).

The system bar sits on top of the toolbars which exist within an apps structure.

Toolbars are a common term to describe the top and bottom controls for in app navigation and action would usually live.

Problem

We describe them as top and bottom navigation, but these do not match up with how they are described or work. Each bar control often host action elements that does not involve navigation.

App UI structure

For the top tool bar, we have navigation/action bar and the bottom tool bar, we have the tab bar or toolbar. These are called app bars on android documentation but still mean the same thing in common dev terminology.

Detail

iOS describes tool bar as

A toolbar provides convenient access to frequently used commands and controls that perform actions relevant to the current view.

A navigation bar appears at the top of a window or screen, helping people navigate through a hierarchy of content.

A tab bar lets people navigate between top-level sections of your app.

All 3 have direct relationship under the iOS app layout structure and code with the toolbar parameter deciding where each component sits within its view structure

Android describes tool bar as

A Toolbar is a generalisation of action bars for use within application layouts. While an action bar is traditionally part of an Activity's opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy. An application may choose to designate a Toolbar as the action bar for an Activity using the setActionBar() method

Top app bars display navigation, actions, and text at the top of a screen

Bottom app bars display navigation and key actions at the bottom of mobile and tablet screens

Navigation bars let people switch between UI views on smaller devices

All 3 have direct relationship under the Android layout structure (called scaffold) and code with the toolbar parameter deciding where each component sits within its view structure

References

• https://developer.apple.com/design/human-interface-guidelines/layout
• https://developer.apple.com/design/human-interface-guidelines/toolbars
• https://developer.android.com/develop/ui/compose/components/scaffold
• https://developer.android.com/develop/ui/compose/components/app-bars

Related to

#53 #17