Make replaced fragment visible while transition ongoing

Question

Im using Navigation Architecture Component and i got my shared element transition between two fragments working fine. First fragment contains recyclerview and second one is a "details" of recyclerview item. The problem is that i need to keep first fragment visible while transition in progress.

How do i make transition like that ? Is there any option to achieve this with Navigation Architecture Component ? If no, what i need to use ?

Answer 1

I dont know is it really possible with Navigation. But its really possible with basic FragmentTransaction

 fragmentManager!!
                    .beginTransaction()
                    .setReorderingAllowed(true) // setAllowOptimization before 26.1.0
                    .addSharedElement(view.imageIV, "fragment_news_iv")
                    .addSharedElement(view.title, "fragment_news_title_tv")
                    .addSharedElement(view.date, "fragment_news_date_tv")
                    .addSharedElement(view.container, "fragment_news_scrollView")
                    .addSharedElement(view.description, "fragment_news_description_tv")
                    .addToBackStack(null)
                    .setCustomAnimations(
                        android.R.anim.fade_in,
                        android.R.anim.fade_out,
                        android.R.anim.fade_in,
                        android.R.anim.fade_out
                    )
                    .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE)
                    .add(
                        R.id.main_host_fragment,
                        NewsDetailsFragment(),
                        NewsDetailsFragment::class.java.simpleName
                    ).addToBackStack(null)
                    .hide(this@MainFragment)
                    .commit()

Here is part of code which is doing transaction.

U can set custom animations like fade_in, fade_out with long duration(1000ms)

.setCustomAnimations(
                        android.R.anim.fade_in,
                        android.R.anim.fade_out,
                        android.R.anim.fade_in,
                        android.R.anim.fade_out
                    )

And set sharedEnterTransition in detailsFragment with duration 200

  val trans = TransitionInflater.from(context).inflateTransition(android.R.transition.move)
    trans.apply {
        duration = 200
        enterTransition = trans
    }

    sharedElementEnterTransition = trans

So its obvious that first fragment will still be visible while transaction will be in progress. This is kinda workaround solution, but works)