Material Design parent-child navigational transition recyclerview entry to detail fragment

Question

Background

I am trying to implement the "parent-to-child" navigational transition specifically when you click a Recyclerview entry and the details appear in a fullscreen fragment. Something like this:

Question

How do I go about doing this with so many animation APIs available? (TransitionManager.beginDelayedTransition, SharedTransition, setExitTransition, etc)

What I have tried

• InboxRecyclerView - This matches my requirements EXCEPT that it seems to only work when the detail view is in the same layout as the Recyclerview. Because I am navigating between fragments using the fragment backstack, I need it to transition between layouts that might not be available prior to attachment.

• This post - Answers only cover activity-to-activity transitions. I am looking for fragment-to-fragment.

• Custom Transition - I tried extending the Transition class, but I ran into the problems. CaptureStartValues() seems to capture values from the entire scene. I need it to only capture values from the recyclerview entry. Also, for some reason, the end values are not captured seeing as I get null endValues in the function createAnimator(ViewGroup sceneRoot, TransitionValues startValues, TransitionValues endValues).

  TransitionSet exitTransition = new TransitionSet()
          .addTransition(new ChangeBounds())
          .addTransition(new ChangeTransform())
          .addTransition(new ChangeClipBounds())
          .addTransition(new ChangeImageTransform())
          .addTransition(new Expand())
          .setOrdering(TransitionSet.ORDERING_TOGETHER);
  TransitionSet enterTransition = new TransitionSet()
          .addTransition(new Fade());
  newFragment.setEnterTransition(enterTransition);
  oldFragment.setExitTransition(exitTransition);
  

Scales

Answer 1

You should use shared element transitions here. There will be 2 shared elements: your RecyclerView's item background and TextView (for example). Your RecyclerView's item background should be stretched (you need to use ChangeTransform and ChangeBounds transitions) to your SecondFragment's background, and your TextView should be moved to SecondFragment's title. And you should use animations for your Shared Element transitions: firstly you should elevate item background of your RecyclerView, then you start stretching the background and moving your title, and in the end you should set your elevation back to normal. And note that all this time your first fragment should be visible, so you should set an exit duration to it: fragment1.setExitTransition(new Fade().setDuration(1).setStartDelay(<duration_of_transition>));.

So the main goal here is to use SharedElement transitions. There is a very good article aboud SharedElement fragment to fragment transitions.

Receptive

Thanks. Your advice worked out well for the most part. Unfortunately, when I try to set a custom exitTransition that is not Fade (I'm hoping to dim fragment1 like in the gif), the first fragment no longer becomes visible even if I use setduration and setstartdelay. I guess I'll create another post for that. – Scales