Android gridview expand element animation

Question

There is a gridview with some elements. When a user presses on an item I open new fragment with details of that item. I would like to animate that transition to look like the element that was pressed expanded to fill whole screen.

Hos such an effect is done?

PS. I've seen something similar in YPlan android app. Here is a video of the effect: http://youtu.be/oGd7wHs6GuA When you tap on an element, the image stays while everything underneath changes and then in animates to its place at the top of the screen. It's not exactly what I want, but I think implementation should be similar.

Answer 1

That's called Shared Element Activity Transition.

Note that the shared element transitions require Android 5.0 (API level 21) and above. You need to do is to provide a transition name that both Activites can use to create a transition animation with. To use the shared transition name you need to provide the start intent with a option Bundle like this:

Intent intent = new Intent(this, DetailsActivity.class);
// Pass data object in the bundle and populate details activity.
intent.putExtra(DetailsActivity.EXTRA_CONTACT, contact);
ActivityOptionsCompat options = ActivityOptionsCompat.
    makeSceneTransitionAnimation(this, (View)ivProfile, "profile");
startActivity(intent, options.toBundle());

Here is step by step tutorial given for the same - https://github.com/codepath/android_guides/wiki/Shared-Element-Activity-Transition and for Fragments here at https://medium.com/@bherbst/fragment-transitions-with-shared-elements-7c7d71d31cbb

Answer 2

Start new Activity and give overridePendingTransition(R.anim.zoom_enter, R.anim.zoom_exit); where zoom_enter.xml has

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">
<scale android:fromXScale="2.0" android:toXScale="1.0"
       android:fromYScale="2.0" android:toYScale="1.0"
       android:pivotX="50%p" android:pivotY="50%p"
       android:duration="@android:integer/config_mediumAnimTime" />
</set>

and zoom_exit has

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:zAdjustment="top">
<scale android:fromXScale="1.0" android:toXScale="2.0"
       android:fromYScale="1.0" android:toYScale="2.0"
       android:pivotX="50%p" android:pivotY="50%p"
       android:duration="@android:integer/config_mediumAnimTime" />
<alpha android:fromAlpha="1.0" android:toAlpha="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

keep both of these file in /res/anim/ folder.