shared element transition works with FragmentTrans

Question

The new Shared Element Transitions works when i use Fragment 'replace' but i can't seem to make it work fragment 'add'. I use the same container in both the cases.

More details:

Activity - layout->

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00ffff"
    android:orientation="vertical" >

</FrameLayout>

On launch of the Activity, I add Fragment1 to the screen

getFragmentManager().beginTransaction().replace(R.id.container,new TransitionTestFragment1(), "TransitionTestFragment1").commit();

On a click event for a view in the layout of Fragment1 -> I add Fragment2 to the screen. I set the listener in the first Fragment's onCreateView

public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
final TransitionSet transitionSet = new TransitionSet();
transitionSet.addTransition(new ChangeImageTransform());
transitionSet.addTransition(new ChangeBounds());
transitionSet.addTransition(new ChangeTransform());
transitionSet.setDuration(300);

View v=inflater.inflate(R.layout.fragment1, null);
final View image=v.findViewById(R.id.image);
image.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {
        setSharedElementReturnTransition(transitionSet);
        Fragment fragment = new TransitionTestFragment2();
        fragment.setSharedElementEnterTransition(transitionSet);

        FragmentTransaction ft = getFragmentManager().beginTransaction()
                .replace(R.id.container, fragment)
                .addToBackStack("transaction")
                .addSharedElement(image, "MyTransition");
        ft.commit();

    }
});
return v;

}

I have this image view in the layouts of both fragments

 <ImageView
        android:layout_width="300dp" 
        android:layout_height="300dp"
        android:src="@drawable/ic_launcher"
        android:transitionName="MyTransition" />

Now, the transition does not work if i use FragmentTransaction.add() to add the second fragment, but it works if i use FragmentTransaction.replace() instead. How can i make it work with add()? Is it possible at all?

Answer 1

I guess it is because the new fragment is placed on top of the old fragment. The old fragment is not being placed out of the controller and onPause (and sequenced methods) aren't being called. It doesn't play any transitions because the old fragment might still be visible to the user (the system doesn't know that).

In my answer (where you commented) I added an enter and exit transition. If you add it, does it even animate? If not, it's probably because of the stated reason.

Answer 2

It will not animate because the old fragment is still present. For adding you need to hide the previous fragment. Here is the example

For pushing:

    fragmentTransaction.add(R.id.content, fragment);
    if (fragments.size() > 0) {
        UIBaseFragment lastElement = fragments.lastElement();
        fragmentTransaction.hide(lastElement);
    }
    fragmentTransaction.addToBackStack(null);
    fragmentTransaction.commit();
    fragments.push(fragment);

Then pop in this way

    final FragmentManager manager = getChildFragmentManager();
    manager.popBackStack();
    fragments.pop();

Answer 3

I know this is an old question but recently i had the same problem: .replace was not an option.

I had to use .Hide and .Add and what worked for me was to set:

setReorderingAllowed(true) 

on the transaction.