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;
  }
}

Answer 1

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.