Incorrect overlay behavior in FrameLayout

According to the docs, child views in FrameLayout are drawn on top of each other with the most recently added view on top. I have notice though, that this seems to not be accurate in Lollipop or later. For example, in the following xml, the button is still visible even though it should be covered by my custom view.

It is worth mentioning that although my custom view extends FrameLayout, I do inflate a child view, so my FrameLayout isn't empty.

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/some_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:text="button"/>

    <mycustomframelayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000"/>

</FrameLayout>

Any idea what I am missing here?


Buttons in Lollipop and higher have a default elevation to them which causes them to always draw on top. You can change this by overriding the default StateListAnimator.

Try putting this into your button XML:

android:stateListAnimator="@null"

The FrameLayout should now cover the button.


Try putting an elevation to the FrameCustom:

<mycustomframelayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000"
        android:elevation="100dp"/>