CODEWITHSUNDEEP
androidgoogle-mapsandroid-animation
An SO User
An SO User

Reputation: 25018

How is the Google Maps layout animated?

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?

Upvotes: 9

Views: 1389

Answers (3)

Vivek Bhardwaj
Vivek Bhardwaj

Reputation: 528

The example that you are talking about is basically Google Places AutoComplete Api.

Please follow the link for the same :

https://developers.google.com/places/android-api/autocomplete

Upvotes: 1

yoah
yoah

Reputation: 7230

This is a single activity that has 2 modes: map mode and input+list mode. You can have a FrameLayout and within have the map root view (visible) and the input root view (gone). When you want to open the list, you make it visible and use ViewAnimation to animate it going up. A better approach is to break these 2 main views into 2 fragments, and animate the fragment.

Upvotes: 1

rekire
rekire

Reputation: 47965

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.

Upvotes: 2

Related Questions