Navigation Components - Fade in specific content

Question

Using navigation components, I would like apply fade-in effect to FadeInContent during transition, respecting the following order:

1. Text1 -> Text2 transition (Done by applying R.transition.move in sharedElement)
2. FadeInContent fades-in after 1. transition

I had a look to this article that does exactly what I want, but doesn't use navigation components https://medium.com/bynder-tech/how-to-use-material-transitions-in-fragment-transactions-5a62b9d0b26b, therefore I can't apply setStartDelay. I can't also apply NavOptions.Builder().setEnterAnim(R.anim.fade_in) because it applies to all the screen, and not just the FadeInContent.

Answer 1

AFAIK the navigation component can only handle the motion during the transition itself so you are rightly pointing out that there is no way to delay a transition.

Nonetheless, you might want to implement your fade-in animation with a scene transition (https://developer.android.com/training/transitions).

It looks like a cleaner way to handle the situation you are exposing.

Code Solution:

val transition = TransitionInflater.from(activity)
                .inflateTransition(android.R.transition.move)

sharedElementEnterTransition = transition
setEnterSharedElementCallback(object : SharedElementCallback() {
            override fun onMapSharedElements(
                names: MutableList<String>?,
                sharedElements: MutableMap<String, View>?
            ) {
                super.onMapSharedElements(names, sharedElements)
                fadeInContainer.loadAnimation(
                    activity,
                    R.anim.fade_in
                )
              }
        })