How is the Google Maps layout animated?

Question

I am trying to understand what animation is used in the Google Maps application.

The part I am trying to understand is when you click on the textbox in the toolbar. The layout animates to present a completely new screen with a few items sliding in from the bottom.

How is this done? Is it a bottom sheet becoming visible? Is it a new activity with shared element transitions?

Answer 1

That is called activity transitions. Where you choose which layouts should been moved to a second activity. See also the official documentation about animations: http://developer.android.com/training/material/animations.html#Transitions

Another good point to start it the video talk from the Google Developers: https://www.youtube.com/watch?v=RhiPJByIMrM

Basically you need to modify the style like here:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

You also need to specify a special attribute called android:transitionName to say the system that you want to move that from one activity to a second one.