Shared element transition not working at all?

Question

This is supposedly a simple thing to achieve but for some reason I can't get it to work. I'm using SDK 30 emulator to test. Basically the new fragment appears but there is zero animation whatsoever. If I add a Fade() transition it works only for the fade transition. I've tried setting sharedElement callback but the methods are called only intermittently. Basically it's a simple image. You click on it and the new fragment appears. Click it again and it's gone.

Layout snippet of activity containing image

<FrameLayout
        android:id="@+id/container_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        >

        <ImageView
            android:id="@+id/image_error"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_baseline_error_24"
            android:transitionName="image"
            android:layout_gravity="center"
            />
    </FrameLayout>

Logic to open image fragment

override fun openImageFragment(imageView: ImageView) {
        val fragment = ImageFragment()
        fragment.image = imageView.drawable
        fragment.arguments = Bundle().also {
            it.putString(ImageFragment.KEY_TRANSITION, imageView.transitionName)
        }

//        fragment.enterTransition = Fade()
//        fragment.exitTransition = Fade()

        supportFragmentManager
            .beginTransaction()
            .setReorderingAllowed(true)
            .addSharedElement(imageView, imageView.transitionName)
            .replace(R.id.container_test, fragment)
            .commitNow()
    }

Image fragment layout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        />

</FrameLayout>

ImageFragment

class ImageFragment : Fragment() {

    private lateinit var binding: FragmentImageBinding
    var image: Drawable?= null

    companion object {
        const val KEY_TRANSITION = "TRANSITION"
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val transition = TransitionInflater.from(requireContext()).inflateTransition(android.R.transition.move)
        sharedElementEnterTransition = transition
        sharedElementReturnTransition = transition
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentImageBinding.inflate(inflater, container, false)
        binding.imageView.transitionName = arguments?.getString(KEY_TRANSITION)
        binding.imageView.setImageDrawable(image)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        view.setOnClickListener {
            requireActivity().supportFragmentManager
                .beginTransaction()
                .remove(this)
                .commit()
        }
    }
}

Answer 1

After much trial and error, I figured out the reason.

My initial fragment was placed statically on the XML, which prevented the fragment manager from replacing it. By using the layout inspector I figured out that the new fragment was placed right below the first one.

Basically the solution is to add the first fragment programmatically so the fragment manager can manipulate it.