Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Shared elements animating between fragments

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?

like image 965
brockoli Avatar asked Nov 15 '14 21:11

brockoli


People also ask

How do you animate fragment transitions?

At a high level, here's how to make a fragment transition with shared elements: Assign a unique transition name to each shared element view. Add shared element views and transition names to the FragmentTransaction . Set a shared element transition animation.

Which of the following transitions is a shared elements transition in Android?

Android also supports these shared elements transitions: changeBounds - Animates the changes in layout bounds of target views. changeClipBounds - Animates the changes in clip bounds of target views. changeTransform - Animates the changes in scale and rotation of target views.

What is shared animation?

Shared Element Transition is one of the most seen animations in Android apps. This type of animation is used when we have to open an item from a ListView or RecyclerView. Shared Element Transition in Android determines how shared element views are animated from activity to activity or fragment to fragment.

How do you animate a fragment?

To animate the transition between fragments, or to animate the process of showing or hiding a fragment you use the Fragment Manager to create a Fragment Transaction . Within each Fragment Transaction you can specify in and out animations that will be used for show and hide respectively (or both when replace is used).


1 Answers

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

like image 139
brockoli Avatar answered Oct 05 '22 14:10

brockoli