Structure

UI regions

For guidance on arranging elements in z-space to achieve the correct behavior and shadows, see the Environment and Elevations and shadows sections.

Mobile structure

This structure includes a permanent app bar and floating action button. An optional bottom bar can be added for additional functionality or action overflow. Side nav menus overlay all other structural elements.

Tablet structure

This structure shows a permanent app bar with a floating action button. The app bar absorbs elements from the tablet and mobile bottom bars. An optional bottom bar can be added for additional functionality or action overflow. A side nav overlays all other structural elements. A right nav menu can be accessed temporarily or pinned for permanent display.

Desktop structure

The desktop structure contains a permanent app bar with a floating action button. The app bar absorbs elements from the tablet and mobile bottom bars. Where possible, the window controls are absorbed into the app bar.

Side navigation menus can take up the full height of the screen size (including under the app bar) and be accessed temporarily or pinned for permanent display. Side nav menus, as well as the content canvas, can have their own secondary toolbars for tabs, palettes, or secondary actions.

Material Design desktop layout — Desktop structure
Top left to right: App bar/primary toolbar
Second row from left to right: Toolbar, secondary toolbar, and toolbar
Third row from left to right: side nav, content canvas, and right nav
On the bottom: floating action button

UI regions

Define a primary horizontal or vertical divider.

Vertical divider for Material Design layout — Vertical divider

Material Design horizontal divider — Horizontal divider

Avoid slicing up the interface into too many regions which can cause L shapes. Instead, use whitespace to delineate secondary areas.

Use whitespace in Material Design — Do.
Use whitespace.

Avoid too many regions in Material Design — Don’t.
Avoid creating too many regions.

Break edges with cards and floating action buttons.

Material Design card breaking an edge — Card breaking an edge

Material Design floating action button on an edge — Floating action button breaking an edge

Use cards to organize content when specific behaviors are needed or if groupings of information need more separation than what whitespace or dividers can provide.

Toolbars

Toolbars are versatile and can be used in many different ways.

Full-width default height app bar in Material Design — Full-width, default height app bar

Material Design full-width extended height app bar — Full-width, extended height app bar

Material Design column-width toolbars for hierarchy — Column-width toolbars at multiple levels of hierarchy

Flexible Material Design toolbar and card — Flexible toolbar and card toolbar

Floating toolbar using Material Design — Floating toolbar

Material Design detached toolbar palette — Detached toolbar palette

Bottom toolbar with Material Design, attaches to keyboard — Bottom toolbar that launches to a shelf and clings to the top of the keyboard or other bottom component

Bottom toolbar shelf with Material Design style — Bottom toolbar shelf

App bar

The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.

The nav icon at the left side of the app bar can be:

A control to open a navigation drawer
An up arrow for navigating upward through your app’s hierarchy
Omitted entirely if no navigation is required from this screen

The title in the app bar reflects the current page. It can be an app title, page title, or a page filter.

Icons on the right side of the app bar are app-related actions. The menu icon opens the overflow menu, which contains secondary actions and menu items like help, settings, and feedback.

Material Design App Bar Structure — App bar structure
On the left: Nav icon, title, and filter icon
On the right: Action and menu icons

Light App Bar in Material Design — Light

Colored App Bar in Material Design — Colored

Transparent App Bar in Material Design — Transparent

Title color

In an app bar, all icons should be the same color.

The title can have a distinct color from the icons if increased visual hierarchy is needed. Distinct title colors work best on backgrounds with enough contrast for both white and black glyphs.

Single color design in Material Design style — Single color (default)

Distinct title color in Material Design — Distinct title color

Metrics

Default heights:

Mobile Landscape: 48dp
Mobile Portrait: 56dp
Tablet/Desktop: 64dp

For extended app bars, the height is equal to the default height plus content increment(s).

Material Design app bar dimensions and paddings — App bar height: 56dp
App bar left and right padding: 16dp
App bar icon top, bottom, left padding: 16dp
App bar title left padding: 72dp
App bar title bottom padding: 20dp

Material Design app bar with increased height for prominence — The app bar with significantly increased height for prominence
App bar height: 128dp

Material Design action and title area dimensions — Action area height: 56dp
Title area height: 80dp
Title area bottom padding: 8dp
Description area height: 72dp
Description area bottom padding: 16dp

Material Design keyline set by 64dp app bar height — Incremental keyline is set by the app bar height, with a height of 64dp, which determines the keyline increment.

App bar left and right content padding: 24dp
App bar icon top and bottom padding: 20dp

Material Design app bar dimensions and padding details — Prominent app bar height: 128dp
App bar left and right icon padding: 24dp
App bar left content padding: 80dp

Density

When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts.

Dense app bar for desktop in Material Design — **Dense app bar on desktop**
App bar height: 48dp
App bar left and right content padding: 24
App bar left content padding: 80dp
Icon height with touch target: 40dp

Dense prominent app bar in Material Design — **Dense prominent app bar**
Dense prominent app bar height: 96dp
App bar left and right content padding: 24dp
App bar left content padding: 80dp

Menus

A menu is a temporary sheet of paper that always overlaps the app bar, rather than behaving as an extension of the app bar.

Material Design app bar example — Example of an app bar

Material Design menu example in app bar — Example of menu in an app bar

System bars

Status bar/window bar

On Android, the status bar contains notification icons and system icons. On Chrome, the top bar contains the window controls: minimize, full screen, and close. In a Chrome app, the top bar can disappear, and the window controls are then brought into the app bar.

Android status bar with Material Design — Android status bar

