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 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.
- Metrics and keylines should be aligned to and sized 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 keylines.
and responsive interactions
including animations and transitions should be used to help guide and focus users.
Meaningful motion in visual storytelling can go a long way toward providing a delightful user experience and help with visual continuity.
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 can also lift on touch to meet the user's finger during input.
- Patterns added to Android 5.0 including swipe to refresh any content screens that require reloading, custom animations to bridge one screen to the next, and scrolling techniques that provide a richer visual experience for the user.
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 shouldn’t have the launcher icon in the top left. Branding is achieved using color, typography, and product logo instead. On screens with rich imagery, the app bar should 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. The new toolbar widget can be transparent and placed directly in your layout.
- 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.
User interface elements
- 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.
- 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.
- 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.
- 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 dedicated 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.
New for Android 7.0
- Notifications have been revised with new content areas, interactions, user controls, and short text input.