How can I use shared element between A Fragment and B fragment's child fragment and vice versa

Question

I have a splash fragment, main fragment that has bottom navigations and bottom_nav_graph. And I need to show transition from Splash to Home Fragment which is the default child fragment of main fragment(it has bottom navigation and Home is the one of the menu).

And the elements are only in Splash Fragment & Home Fragment.

SplashFragment

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie_loading"
    android:layout_width="192dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:lottie_autoPlay="true"
    android:transitionName="@string/splash_lottie"
    app:lottie_fileName="splash.json" />

  val sharedElement = binding.lottieLoading
  val extras = FragmentNavigatorExtras(sharedElement to sharedElement.transitionName)
  findNavController().navigateSafe(R.id.mainContainerFragment, navExtras = extras)

MainFragment

// do nothing

or I've tried with

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

HomeFragment

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/iv_top_logo"
    android:layout_width="110dp"
    android:layout_height="33dp"
    android:layout_marginTop="40dp"
    android:scaleType="centerCrop"
    android:scaleX="1.4"
    android:scaleY="1.4"
    android:transitionName="@string/splash_lottie"
    app:layout_constraintStart_toStartOf="@id/actv_top_label_title"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/logo_white"
    app:tint="@color/primary" />

and also I've tried with

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

This is LottieAnimationView to ImageView. I guess different type doesn't matter. But the transitionName matters.

Anyway, this doesn't work. Is there I am missing?

And also, I need to do similar transition between Home fragment to UserDetail fragment which is from parent's nav_graph that is the same level of Main feragment.

How can I solve this issue?

Answer 1

SplashFragment:
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie_loading"
    android:layout_width="192dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:lottie_autoPlay="true"
    android:transitionName="@string/splash_lottie"
    app:lottie_fileName="splash.json" />

HomeFragment:
<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/iv_top_logo"
    android:layout_width="110dp"
    android:layout_height="33dp"
    android:layout_marginTop="40dp"
    android:scaleType="centerCrop"
    android:scaleX="1.4"
    android:scaleY="1.4"
    android:transitionName="@string/splash_lottie"
    app:layout_constraintStart_toStartOf="@id/actv_top_label_title"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/logo_white"
    app:tint="@color/primary" />

SplashFragment:
val sharedElement = binding.lottieLoading
val extras = FragmentNavigatorExtras(sharedElement to sharedElement.transitionName)
findNavController().navigateSafe(R.id.action_splash_to_home, navExtras = extras)

Verify that the appropriate actions are defined in your navigation graph (nav_graph.xml) and that the IDs you use to navigate are right.

When adding or removing pieces, make sure you are using the appropriate FragmentTransaction. This should be handled for you by the navigation actions if you are using the Navigation Component.

Unless you want to change the default transition behaviour, you don't need to set sharedElementEnterTransition in HomeFragment or any other fragment.