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());

Do you happen to have an elevation set somewhere in your style ? One of the reason for views to appear above one another is when an elevation is set. — Simon Guerout, May 09 '16 at 19:32
I worked around this issue by scrolling my `RecyclerView` slightly down when the item is clicked, so the view is not obstructed by the `ActionBar`/`Toolbar`, and then performing the transition once that scroll event was finished. Not ideal, but it looks nice and does the job. The complexity was in determining how much to scroll down by, based on how much of the view was obstructed. — Tim Malseed, May 12 '16 at 23:58
@SimonGuerout thanks Simon, tried to remove all animations, no success :-((( — Lisa Anne, May 14 '16 at 09:48

score 2 · Answer 1 · edited May 23 '17 at 11:52

2

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.

edited May 23 '17 at 11:52

Community

1
1

answered May 14 '16 at 13:08

ade.akinyede

2,214
1
13
17

Thanks ade, that does not work. I am not sure I understand your point: you suggest to exclude from the transition of the detail activity the tabs, but they belong to the master activity (and do not exist in the detail activity). – Lisa Anne May 15 '16 at 09:20
The transitions framework caters to 2 types: content transitions and shared element transitions. For your UI, the tab is a non-shared element so what you want/have to control is the exit and reenter of the non-shared elements of your list/master activity i.e. the tab. That's what the code above tries to do. – ade.akinyede May 15 '16 at 13:36

score 1 · Answer 2 · answered May 10 '16 at 11:07

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.

score 1 · Answer 3 · answered Oct 22 '16 at 14:29

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();

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

3 Answers3