Android shared element transition: hero view gets drawn in front of other

Question

Please look at this video showing a shared elements activity transition. It's a transition from a list activity to a detail activity.

[Video link no longer works]

As you can see the imageview gets drawn in front of the tabs.

What I would expect is the tabs being drawn in font on the imageview and fading out throughout the transition (so that at the end of the animation they are gone).

The only thing that seems to work is setting windowSharedElementsUseOverlay to true, but that has other ugly effects, so that seems not to be an option.

The most commonly suggested approach is to include the tabs in the transition itself, but the problem is that the tabs are not there in the detail activity so they cannot be shared.

---

Code: I start the detail activity like this:

options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity, pairs);
ActivityCompat.startActivity(activity, subActivity, options.toBundle());

Answer 1

You should try this:

On the exiting activity, call getWindow().setExitTransition(null);

On the entering activity, call getWindow().setEnterTransition(null);

It will prevent the fade out of the exiting activity and the fade in of the entering activity, which removes the apparent blinking effect and make transition smooth.

Answer 2

My calling activity has a both a tablayout and a toolbar within and each time I did the transition, the image would appear on top of both tablayout and toolbar, making the transition look untidy.

I fixed the problem quite elegantly by just adding a "dummy" tablayout and a "dummy" toolbar in my called activity. The "dummy" elements are not visible so it doesn't impact the layout of my called activity but the transition effect will work properly if you add them in.

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar2"
                    android:transitionName="toolbar"
                    android:visibility="gone"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize" />

                <android.support.design.widget.TabLayout
                    android:id="@+id/sliding_tabs"
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:visibility="gone"
                    android:transitionName="tab"
                    ></android.support.design.widget.TabLayout>

I then added the tablayout and the toolbar as a pair in my transition:

        Pair<View, String> p4 = Pair.create(getActivity().findViewById(R.id.sliding_tabs), "tab");
        Pair<View, String> p5 = Pair.create(getActivity().findViewById(R.id.toolbar), "toolbar");
        Bundle options = ActivityOptionsCompat.makeSceneTransitionAnimation(getActivity(), p1, p2, p3, p4, p5).toBundle();

Answer 3

I believe what you may need is to exclude, rather than include, the tab layout from the transition animation.

So in the onCreate of your list activity, include:

Transition fade = new Fade();
fade.excludeTarget(R.id.tab, true); // use appropriate id for you tab
getWindow().setExitTransition(fade);
getWindow().setEnterTransition(fade); // try getWindow().setReenterTransition(fade); instead

Definitely have a look at Alex Lockwood's answer to How do I prevent the status bar and navigation bar from animating during an activity scene animation transition? where he gives a greater and more in-depth but digestible explanation on the topic. You may also want to consider adding/implementing the solution in that post.