Usage
The app bar is anchored at the top of the screen to provide content and actions that relate directly to the current page. It can include navigation elements, page titles, and 1-3 essential actions that support the primary task on the screen.
The information and actions within the app bar should be contextual and tailored to the page’s purpose. While primarily focused on page-specific content, the app bar may also include global controls, such as notifications, where applicable.
Reference Material Design for general guidance when designing for Android.
Design properties
| Property | Values | Default |
|---|---|---|
| State Variant | Default | Scrolled | Default |
| Show 1st trailing icon Boolean | true | false | true |
| Show 3rd trailing icon Boolean | true | false | true |
| Show 2nd trailing icon Boolean | true | false | true |
| Configuration Variant | Small centered | Small | Medium | Small centered |
Types
Small centered (default)
Small
Medium
Behavior and interaction
Configuration
- Three types: Small centered (default), small, and medium.
- Includes leading button, descriptive headline, and 1-3 trailing icon buttons.
Leading button
- Leading button is for navigating, and consists of an icon button that either navigates the user back to the previous screen, or opens a page menu.
- Leading button can be instance-swapped for a logo. Logos can perform actions, but should not open menus. If a menu opener is needed, an icon button should be used.
Headline
- Headline alignment may be leading or centered.
- Headline text should fit on a single line on small screens.
- Headline text can wrap to a second line on larger mobile screens that use the medium top app bar.
Trailing icon buttons
- Up to 3 trailing icon buttons are anchored to the trailing edge of the app bar.
- The most used action is placed closest to the leading edge for easier access.
- Trailing icon buttons are used to perform page-relevant actions, not to open menus that house additional actions.
Scrolling
- The app bar can stay fixed on the page or hide and reappear in sync with scrolling actions.
- A contrasting fill color is used when the page is scrolled for visual separation of the app bar and page content.
Positioning
The app bar should be anchored to the top of the screen, with space_static100 (8px) spacing between the top app bar and any underlying content in the unscrolled state. The width should be set to full-width to fill the screen horizontally.
Writing guidelines
Headline
- Headline text should succinctly identify the page, section, or product, and should be as brief and direct as possible.
- Keep headlines specific to the current screen or task.
- Use sentence case (only the first word and proper nouns capitalized).
- Make the headline descriptive, not decorative — it should answer “Where am I?”
- Avoid redundancy with navigation labels or tab names.
- Ensure headlines adapt to layout changes and text wrapping rules:
- Small screens: single-line headlines only.
- Medium and large screens: may wrap to a second line when used with medium top app bar, but try to avoid if possible.
- Use to identify and describe the page, section, or product.
- Use to show navigation or actions related to the page content.
- Use concise, meaningful headlines (e.g., “Settings,” “Profile,” “Downloads”).
- Match the headline to the user’s current context or action.
- Use consistent terminology across pages, avoiding redundant or filler words.
- Keep headline text short and descriptive.
- Wrap long headlines only on medium or large screens.
- Keep localization and edge cases in mind in regards to text length.
- Never truncate headline text.
- Don’t wrap headline text on small screens.
- Don’t use all caps or decorative symbols.
- Don’t repeat the app or brand name in every headline.
- Don’t overload the headline with secondary information (dates, counts, etc.).
- Don’t center-align long or multi-line headlines, as it harms readability.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Oct 28, 2025 |
1.0.0 |
Initial draft of component guidance |