Shared Elements Transition is Different in Activity vs Fragment

Question

I wrote a gallery app called Pholder. It has a typical behaviour that when you click on a thumbnail in GalleryActivity, it will show up enlarged in SlideshowActivity, using ChangeBounds, ChangeImageTransform and ChangeClipBounds. Gif here. This is triggered via

val option = ActivityOptionsCompat.makeSceneTransitionAnimation(this, *pair.toTypedArray())
ActivityCompat.startActivityForResult(this, intent, REQUEST_SLIDESHOW_ACTIVITY, option.toBundle())

And the sharedElementEnterTransition is set in SlideshowActivity via inflated xml of

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
android:transitionOrdering="together">
    <changeBounds android:interpolator="@android:interpolator/fast_out_slow_in" />
    <changeImageTransform android:interpolator="@android:interpolator/fast_out_slow_in" />
    <changeClipBounds />
</transitionSet>

With android moving towards navigation (single activity multiple fragment), I thought that it might be good to use a SlideshowFragment instead. Applying the exact same transitions, I get this effect instead, where the pivot of expansion is not from the center itself, but from the top left. Gif here. This is triggered via

imageView.setOnClickListener {
    activity!!.supportFragmentManager.beginTransaction()
            .setReorderingAllowed(true)
            .addSharedElement(imageView, "transitionName")
            .replace(R.id.container, SlideshowFragment())
            .addToBackStack("SlideshowFragment")
            .commit()
}

In both cases, the thumbnail has defined xml android:scaleType="centerCrop" while slideshow has xml android:scaleType="fitCenter". Also, they have the same GlideApp code.

GlideApp.with(activity!!)
        .load(filePath)
        .listener(object : RequestListener<Drawable> {
            override fun onLoadFailed(
                    e: GlideException?, model: Any?,
                    target: Target<Drawable>?, isFirstResource: Boolean): Boolean {
                startPostponedEnterTransition()
                return false
            }

            override fun onResourceReady(
                    resource: Drawable?, model: Any?,
                    target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean {
                startPostponedEnterTransition()
                return true
            }
        })
        .into(imageView)

I know how to use shared elements, so I think it is just a matter of animator not implemented correctly? Target API 21 and above. I am eager to learn about the reason behind this!! Thank you.

Note:

In my test for fragments, it is straightforward.

Activity --> ThumbnailFragment --> ImageView
Activity --> SlideshowFragment (replaces ThumbnailFragment) --> ImageView

In the original activity, the structure is more complex.

GalleryActivity --> ViewPager --> TabFragment --> GalleryFragment --> RecyclerView --> ImageView
(file path will go one level deeper by replacing GalleryFragment when a folder is clicked)

SlideshowActivity --> ViewPager --> SlideshowFragment --> ImageView

Shared Elements Transition is Different in Activity vs Fragment

0 Answers0