Wrong render order for button when material theme is applied

Question

Button widget draws on top of any other widget no matter what the layout structure is. It repeats in both RelativeLayout and FrameLayout when Material Dark/Light theme is applied. Check out the screenshots below for better illustration of this strange behaviour.

Checked on Nexus 4 and Nexus 5. However I doubt it is related to devices.

Answer 1

From Lollipop (API 21) onwards, Android applies elevation / Z animation to buttons by default. To avoid this, add the following to your Button XML:

<Button
    ...
    android:stateListAnimator="@null"
/>

This will make the button respect its Z-index.

Source

Answer 2

Android 5.0 Lollipop along with Material Design introduced new property to specify the elevation (Z-index) of widgets. It is described here.

To draw the view over the button you can add android:elevation="1dp" to the View

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Don't look so deep"
    />
<View
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#C00"
    android:elevation="1dp"
    />

---

Following is part of earlier answer to misunderstood question, kept for future reference

With RelativeLayout you have to specify the position of elements relative to other elements.

So say you want to have the View below the button, you'll have to add id's to the elements and specify that the view is below the button:

<Button
    android:id="+id/myactivity_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Don't look so deep"
    />
<View
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#C00"
    android:layout_below="@id/myactivity_button"
    />

Check out the Android Developer Guide for RelativeLayout and the available LayoutParameters for RelativeLayouts

---

FrameLayout is usually not good for organize multiple components. The FrameLayout is designed to block out an area on the screen to display a single item. The position of the FrameLayout childs can be controlled by using the android:layout_gravity attribute.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:text="Don't look so deep"
    />
<View
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#C00"
    android:layout_gravity="bottom"
    />

Check out the Android docs for FrameLayout and the available parameters for the layout_gravity