Cross-platform adaptation

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


When to adapt

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.


Cross-platform guidelines

Toolbars

Toolbars are commonly used to frame the context of a screen. On iOS, toolbars are called navigation bars. On Android, toolbars are called top app...

Read More

Toolbars are commonly used to frame the context of a screen. On iOS, toolbars are called navigation bars. On Android, toolbars are called top app bars.

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

Android

Titles are left-aligned by default in top app bars.

iOS

Titles are center-aligned by default in navigation bars.

Android

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

iOS

When multiple action buttons are on the right side, or on 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.

Read More

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

Android

The Up button contains a thin arrow with a stem.

iOS

On iOS, the back arrow is thicker and doesn’t have a stem. It should include a label to its destination.

Android

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.

Read More

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.

Gestures

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...

Read More

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.

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...

Read More

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.