Sergey Dmitriev Sergey Dmitriev - 2 months ago 17
Android Question

Wrong render order for button when material theme is applied

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.

How it looks in Android Studio

How it looks on my Nexus 4

Answer

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

Comments