Cross-platform adaptation

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


When to adapt

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

Design conventions differ from platform to platform. These differences in convention can affect the user's ability to understand the UI or complete certain tasks. In such cases, it’s 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 to adapt to native platform conventions and adaptation is optional. Platform conventions constantly evolve, 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 and their height is shorter than the...

Read More

Toolbars are commonly used to frame the context of a screen. On iOS, toolbars are called navigation bars and their height is shorter than the Android version. On Android, toolbars are called top app bars.

It’s 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.

Translucency

Material Design uses shadows to express elevation in app bars. In iOS, products can use translucency to differentiate app bars from content.

Android

Use shadow to express elevation.

iOS

Products have the option to use translucency to express elevation in iOS. Use a hairline as a bottom border of the app bar to ensure differentiation between the top app bar and scrolling content.

Iconography

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

Read More

System icons are used to represent many 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.

iOS

On iOS, the back arrow may also include a label for the associated 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 should be used as they have matching functionality and presentation as Material switches.

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

Optional actions

Dropdown menus display a list of options triggered by an icon, button, or action.

Read More

Dropdown menus display a list of options triggered by an icon, button, or action.

Android

Use a dropdown menu to display items available under an overflow icon.

iOS

Use a bottom sheet to display available options under an overflow icon.

Android

Use Material pickers.

iOS

Use iOS time pickers.

Communication

Dialogs inform users about critical tasks that require a decision and they can contain multiple actions. On iOS there are components that perform similar functions...

Read More

Dialogs

Dialogs inform users about critical tasks that require a decision and they can contain multiple actions. On iOS there are components that perform similar functions to dialogs on Android, such as alerts and action sheets. Look at the number of actions and their text length to decide which component (Alert or Action Sheet) to use when adapting a dialog component to iOS.

Use Alerts when there are two actions with short text labels that fit horizontally.

Android

Use a simple dialog when displaying two actions.

iOS

You have the option to use an alert when displaying two actions.

When there are three or more actions with long text labels in a Material dialog, products may use iOS action sheets or bottom sheets.

Android

Stack actions if a text label is long.

iOS

Products may use an iOS action sheet if there are three or more actions.

iOS

Products may use a bottom sheet if there are three or more actions.

Gestures

An edge swipe starts from the outer edge of the screen to reveal off-screen content. Edge swipes can conflict with other swipe gestures, such as...

Read More

Edge swipe

An edge swipe starts from the outer edge 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 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 the user back in an app’s hierarchy.

Transitions

Transitions use motion to help users navigate an app by illustrating the relationship between UI elements. It is recommended to use the platform defaults as...

Read More

Transitions use motion to help users navigate an app by illustrating the relationship between UI elements. It is recommended to use the platform defaults as a starting point for implementing motion for transitions.

Android

The default transition on Android uses scale to indicate moving forward and backward in a navigation flow.

iOS

The default transition on iOs uses horizontal translation to indicate moving forward and backward in a navigation flow.

Typography

Typography communicates both text content and branding. In both cases, text must be accessible and resizable. If your app already uses a brand specific typeface...

Read More

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

If your app already uses a brand specific typeface for branding, it’s recommended to use it in moderation throughout the app.

Android

The default typeface on Android is Roboto. On Android text size should be specified in scalable 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 adjustments to get the same accessibility features.