Shared Content overlapping Bottom Navigation

Question

My MainActivity's got a RecyclerView and a BottomNavigationView. Items in the RecyclerView are CardViews.

When I click an item that's halfway obscured by the BottomNavigationView (- will call it BNV), it "pops" over the BNV, then slides up to become the header in LaunchedActivity.

When backing out of LaunchedActivity, it slides down, over the BNV, then "snaps" back into place:

How can I either:

1. Have the shared content appear to slide from underneath the BNV, or failing that,
2. Have the shared content start off invisible, and fade as it slides to the header

I've tried playing with the elevation of the BNV, I've tried setting sharedElementEnterTransition to Fade(), I've tried specifying excludeTarget with BottomNavigation; I can't seem to make things work how I'd like.

Here's the layout for MainActivity:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <android.support.v7.widget.RecyclerView
            android:id="@+id/rv"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            />
    <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:menu="@menu/navigation"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
           />
</android.support.constraint.ConstraintLayout>

Activity_launched is here:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".LaunchedActivity">

    <android.support.design.widget.AppBarLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

    <include layout="@layout/content_launched"/>

    <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            app:srcCompat="@android:drawable/ic_dialog_email"/>

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

And content_launched:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:showIn="@layout/activity_launched"
        tools:context=".LaunchedActivity">

    <LinearLayout
            android:id="@+id/launched_header"
            android:transitionName="header" android:layout_width="0dp" android:layout_height="wrap_content"
                  app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
                  android:orientation="vertical" app:layout_constraintEnd_toEndOf="parent"
                  android:background="@android:color/holo_blue_bright"
                  android:layout_marginEnd="8dp">
        <TextView
                android:text="TextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:id="@+id/launched_title"/>
        <TextView
                android:text="TextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:id="@+id/launched_text"/>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

Items in the RecyclerView call MainActivity.onItemClicked:

   fun onItemClicked(view: View, item: Item) {
        val intent = Intent(applicationContext, LaunchedActivity::class.java)
        intent.putExtra("ITEM", item)
        val options = ActivityOptions.makeSceneTransitionAnimation(
            this,
            android.util.Pair<View, String>(view, "header")
        )
        startActivity(intent, options.toBundle())
    }

This is the array that's in the recycler:

data class Item(val title: String, val text: String): Serializable

val itemList = listOf(Item("One", "1"), Item("Two", "2"),
        Item("Three", "3"), Item("Four", "4"), Item("Five", "5"))

Lastly, this is from LaunchedActivity.onCreate:

   with(window) {
        requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
        requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
        sharedElementEnterTransition = AutoTransition()
        sharedElementExitTransition = AutoTransition()
    }

LaunchedActivity.onCreate pulls the item out of the intent and sets launched_title and launched_text.

Answer 1

Add in recyclerView's item's CardView

app:cardMaxElevation="8dp"

and give your BNV

app:elevation="16dp" 

give it a try, try with more difference in elevation as clicked cardview has more elevation than actual elevation

Answer 2

Have you heard of clipToPadding it can add padding to the bottom views so it does not obstruct the bottom views.

So try setting clipToPadding = "true" and check if it solves.

Android what does the clipToPadding Attribute do?

Also your layout activity file has <RecyclerView> set to 0dp.

Use a <RelativeLayout> outside and set layout_above="@bnv" in <RecyclerView> somewhat similar to this.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/navigation1"
        android:layout_weight="1">

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


            <com.nxtoff.plzcome.commonutills.BottomNavigationViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />

            <View
                android:layout_width="match_parent"
                android:layout_height="0.5dp"
                android:layout_below="@+id/viewpager"
                android:background="#999999" />

        </RelativeLayout>


    </FrameLayout>


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation1"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:itemBackground="@android:color/white"
        app:itemIconTint="@drawable/nav_item_colors"
        app:itemTextColor="@drawable/nav_item_colors"
        app:menu="@menu/navigation" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/xfb_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_margin="22dp"
        android:layout_marginBottom="30dp"
        android:background="@color/colorloader"
        android:clickable="true"
        android:src="@drawable/plus_fab"
        android:tint="@color/colorviolet"
        app:backgroundTint="@color/colorloader"
        app:elevation="8dp"
        app:fabSize="normal"
         />



</RelativeLayout>

EDIT 1:

Try out this code and let me know.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        android:layout_above="@id/bottomNavigationView"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="8dp"
        />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/navigation"
        android:layout_alignParentBottom="true"
        />
</RelativeLayout>