3

I've follow the docs to implement shared view transitions with the new Navigation component and it is not working. This is what I have:

Fragment A has this code to call fragment B

val extras = FragmentNavigatorExtras(
                taskNameInput to "taskName")

findNavController().navigate(R.id.action_aFragment_to_BFragment,
            null), // Bundle of args
            null, // NavOptions
            extras)

Taking a look to the layout, the id has the transition name set as follows:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/taskNameInput"
        android:transitionName="taskName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...

Then FragmentB has the following view in the layout:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/taskNameInput"
        android:transitionName="taskName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        ...>

When going from fragmentA to fragmentB, the enter animation is played but not the sharedView transition. Any clue? Thanks

juanmeanwhile
  • 2,594
  • 2
  • 24
  • 26

1 Answers1

4

It is missing to setup the sharedTransition to FragmentB, which can be done in onCrateView() as follows:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
    sharedElementEnterTransition = TransitionInflater.from(context).inflateTransition(R.transition.move)

    return inflater.inflate(com.meanwhile.flatmates.R.layout.fragment_b, container, false)
}

Also you need to create the transaction file move.xml:

<transitionSet>
    <changeBounds/>
    <changeTransform/>
    <changeClipBounds/>
    <changeImageTransform/>
</transitionSet>

At the time of this post it is not written in the docs for the new Navigation Component, but this is just the old way of doing. Since the navigation component is doing some magic for the enter/exit transition, I was expecting to do also some more for shared view ones. In any case, it is not a big deal to add those lines.

juanmeanwhile
  • 2,594
  • 2
  • 24
  • 26
  • do you mean I just should have to add in res.transition.move.xml these lines without additional tags? If so, it works in pretty weird way. Image just slide from right top corner to left bottom. I suppose, transition animation have to work in different way. What I am missing? – Maksim Golendukhin Jun 29 '20 at 03:02
  • That is a common transition, but it really depende on what you want to achieve. You might need to use tags or different kind of transformations, maybe you can even save a few and simplify, – juanmeanwhile Jun 30 '20 at 12:11