Shared element transitions go over the navigation bar

Question

I am attempting to animate between two screens using a shared element transition. Below is what seems like the relevant sections of my code (probably more that isn't relevant too) but I've cut out some of it to save space.

activity_main.xml:

<android.support.v4.widget.DrawerLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout ... >
            ...
        </android.support.design.widget.AppBarLayout>

        <fragment 
            android:id="@+id/fragment"
            android:name=".MainFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            tools:layout="@layout/fragment_main" />

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView ... />

</android.support.v4.widget.DrawerLayout>

fragment_main.xml:

<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="8dp"
    android:scrollbars="vertical"
    tools:context=".MainFragment"
    tools:showIn="@layout/activity_main" />

Each item in the RecyclerView contains a CardView as the root view:

card_item.xml:

<android.support.v7.widget.CardView  
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.gms.maps.MapView 
            android:id="@+id/map"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            map:liteMode="true" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/map"
            android:transitionName="@string/transition_title" />

        <TextView
            android:id="@+id/subtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/job_title"
            android:transitionName="@string/transition_rate" />

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/job_rate"
            android:transitionName="@string/transition_description" />

    </RelativeLayout>

</android.support.v7.widget.CardView>

In the RecyclerView's ViewHolder, I set the onClickListener:

mCardView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent = new Intent(mContext, SecondActivity.class);

        View title = mCardView.findViewById(R.id.title);
        View rate = mCardView.findViewById(R.id.rate);
        View description = mCardView.findViewById(R.id.description);

        // Use fancy animations for API 21+
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                mContext.startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(mActivity,
                        Pair.create(title, mContext.getString(R.string.transition_title)),
                        Pair.create(rate, mContext.getString(R.string.transition_rate)),
                        Pair.create(description, mContext.getString(R.string.transition_description))).toBundle()
                );
            } else {
                mContext.startActivity(intent);
            }
        }
    });

The issue is, if I tap on a card for which the TextViews are off the screen somewhat, they animate through/above the navigation bar:

How can I prevent this from happening, so that the TextViews animate 'under' the navigation bar?

Answer 1

You can add navigationBar as shared element, too

View navigationBar = mContext.findViewById(android.R.id.navigationBarBackground);

And create pair with Window.NAVIGATION_BAR_BACKGROUND_TRANSITION_NAME,

Pair.create(navigationBar, Window.NAVIGATION_BAR_BACKGROUND_TRANSITION_NAME)