Bring your app to life with Material Design
Follow the principles of Material Design to create apps that both delight and enlighten your users in equal measure.
Why it works
Material Design includes design best practices, common conventions, and visuals to help you build expressive apps that feel at home on any device. As users become familiar with this visual language, they’ll come to expect it. By following this design, you can create apps that offer instant appeal while enhancing usability and improving your user engagement and retention.
- Surfaces and shadows used as metaphors, UI elements should be individually layered surfaces, stacked on top of or next to each other. Shadows should be used to communicate which surfaces are in front of others, helping focus attention and establish hierarchy.
- Imagery should be full-bleed. Minimize spacing between photos, as well as margins between photos and screen edges for a more immersive and content-rich UI.
- Colors should be used boldly to emphasize branding and important UI elements. Be sure to pick a primary and accent color to provide a consistent experience throughout your app. Consider making use of the Palette API to pull color directly from content, for a more immersive experience.
- Metrics and keylines should be used to align and size content according to an 8dp baseline grid, for readability and visual consistency. More precise text positioning can use a 4dp grid. Where appropriate, align elements such as body text, thumbnails, app bar titles, and the like to the standard keylines.
- Meaningful motion, including animations and transitions, should be used to help guide and focus users while also providing bridging from one screen to the next. Meaningful motion in visual storytelling can go a long way toward providing a delightful user experience and help with visual continuity.
Responsive interactions such as basic touch feedback should take the form of surface ripples.
On pre-5.0 devices, ripples aren’t an expected feature, so defer to the default
android:selectableItemBackgroundbehavior. Aside from surface ripples, interactive surfaces should also lift on touch to meet the user's finger during input, and any changes should radiate from the point of contact.
System user interface components
- The system status bar on Android 5.0+ should be colored to complement the app’s primary color or the current screen’s content. For full-bleed imagery, the status bar can be transparent. For API level 23+, it’s possible to set the system status bar to a light alternative (where icons become darkened).
- App bar and toolbars should be used to inform and help express branding using color, typography, and product logo (avoid using the launcher icon). On screens with rich imagery, the app bar can be transparent to provide a more immersive UI experience, since images should run edge-to-edge and can even appear behind the app bar or status bar. Be sure to provide text protection using scrims for any icons in the transparent app bar. Also, consider using scrolling techniques that provide a richer visual experience for the user.
- Tabs should follow Material Design interactions and styling. They must be horizontally swipeable with no vertical separators between tabs. Indicate selected tabs by one or both of a foreground color change and a small strip below the tab text (or icon) colored with an accent color. The tabs and the app bar are on the same surface elevation unless there is a clear delineation in the hierarchy.
- The navigation drawer should contain only primary navigational elements, and follow the new visual guidelines. It should appear in front of both the app bar and screen contents and underlay the system status bar. As a best practice, be sure to have the drawer opened during the first run of your app to improve discoverability.
- Consider using bottom navigation if your app has 3 to 5 top level destinations that require direct access. The shifting bottom navigation pattern is recommended as it provides more visual impact and allows for longer text strings in labels. Be sure to have the bottom navigation bar accessible from most screens, but exclude deep-level detail screens, and allow it to hide as the user scrolls.
User interface elements and patterns
- Theming should be updated to the latest material theme to avoid the app looking dated. Updating system theming is one of the quickest ways to provide visual polish. Be sure to update from Gingerbread and Holo theming to provide a consistent visual design and user experience. Update the theming of UI elements such as selectors, pickers, dialogs, menus, and text fields to the Material Design standards.
- Buttons are the most used interactive elements in an app, so updating them to the latest visual design patterns is one of the highest impact changes you can make. If you’re using custom buttons, avoid overly rounded corners, heavy gradients, or glossy surfaces, as these types of buttons make your app look dated. Employ raised buttons for important actions that need to be visually highlighted, or for text-heavy layouts where a flat button would be lost. For simple actions that don’t need to be highlighted, flat buttons are the most commonly used buttons. For the most important action for a given screen use the floating action button (FAB), a visually distinct button that floats above all other UI elements.
- Tiles and lists should be used when users are directly comparing items to each other. Use listviews for text-heavy content that user will skim quickly. Use tiles when the content is primarily visual. Be sure to use RecyclerView widget when creating your lists and tiles for more robust layout options.
- Cards should be used when there is a mix of content types, where the user is exploring content and not directly comparing images or text strings. Use also when there are multiple actions on a surface. While cards make items pop and gives them visual focus, be aware that overusing cards creates unnecessary visual noise. Be sure to use the CardView widget when creating card content.
- In-app search should be implemented using inline search in the app bar. If searching for content is the main function of the app, then consider using a persistent search widget app bar.
- Dividers should only be used when separating major sections of content or providing important distinctions between areas of text. Be wary of having dividers for every item in a simple listview, this creates much visual noise while providing negligible improvements in readability. We recommend the use of whitespace and typography to help delineate content instead.
- When designing empty states be sure to communicate to the user the reason for the empty state and include a call to action to address the empty state.
New for Android 7.0
- Notifications have been revised with new content areas, interactions, user controls, and short text input.