Motion is a powerful tool that should be used sparingly in the driving context. It is appropriate only when it can help inform drivers without distracting their attention from the road.
Guidance at a glance:
- Avoid distracting users with unnecessary motion
- Use motion to increase users’ understanding and build their proficiency
- Make your motion language flexible enough for all relevant hardware
- Use the recommended motion pattern for your situation
To support a consistent user experience across all apps, Android Auto provides recommendations for specific motion patterns to use in the following situations:
- Switching between apps
- Switching between same-level views
- Extending an existing action
- Minimizing and expanding an action
- Disrupting an action
All of the motion patterns in this section are based on standard easing, as discussed in the Material Design Easing guidelines. That is, the motions speed up quickly and slow down more gradually, to draw focus to the end of the transition.
Switching between apps
When switching between apps, use a crossfade motion. This motion supports the user’s desire to exit completely from the current app and move quickly to the next one, with minimal distraction.
Switching between same-level views
When switching between views at the same level of hierarchy in an app, such as tabs in the app bar or songs in a playlist, use a side-to-side motion. The horizontal movement reinforces the idea of staying at the same level within the app.
Extending an existing action
When a user is in an action and takes a related action, use a vertical (up or down) motion to introduce the secondary action on a full-screen overlay, with a scrim background, on top of the primary action. Being able to see the primary action through the scrim reinforces that the user is still in that action.
When closing the secondary action, use the reverse of this motion. The reverse motion should take less time than the original motion, since the user is done with the secondary action and is ready to exit.
Minimizing and expanding an action
When expanding an ongoing action that has been minimized into a smaller onscreen format to allow multitasking, use an expanding window mask with a full-screen fade-in.
When minimizing an ongoing action, use the reverse of this motion. The minimizing motion should take less time than the expanding motion, since the user is essentially leaving this action and is ready to get it out of the way.
Disrupting an action
When a short, non-blocking action needs to appear suddenly on top of an ongoing action, slide it down or up from the edge of the screen (with a partial scrim) or fade it into the middle (with a full scrim). Start the motion from the location closest to where you want the new action to appear.