Move multiple elements into one with FragmentTransaction SharedElement

55 Views Asked by At

I'm using Android Jetpack's Navigation component and want to transition several elements into one when transitioning between fragments using FragmentTransaction SharedElement. Example image: transition example

I programmatically create a certain number (this number may vary) of views and add them to a container (LinearLayout) and attach an onClickListener to each view.

When clicked, I assign each view a transactionName and add it to Extras:

 
private fun factorAnalysisOnClick(factorData: FactorData) {
        val extrasBuilder = FragmentNavigator.Extras.Builder()

        binding.factorAnalysisContainer.children.forEach { fav ->
            fav.transitionName = FAV_TRANSITION_NAME
            extrasBuilder.addSharedElement(fav, "factorAnalysisView")
        }

        extrasBuilder.addSharedElement(binding.actionBar, "statisticByFactorActionBar")
        extrasBuilder.addSharedElement(binding.title,"title")
        val extras = extrasBuilder.build()


        findNavController().navigate(
            R.id.action_statistics_to_statistics_by_factor,
            bundleOf(
                Pair(KEY_FACTOR_DATA, factorData)
            ),
            null,
            extras
        )
    }

And I get the error: java.lang.IllegalArgumentException: A shared element with the target name 'factorAnalysisView' has already been added to the transaction. at androidx.fragment.app.FragmentTransaction.addSharedElement(FragmentTransaction.java:679) at androidx.navigation.fragment.FragmentNavigator.navigate(FragmentNavigator.kt:435) at androidx.navigation.fragment.FragmentNavigator.navigate(FragmentNavigator.kt:398) at androidx.navigation.NavController.navigateInternal(NavController.kt:266) at androidx.navigation.NavController.navigate(NavController.kt:1867) at androidx.navigation.NavController.navigate(NavController.kt:1692) at site.pnpl.mira.ui.statistic.fragments.StatisticsFragment.factorAnalysisOnClick(StatisticsFragment.kt:171)

I understand what he means, perhaps there is some way to implement this? Or maybe there are other ways to achieve the effect of a “stacked” view at the moment of transition?

0

There are 0 best solutions below