Transitions of separated items go through the navigation bar

Question

I am trying to animate between two screens using a transition with a common element. Below is a list of the relevant sections of my code (perhaps this is not so important), but I have reduced some of them 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 element 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 RecyclerView ViewHolder, I set 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 problem is that if I click on a map for which TextViews are at a certain distance from the screen, they are animated above / above the navigation bar:

How can I prevent this from causing TextViews to animate “under” the navigation bar?

Answer 1

navigationBar ,

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

Window.NAVIGATION_BAR_BACKGROUND_TRANSITION_NAME,

Pair.create(navigationBar, Window.NAVIGATION_BAR_BACKGROUND_TRANSITION_NAME)