How to implement shared element transition with focal element

Question

I want to implement shared element transition in my app, when one activity's recycler view item transforms into another activity like here: https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F15N3n1xwTt0briEbfIvFUG01pMv2d_xaT%2F02-focus-focalelement-do.mp4. (source: https://material.io/design/motion/choreography.html#using-a-focal-element)

Namely, the item is fading out and changes bounds then the new activity fade in. As far as I understand it is simple AutoTransition, but it doesn't work. Simple fading doesn't work as well.

Thus, for now I achieve only that the item gets background of new activity an then changes its bounds.

score 0 · Accepted Answer · answered Dec 04 '18 at 14:17

So, I ended up by adding recycler view item's layout in the resulting activity layout. The data (e.g. the title, etc.) of the clicked item is transferred to the next activity with intent.putExtra(). Shared elements in such case will be of course the item's root view and resulting activity's root view. When activity starts I set the data of the item to matching views in activity via SharedElementCallback, e.g.:

setEnterSharedElementCallback(
                object : SharedElementCallback() {
                    override fun onSharedElementStart(...) {
                       val title = intent.getStringExtra(TITLE)                      
                       activity_item_title.text = title
                       ........
                    }

                    override fun onSharedElementEnd(...) {
                    }
                })

This allows to show exactly the same item view at the beginning of the transition. Then it should start change its bounds, fading out this item's view at the same time. And at some moment (e.g. in the middle of the transition) when the initial view completely fades out, the laouyt of the activity shows up, fading in gradually. To do this we need to hide item's view in the middle of the transition (View.visibility = View.GONE) and make activity views visible. Probably this is not the best way, but I solve this by adding a listener to shared element enter transition and used Handler().postDelayed:

window.sharedElementEnterTransition.addListener(
            object : android.transition.Transition.TransitionListener {
                override fun onTransitionEnd(transition: Transition) {}

                override fun onTransitionResume(transition: Transition) {}

                override fun onTransitionPause(transition: Transition) {}

                override fun onTransitionCancel(transition: Transition) {}

                override fun onTransitionStart(transition: Transition) {  
                        Handler().postDelayed({
                            activity_item.visibility = View.GONE

                            activity_view_1.visibility = View.VISIBLE
                            activity_view_2.visibility = View.VISIBLE
                            .............
                            .............
                            // Also you could e.g. set the background to your activity here, ets.
                            activity_view_root.background = backgroundDrawable 

                        }, 150)  //suppuse that the whole transition length is 300ms
                    }
                }
            })

The transition animations themselves could look as follows:

<transitionSet>
    <targets>
        <target android:targetId="@id/activity_root_view"/>
    </targets>
    <transition
        class="com.organization.app.utils.FadeOutTransition"
        android:duration="150"/>
    <transition
        class="com.organization.app.utils.FadeInTransition"
        android:startDelay="150"/>
    <changeBounds android:duration="300"/>
</transitionSet>

Here, custom FadeOutTransition and FadeInTransition were used since simple android <fade/> animation doesn't work with shared elements. These classes are similar to that given in the answer here: Why Fade transition doesn't work on Shared Element.

The steps for creating return transition are similar.

How to implement shared element transition with focal element

1 Answers1