Chrome window bar with Material Design elements — Chrome window bar

Metrics:
Android status bar height: 24dp
Chrome window height: 32dp

Android status bar above Material Design app bar — Android status bar on top of the app bar

Material Design Chrome window bar at app bar top — Chrome window bar on top of the app bar

Chrome window controls in Material Design app bar — Chrome window controls inside app bar

Full screen

Some content is best experienced in full-screen mode, such as videos, games, books, and slides. Full-screen mode increases engagement with content by minimizing visual distraction from controls and protecting users from escaping the app accidentally.

Full-screen mode comes in several types:

Lean back
Immersive
Lights Out

Lean back

Lean back mode is best suited to watching content with limited screen interaction, such as a video.

Interaction: Touch the screen anywhere to bring back the system bars.

Tap to show system bars in Material Design — Touch the screen anywhere to bring back the system bars

Immersive

Immersive mode is best when users need to interact heavily with the screen, such as playing a game or interacting with an image gallery. You may show and hide your app’s controls along with the system bars as needed.

Interaction: Swipe from any edge of the screen to make the system bars appear. The first time an app goes full-screen, this swipe gesture is explained.

Edge swipe exception: Apps that use the swipe-from-edge gesture to perform actions should also display the system bars when that gesture is used. For example, a drawing app that uses an edge swipe (such as to draw a line) should also display the system bars semi-transparently for a few seconds any time that gesture occurs.

Swipe from screen edges to reveal system bars, Material Design — Swipe from the any edge of the screen with a hidden bar to bring back system bars.

Lights Out

In Lights Out mode, the Action Bar and Status Bar fade away and become unavailable after a few seconds of inactivity. The Navigation Bar is still available and responds to touches but appears dimmed.

Dark status bar

By default, the color of the status or window bar is a darker shade of the app bar color. It can also use color from another element in the layout or be translucent.

Color sample derived from Material Design content — Color is based on a sample taken from the content

Translucent status bar with Material Design, 20% Black — Translucent status bar, 20% Black #000000

Material Design dark status bar — Dark status bar

Material Design dark status bar matching app bar color — Status bar color in a darker tone of the app bar color

Light status bar

The light status bar, with dark icons, better harmonizes with light content and can be used as an alternative to the dark status bar.

Translucent light status bar with Material Design, 70% White — Translucent light status bar, 70% White #FFFFFF

Material Design light status bar with #E0E0E0 background — Light status bar, default background fill is #E0E0E0

Material Design light status bar in dark app bar tone — Light status bar in darker tone of a light app bar color

Android navigation bar

The navigation bar in Android houses the device navigation controls: Back, Home, and Overview. It also displays a menu for apps written for Android 2.3 or earlier.

Height: 48dp

Dark Android navigation bar in Material Design — Dark

Light Android navigation bar in Material Design — Light

Color variants

The navigation bar can be opaque, translucent, or transparent.

Translucent Android navigation bar in Material Design — Translucent

Translucent Android navigation bar over complex images in Material Design — Translucent over complex image

Transparent Android navigation bar in Material Design — Transparent

Transparent Android navigation bar over an even-toned image in Material Design — Transparent over even-toned image

Chrome OS shelf

The shelf houses the app launcher, application icons, and system settings on Chrome OS.

Height: 56dp

Chrome OS shelf example with Material Design elements — Example of Chrome OS shelf

Side nav

If present, side nav bars can be pinned for permanent display or float temporarily as overlays. Side navs can be positioned on the left or right side of the screen.

The content appearing in the left nav is ideally navigation- or identity-based. Right nav content should be secondary to the main content on a page.

Side nav bars may be pinned for permanent display, or they can float temporarily as overlays. Temporary nav drawers overlay the content canvas; whereas pinned nav panels are situated alongside or below the content canvas.

Screen size can determine whether a panel is pinned or an overlay. With sufficient space, a panel can be pinned and content adjusted responsively. With insufficient space, a panel has to be an overlay.

Metrics

Mobile:

Width = Screen width − 56 dp

Maximum width: 320dp

Maximum width applies only when using a left nav. When using a right nav, the panel can cover the full width of the screen.

Desktop: Maximum width for a left nav is 400dp. The right nav can vary depending on content.

Material Design left navigation on mobile — Left nav on mobile

Right nav on mobile

Material Design left navigation on desktop — Left nav on desktop

Material Design right navigation on desktop — Right nav on desktop

Whiteframes

Whiteframes provide a variety of layout structures using a consistent approach to surfaces, layering, and shadows.

For download and other information about whiteframes, see Resources.

Material Design expandable and collapsible carded content — Carded content that expands and collapses

Material Design overlay with focused app bar on desktop — Overlayed content details with focused app bar on desktop

Material Design left side nav and one-up stream desktop — Left side nav and one-up stream on desktop

Material Design source list — Source list

Material Design full-screen background with search field — Full-screen background image with inset search field and carded search results

Expandable footer drawer for Material Design — Expandable footer drawer

Structure

UI regions Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Mobile structure

Tablet structure

Desktop structure

UI regions

Toolbars Expand and collapse content An arrow that points down when collapsed and points up when expanded.

App bar Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Title color

Metrics

Menus

System bars Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Status bar/window bar

Full screen

Lean back

Immersive

Lights Out

Dark status bar

Light status bar

Android navigation bar

Color variants

Chrome OS shelf

Side nav Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Structure

Metrics

Whiteframes Expand and collapse content An arrow that points down when collapsed and points up when expanded.

UI regions

Toolbars

App bar

System bars

Side nav

Whiteframes