Shared elements animating between fragments

10.3k views Asked by At

I'm trying to animate 2 simple Views from a selected item in a RecyclerView to a new fragment. I've looked at a lot of examples of animating shared elements from one Activity to another Activity, but very few examples of animating a shared element from one Fragment to another Fragment within the same Activity. It almost works.

Here is my structure.

Activity

-- Full screen Fragment1 with RecyclerView

-- Full screen Fragment2 with details

When the user selects an item in the RecyclerView in Fragment1, I replace Fragment1 with Fragment2 that has a View with the shared elements in it in different positions and sizes.

There's a bit of a trick to get it to work, you have to make sure your transitionName is unique for each item in your list, and of course that transitionName must match the transitionName of the element in Fragment2 for the animation to play. I have this part working, when I select an item, the 2 shared Views do animate, just not exactly how you would expect when doing it between 2 Activities.

If I select an item near the bottom of the screen, it draws the View for Fragment2 and animates the 2 shared Views as if they were in the item at the top of the screen. Hard to explain. Here are some pictures

Fragment1 Select item near bottom of list

Fragment2 I would expect the blue line to animate from the bottom to the top, but it starts at the top and only grows horizontaly, the yellow line I would expect to stay near the bottom but grow horizontally, but it starts at the top of the screen and animates down

In both fragments I'm setting the following

        setSharedElementEnterTransition(new ChangeBounds());
        setSharedElementReturnTransition(new ChangeBounds());
        setAllowEnterTransitionOverlap(true);
        setAllowReturnTransitionOverlap(true);

Also in their parent Activity in onCreate() I've set

        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

Any idea why my shared element animations are starting at the top of my screen even when the they were starting in the selected item at the bottom of my screen?

1

There are 1 answers

4
brockoli On BEST ANSWER

Finally solved this problem! As it turns out because the view I'm sharing between 2 fragments is a child of another view (RelativeLayout) in the 2nd fragment, you need to add the ChangeTransform transition to your TransitionSet. Apparently ChangeTransform tells the system to remember the views original position in the 1st fragment before animating to the new position in the 2nd fragment. Here is my updated transitionSet. I'll also clean up my test project code a bit and make a final push to bitbucket in case it will help others after me. Thanks for all the help with this one Alex and thank you to @George-mount for answering someones similar question that dropped the hint to me for this solution.

<?xml version="1.0" encoding="utf-8"?>

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

https://bitbucket.org/brockoli/fragmentsharedelements