How to postpone a Fragment's enter transition in Android Lollipop?

Question

In Android Lollipop, the Activity#postponeEnterTransition() and Activity#startPostponedEnterTransition() methods give the Activity the ability to delay starting the entering and exiting shared element transitions until all data is loaded. These work great for Activity transitions.

Is there a way to achieve the same effect when using Fragment transitions?

Solution 1

There's no direct equivalent in Fragment Transitions because Fragments use FragmentTransaction and we can't really postpone something that is supposed to happen in a transaction.

To get the equivalent, you can add a Fragment and hide it in a transaction, then when the Fragment is ready, remove the old Fragment and show the new Fragment in a transaction.

getFragmentManager().beginTransaction()
    .add(R.id.container, fragment2)
    .hide(fragment2)
    .commit();

Later, when fragment2 is ready:

getFragmentManager().beginTransaction()
    .addSharedElement(sharedElement, "name")
    .remove(fragment1)
    .show(fragment2)
    .commit();

Solution 2

You can postpone Fragment's enter transition by doing the following:

• Allow FragmentTransaction to re-order & optimize the transaction

  requireActivity().supportFragmentManager
    .beginTransaction()
    .replace(R.id.container, fragmentB)
    .addSharedElement(view, "transitionName")
    .setReorderingAllowed(true) // Set to true
    .commit()
  

• Tell fragmentB to delay the transition after view creation

  class TransitionToFragment : Fragment(R.layout.fragment_b) {
  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    postponeEnterTransition() // Don't start enter transitions yet!
  
    ... // Setup your views
  
    (view.parent as? View)?.doOnPreDraw { startPostponedEnterTransition() } // Ok, start transitions
  }
  }
  

  view.parent.doOnPreDraw { ... } is used to ensure the fragment's views are measured and laid out for the transition. See Chris Banes's blog for more details.