Motion

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

Motion patterns

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 quickly between apps
The crossfade motion switches the user quickly between apps

Example

App switching example
A swift crossfade takes the user from a navigational app to a media app and back again in Android Auto

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.

Peer transition example
A swift crossfade takes the user from a navigational app to a media app and back again in Android Auto

Example

The side-to-side motion when switching from song to song in a media app in Android Auto reinforces that both songs are in the same playlist

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.

Secondary action overlay
Here, the secondary action rises up from the primary action on an overlay, while the primary action remains partially visible behind the scrim

Example

Android Auto action overlay example
A similar action is used in Android Auto to expand the media control bar on an overlay with a scrim background

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.

Expanding a minimized screen
The minimized action expands to full screen as it fades in on top of the current action

Example

Android Auto floating action button example
In Android Auto, the playback FAB (floating action button) expands into the full playback view then contracts via the down arrow

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.

Short action example
When the disruptive action should appear near the top of the screen, slide it in from the top with a partial scrim

Example

Notification example
In this Android Auto example, a notification about an upcoming turn slides down from the top of the screen with a partial scrim, so that ongoing media content remains visible