Platforms – Platform adaptation

Platform adaptation

Material Design supports design and usability best practices across platforms to help create beautiful user experiences.

When to adapt Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Material Design was built on a foundation of best practices in both traditional and web design, informed by user experience research and cognitive science. The design guidelines that developed from these findings are intended to be universally applied across all platforms and devices.

Design conventions can differ from platform to platform. These differences in convention can affect the user's ability to understand the UI or complete certain tasks. In these cases, it is recommended to adapt to platform-specific conventions. In areas where design differences are minimally disruptive, adapting to the platform is optional.

The following guidelines indicate when you should adapt to native platform conventions, and when you have the option to adapt. Platform conventions are constantly evolving, and Material Design is evolving with them to increase the quality of our design patterns.

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

Toolbars

Toolbars are commonly used to frame the context of a screen.

It is recommended to use a platform’s default text alignment for toolbar titles, unless multiple action buttons are present.

Android/Web

Titles are always left-aligned.

iOS

Titles are center-aligned by default.

Android

When multiple actions, or even no actions, appear on the right side, toolbar titles are always left-aligned.

iOS

When multiple action buttons are on the right side, or at the home screen of an application, titles may be left-aligned.

Iconography

System icons are used to represent the most universally available actions for the platform.

Android/Web

The up button contains a thin arrow with a stem.

iOS

On iOS, the back arrow is thicker, and without a stem.

Android/Web

The action overflow menu icon (indicated by the “More…” symbol) contains three vertical dots.

iOS

The action overflow menu icon (indicated by the “More…” symbol) contains three horizontal dots.

Controls

Controls should clearly indicate how users should interact with them.

Android

Use Material switches, checkboxes, and radio buttons.

iOS

Native platform switches may be used as they have matching functionality and appearance as Material switches.

Use switches instead of check boxes and check mark lists instead of radio buttons, as these are the graphics expected on iOS.

Web

You may use Material switches, checkboxes, and radio buttons.

Gestures

Edge swipe

An edge swipe starts from outside of the screen to reveal off-screen content.

Edge swipes can conflict with other swipe gestures, such as horizontal swipes through pages or table rows. To avoid these kinds of conflicts, an edge swipe should perform the same behavior as any other swipe that exists over a content area.

Android

When conflicting gestures are not present, performing an edge swipe from the left reveals off-screen content, such as a navigation drawer.

iOS

When conflicting gestures are not present, performing an edge swipe from the left navigates you back through an app’s hierarchy.

Do.

Web

Browsers often use edge gestures for their feature set. Edge swipes should not be used on the web.

Don’t.

Web

Edge swipes can not be relied on across browsers.

Typography

Typography communicates both text content and branding. In both cases, text must be accessible and resizable.

If your app already uses typography for branding, it is recommended to do so in moderation.

Android

The default typeface on Android is Roboto. On Android, text size should be specified in scaleable pixels to allow type to be resized using accessibility features.

iOS

The default typeface on iOS is San Francisco. Using this typeface is the easiest way to implement accessibility features like Dynamic Type. Using other typefaces may require making adjustments to get the same accessibility features.

Web

While Arial is the most broadly available font on the web, modern browsers provide accessibility and scaling support for web fonts.

Material Design’s standard typographic guidelines for Roboto on the web can help simplify your font usage. Alternatively, use custom fonts and establish your own type hierarchy that ensures legibility.