App bars: top

The Material Design top app bar displays information and actions relating to the current view.

Related components

• FlexibleHeader
• HeaderStackView
• NavigationBar

Overview

App bar is composed of the following components:

• FlexibleHeader
• HeaderStackView
• NavigationBar

It is essentially a FlexibleHeader with a HeaderStackView and NavigationBar added as subviews.

MDCAppBarViewController is the primary API for the component. All integration strategies will make use of it in some manner. Unlike UIKit, which shares a single UINavigationBar instance across many view controllers in a stack, app bar relies on each view controller creating and managing its own MDCAppBarViewController instance.

Installation

• Typical installation

Usage

• Typical use: View controller containment, as a navigation controller
• Typical use: View controller containment, as a child
• Typical use: View controller containment, as a container
• Typical use: Tracking a scroll view
• Typical use: Enabling observation of the tracking scroll view
• UINavigationItem support
• Interactive background views
• Adjusting the top layout guide of a view controller

Behavioral flags

A behavioral flag is a temporary API that is introduced to allow client teams to migrate from an old behavior to a new one in a graceful fashion. Behavioral flags all go through the following life cycle:

1. The flag is introduced. The default is chosen such that clients must opt in to the new behavior.
2. After some time, the default changes to the new behavior and the flag is marked as deprecated.
3. After some time, the flag is removed.

• Recommended behavioral flags
• Removing safe area insets from the min/max heights
• Enabling top layout guide adjustment
• Enabling inferred top safe area insets

See the FlexibleHeader documentation for additional usage guides.

Extensions

• Theming

Accessibility

• Accessibility

Migration guides

• Migration guide: MDCAppBar to MDCAppBarViewController

Unsupported

• Color Theming
• Typography Theming