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.

enter image description here

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.

I haven't. But there is a possibility to do it on Android 5.0. Unfortunately not backwards compatible. — Jaroslav, Apr 16 '15 at 07:42
@Jaroslav Were you able to do it ? i am trying to achieve something like Yplan app. — Goofy, Apr 17 '15 at 14:07
@Jaroslav is this possible for android 5.+ ? Have some url to reference for examples? — ghita, May 14 '17 at 12:20

score 2 · Answer 1 · answered Sep 30 '14 at 12:03

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.

1. I need it for a fragment. 2. As far as I can see, you animation will start 2x size and shrink down to its normal size? — Jaroslav, Sep 30 '14 at 12:52
check this http://stackoverflow.com/questions/4932462/animate-the-transition-between-fragments — Pr38y, Sep 30 '14 at 13:46

score 2 · Accepted Answer · answered Jan 04 '19 at 11:42

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

score 0 · Answer 3 · answered May 14 '17 at 13:00

0

I am thinking of animating only the grid (zoom in and fade out, same time), and when the grid is full screen, tren replace fragment with a fade in new fragment animation.

answered May 14 '17 at 13:00

ghita

2,746
7
30
54

Looks like a viable solution, let me know when you'll try it – Jaroslav May 15 '17 at 13:11

Android gridview expand element animation

3 Answers3