Keep View on top during animation

Question

I am having trouble keeping a view on top during an Activity Transition. The picture at the left of the card is a shared element that expands to cover half of the second activity, and I have a FAB that slides in from the bottom. I have the ImageView of the drink as a shared element transition, and the FAB is a slide transition from the bottom.

During the slide animation of the FAB, it stays below the ImageView, as you can see in the second picture. After it finishes animating, however, it pops up on top of the ImageView, as you can see in the third picture. I have the same problem during the exit transition, where it immediately pops below the ImageView when it starts sliding.

I want the FAB to stay on top of the ImageView throughout the whole process, how do I go about implementing this?

The MainActivity:

The secondary Activity when the FAB is still sliding:

The secondary Activity when the FAB has finished sliding:

XML file of the secondary Activity:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/drinkImage"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:gravity="start"
        android:transitionName="@string/drink_image_transition"
        />

    <TextView
        android:padding="8dp"
        android:id="@+id/drinkName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:translationY="@dimen/detail_drink_name_vertical_offset"
        android:textSize="24sp"
        android:textColor="@color/text_primary"
        android:transitionName="@string/drink_name_transition"
        />

    <ImageButton
        android:id="@+id/fab"
        android:layout_width="@dimen/fab_size_normal"
        android:layout_height="@dimen/fab_size_normal"
        android:layout_margin="@dimen/add_button_margin"
        android:translationX="@dimen/detail_fab_horizontal_offset"
        android:translationY="@dimen/detail_fab_vertical_offset"
        android:background="@drawable/fab_shape"
        android:elevation="@dimen/elevation_low"
        android:src="@drawable/fab_ic_add"
        android:stateListAnimator="@anim/button_elevation"
        android:transitionName="fab_transition"
        />
</RelativeLayout>

The onCreate() method for the secondary activity:

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.details_drink);

    //grab Drink parcel
    Drink d = getIntent().getParcelableExtra("drink");

    //set up image
    ImageView i = (ImageView) findViewById(R.id.drinkImage);
    i.setImageDrawable(this.getResources().getDrawable(d.getImageResourceID(this)));

    //set up text
    TextView t = (TextView) findViewById(R.id.drinkName);
    t.setText(d.name);

    Transition ts = new Slide();

    //don't want status bar and navigation bar to slide across screen
    ts.excludeTarget(android.R.id.statusBarBackground, true);
    ts.excludeTarget(android.R.id.navigationBarBackground, true);
    ts.setDuration(3000);

    getWindow().setEnterTransition(ts);
    getWindow().setExitTransition(ts);

    //This line gets it to work! As Pavel suggested
    //getWindow().setSharedElementsUseOverlay(false);
}

Answer 1

By default Android uses ViewOverlay for Activity Transitions. That's why shared element is drawn on top of everything else.

You can disable this by calling getWindow().setSharedElementsUseOverlay(false); before you start transition. This should tell Android to use original view hierarchy during animation