Elevation above 2dp causes buttons to disappear

Question

In my code below, I have a white view with an elevation of 8dp. The blue button has an elevation of 10dp so in theory it should show. However, it doesn't. It only shows the part in which it is not directly over the white view. I know it's something to with the elevation however I do not know exactly what. I have sussed out that it's fine when the white view is =<2, but as soon as I set it higher, the problem occurs.

Here is my code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/login_background"
            android:background="@color/colorPrimary" />

        <View
            android:id="@+id/view"
            android:layout_width="@dimen/login_container_width"
            android:layout_height="@dimen/login_container_height"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/login_container_margin_top"
            android:background="@drawable/login_container"
            android:elevation="8dp">

        </View>

        <Button
            android:id="@+id/button"
            android:layout_width="190dp"
            android:layout_height="50dp"
            android:layout_marginBottom="52dp"
            android:background="@drawable/login_button"
            android:elevation="10dp"
            android:text="LOGIN"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true" />

    </RelativeLayout>

</LinearLayout>

Answer 1

The following reflects this Stack Overflow question and the accepted answer.

Let's consider what you start off with. I don't have access to all your dimensions, etc. to make the following look exactly like your example but the basis is there. Below is the base layout. You can see that the button lies beneath the view even though the view has an elevation of 8dp and the button has an elevation of 10dp.

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimaryDark">

        <View
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="175dp"
            android:layout_alignBottom="@+id/button"
            android:layout_alignParentEnd="true"
            android:layout_alignParentStart="true"
            android:layout_margin="30dp"
            android:background="@android:color/white"
            android:elevation="8dp">

        </View>

        <Button
            android:id="@+id/button"
            android:layout_width="190dp"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="52dp"
            android:background="@mipmap/ic_launcher"
            android:elevation="10dp"
            android:text="LOGIN"
            android:textColor="@color/white"
            android:textSize="20sp" />

    </RelativeLayout>

</LinearLayout>

So, why is this? It is because android:elevation="10dp" in the XML for the button isn't really defining the elevation. Instead, the button's elevation is controlled by a "StateListAnimator" that controls the android:elevation and android:translationZ properties." (See accepted answer to above-referenced question.)

If you don't really care for what the StateListAnimator is doing for your layout, you can simply eliminate it by adding android:stateListAnimator="@null" to the XML for the button. Here is what the layout looks like after adding this code. (Please note that the designer may not show the changes immediately; Android Studio 3.0 Beta 6 didn't). So, you may need to refresh the layout to see the changes.

As you can see, the button is now above the view as we expect.

If you do care what StateListAnimator does for you, you will need to define your own and enter its name instead of @null in the XML statement changed above. The answer I reference above has the StateListAnimator that Android presumably uses, so you can take that as a basis and change the elevation to what you prefer. I haven't tried this, but it should work.