Enter transition on a fragment with a shared element targets the shared element

Question

I am using the new Lollipop api to setEnterTransition on a fragment and then add a shared element transition for an image in the fragment. The desired behavior is first, the image should move to its position, after which the rest of the views in the fragment should fade in.

However, the enterTransition is being applied to the shared element so it is fading in with the rest of the views. If I don't set the enterTransition, then the image moves properly but it while it is moving the other content is already visible.

How do I get it to not apply the enterTransition to the shared view?

I found this commit in the AOSP that seems like it should address this issue, but it doesn't seem to be working.

Here is sample code:

public class Fragment1 extends Fragment {

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
                           Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.main_fragment, container, false);
    final ImageView imageView = (ImageView) rootView.findViewById(R.id.image);
    final Button button = (Button) rootView.findViewById(R.id.button);

    button.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        TransitionSet transitionSet = new TransitionSet();
        transitionSet.addTransition(new ChangeImageTransform());
        transitionSet.addTransition(new ChangeBounds());
        transitionSet.setDuration(300);

        Fragment fragment2 = new Fragment2();
        fragment2.setSharedElementEnterTransition(transitionSet);
        fragment2.setSharedElementReturnTransition(transitionSet);
        Fade fade = new Fade();
        fade.setStartDelay(300);
        fragment2.setEnterTransition(fade);

        getFragmentManager().beginTransaction()
            .replace(R.id.container, fragment2)
            .addSharedElement(imageView, "SharedImage")
            .commit();
      }
    });
    return rootView;
  }
}

Solution

The enter transition should not apply the the shared element views. The most likely scenario is that your shared element is within another view with a background, making that view affected by the enter transition. That's a situation like this:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#FFF"
    >
    <ImageView android:src="@drawable/pretty_picture"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:transitionName="picture"
        android:padding="20dp"/>
</FrameLayout>

Here, the ImageView is the shared element.

If that happens, you'll want to add a magic transition: ChangeTransform. If it detects that the parent changes, it will pull out the shared element from the parent and transition it separately.

Comments

[brockoli]

George, I could kiss you! This fixes my issue with my views always starting their animation from the top of the screen in 2nd fragment instead of starting from where they were positioned in the 1st fragment. Here's a link to my question (this a ton of comments) thank you! stackoverflow.com/questions/26950801/…

[Alex Lockwood]

George, is this how ChangeTransform was initially intended to be used? Or does its specific implementation just happen to cover this case? It seems almost arbitrary that using ChangeTransform would magically fix things. Is there a reason why ChangeBounds, ChangeImageTransform, etc. are not also implemented to cover this case?

[George Mount]

Yes. Transitions typically animate a small set of properties so that Transitions may be combined as desired. We needed to handle the case where parent and child transition separately. Since this requires the same properties to be animated, we had to merge the seemingly different Transitions.

[Aadithya]

@GeorgeMount Could you please elaborate a little more on the answer? Should the change transform be applied to the shared element or its parent?

[Nhat Pham]

@GeorgeMount I have the ImageView which is the shared element, I don't have wrapped frame layout as above and using ChangeTransform also. Everything is playing nicely. My issue is I'm trying to set my ImageView to GONE in onTransitionEnd but it's not working, I try to debug and see visibility flag still VISIBLE. So I'm trying to put my ImageView inside FrameLayout as above and toggle visibility changes on the FrameLayout and it's working. Any ideas why it's working ? Thanks