Translucent overlay shows different effects on different views

Question

I have an AppBarLayout, LinearLayout and a BottomNavigationView. I want to add a translucent white overlay above all of them but i don't know why i get this slightly grey color above my AppBarLayout and LinearLayout. Is this because of the different elevations the views have? Is it possible to get the same effect it does on my BottomNavigationView on my two other layouts without changing their elevations?

Without Overlay With Overlay

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity"
    android:background="@android:color/white">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:id="@+id/appBar"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/white">

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Title"
                android:textColor="@android:color/black"
                android:textSize="20sp"
                android:layout_centerInParent="true"/>

            <ImageButton
                android:id="@+id/buttonMenu"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/ic_menu"
                android:layout_centerVertical="true"
                android:layout_margin="16dp"/>

        </RelativeLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/appBar"
        app:layout_constraintBottom_toTopOf="@id/bottomNavigation"
        android:id="@+id/linearLayoutContents">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Lorem ipsum"
            android:textSize="32sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_margin="24dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_marginEnd="32dp"
            android:text="@string/content"
            android:textColor="@android:color/darker_gray"
            android:textSize="16sp"/>

    </LinearLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav_menu"
        android:id="@+id/bottomNavigation"
        android:background="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:id="@+id/overlay"
        android:background="#CCFFFFFF"
        android:elevation="8dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Using elevation attribute for sibling views causes views to hide each other based on the z-order you gave them. To overcome this issue I would change my layout hierarchy to a non-flat state which is kind of a dirty approach considering the ConstraintLayout purpose (flat view hierarchy). If you found a better way feel free to share it.

So to do that move your overlay out of its parent and remove the elevation:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".MainActivity"
    android:background="@android:color/white">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        ...

    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/overlay"
        android:background="#CCFFFFFF"/>

</FrameLayout>