How to implement scale up animation on shared element on activity transition

Question

I wish to implement scale up animation on shared elements on activity transitions just like in this link .

But couldn't find any good reference for this specific effect and how to implement it. Is this a custom transition or a default ? Maybe anyone could help or post more detailed tutorial on this rather than official documentation .

Answer 1

Let me give you a short tutorial right here :)

What you actually want is a Shared element transition between two activities. You'll not actually share any views, both activities will have independent view trees. But we'll pass the info about the shared element such as its view and its size to the new activity.

While launching, the new activity will make all its views transparent and locates the shared view. It alters its attributes to match those passed in from the launching activity and makes that single view visible. It then runs animations to transition the shared view from this state to its natural position in the layout. As the transition progresses, the window background and the rest of the non-shared elements slowly fade in until they're totally opaque. All of this is done automatically.

Now to mark a view as shared set this property:

<ImageView
...
android:transitionName="@string/transition_photo" />

in both the activity layouts.

Now while starting your new activity from old activity define a transition animation:

 Bundle bundle = ActivityOptions.makeSceneTransitionAnimation(
                                  this, 
                                  sharedView,
                                  sharedView.getTransitionName())
                                 .toBundle();
startActivity(intent,bundle);

You can also specify multiple views for transition. You can even transition shared views between different applications.

By default the animation used is move:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeBounds/>
<changeTransform/>
<changeClipBounds/>
<changeImageTransform/>
</transitionSet>

But you can also set your custom animations in styles.xml:

<style name="AppTheme.Details">
    <item name="android:windowSharedElementEnterTransition">@transition/shared_photo</item>
</style>

Here is a working example of shared element transition as shown above: https://github.com/anshchauhan/SharedElementTransition