How to add shared element transition when navigating from recycler view to a fragment while using navigation components and safeArgs?

Question

I want to show shared element transition from my recycler view to a fragment class, I've wriiten the following code:

holder.view.setOnClickListener {
            val extras = FragmentNavigatorExtras(
                holder.view.ivPersonImage to "imageView"
            )
            it.findNavController().navigate(
                HomeFragmentDirections.actionNavHomeToTransactionFragment(
                    customerId,
                    customerName,
                    customerPhoneNumber,
                    imageString
                ), null, null, extras
            )
        }

it's showing error at .navigate as:

 None of the following functions can be called with the arguments supplied: 
private open fun navigate(@NonNull p0: NavDestination, @Nullable p1: Bundle?, @Nullable p2: NavOptions?, @Nullable p3: Navigator.Extras?): Unit defined in androidx.navigation.NavController
public open fun navigate(@IdRes p0: Int, @Nullable p1: Bundle?, @Nullable p2: NavOptions?, @Nullable p3: Navigator.Extras?): Unit defined in androidx.navigation.NavController

in Fragment class, I'm using:

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        sharedElementEnterTransition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)
    }

seems like safeArgs are not allowing to show transition. I'm new to Android and finding it very difficult to understand transitions and animations. Please help me, I'm stuck here for so many days now

score 1 · Answer 1 · answered Apr 01 '21 at 19:44

SafeArgs allows you to set shared transition. Just check navigate() documentation, there is overload with two parameters: NavDirections and Navigator.Extras. So your code should look like this:

holder.view.setOnClickListener {
    val extras = FragmentNavigatorExtras(holder.view.ivPersonImage to "imageView")
    it.findNavController().navigate(
        HomeFragmentDirections.actionNavHomeToTransactionFragment(
            customerId,
            customerName,
            customerPhoneNumber,
            imageString
        ), 
        extras
    )
}

How to add shared element transition when navigating from recycler view to a fragment while using navigation components and safeArgs?

1 Answers1