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 .

Plaid is awesome. This may help. https://github.com/nickbutcher/plaid — nshmura, Jul 22 '16 at 15:10
Try this tutorial: http://www.androidhive.info/2013/06/android-working-with-xml-animations/ — Dang Nguyen, Jul 28 '16 at 01:42

score 12 · Accepted Answer · edited Oct 12 '16 at 03:09

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

Neo · Answer 2 · 2016-06-15T07:41:24.843

Create your animation in xml and use following code :

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    overridePendingTransition(animation_in, animation_out);
}

res/anim/in.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">

    <scale
        android:duration="700"
        android:fillBefore="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

res/anim/out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">

    <scale
        android:duration="700"
        android:fillBefore="false"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:toYScale="0.0" />
</set>

The question was what kind of animation it should be to have the same result — Datenshi, Jun 15 '16 at 07:19

score 0 · Answer 3 · answered Jun 13 '16 at 14:35

https://www.youtube.com/watch?v=CPxkoe2MraA

This video explain how to achieve the same result . The main idea is

1) To override custom default animation . Here 0 means no animation is played by default .

overridePendingTransition(0, 0);

2) Translate and scale the second activity image to your GridView image so that it completely overlaps it and then apply the animation to activity's imageview to move its original position and scale .

Also Have a look at Shared Element Activity Transition - https://guides.codepath.com/android/Shared-Element-Activity-Transition

score 0 · Answer 4 · answered Jul 25 '16 at 10:46

1 : find view specs:

int[] location = new int[2];
view.getLocationOnScreen(location);

int viewHeight = view.getHeight();
int viewWidth = view.getWidth();

2 : create a transparent activity and pass top values to new activity

3 : add yourView to new activity and do somthing like this:

LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) yourView.getLayoutParams();
layoutParams.topMargin = location[1];
layoutParams.leftMargin = location[0];
layoutParams.height = viewHeight;
layoutParams.width = viewWidth;
yourView.setLayoutParams(layoutParams);

4 : use an animation like @Neo answer for scaling yourView to fill screen

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

4 Answers4