Incorrect FrameLayout's childs order on android 5.0 and above

Question

Here is my XML layout code:

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" >

        <Button
            android:id="@+id/btn_test"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@android:color/black"
            android:minHeight="0dp"
            android:minWidth="0dp" />

        <TextView
            android:id="@+id/tv_test"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:background="@android:color/white"
            android:gravity="center"
            android:text="12"
            android:textColor="@android:color/black"
            android:textStyle="bold" />
    </FrameLayout>

As I expected the TextView will overlay on the Button, but it only working on android < 5.0. I research for all API changes about FrameLayout from developer site but still not getting exactly information. Did anyone find that? How to overlay TextView on Button via XML?

@pskink , The result is the `TextView` not overlayed on `Button`. — NamNH, Nov 26 '15 at 11:30
since it was hard to believe that such a change could be introduced on 5+ API i took your layout, tested on 5.0.1 and everything works as expected — pskink, Nov 26 '15 at 11:46
@pskink, well, I have tested this issue on nexus 6 with 5.1, nexus 9 with 6.0 and emulator (gennymotion) with 5.0. all of them got problem. That why I asked here. — NamNH, Nov 26 '15 at 11:56
what do you see in hierarchyviewer? what is the order of child views of your `FrameLayout`? — pskink, Nov 26 '15 at 12:05
The order is : (0) `FrameLayout` (0) `Button` (1) `TextView` — NamNH, Nov 27 '15 at 02:43

score 1 · Answer 1 · answered Nov 26 '15 at 11:20

I couldn't find the correct answer for your question but for current development what I can suggest is the layout you require.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:id="@+id/btn_test"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@android:color/black"
            android:minHeight="0dp"
            android:minWidth="0dp" />
    </LinearLayout>
    <TextView
        android:id="@+id/tv_test"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="12"
        android:textColor="@android:color/black"
        android:textStyle="bold" />
</FrameLayout>

I have change `Button` with other views (`ImageButton, ImageView, FrameLayout....`), the `TextView` is overlayed on it. So, seem it's only not working with `Button`. @@ — NamNH, Nov 26 '15 at 11:28
I tried to read about it in meantime and what I deduced ( In my mind ! ) that button has its other layer (that is being shown when we click it) and that contains its own z-layer. And that layer messes with our frame layout. — Tushar Sheth, Nov 26 '15 at 11:48
Thanks @Tushar Sheth, Maybe you're right, but how about other views such as `ImageButton`, `ImageView`, `View`,...why don't they have your mentioned layer? — NamNH, Nov 26 '15 at 12:00

score 1 · Accepted Answer · answered Nov 27 '15 at 03:10

1

Finally I known the change. That is evelation . Hope this help other. http://developer.android.com/training/material/shadows-clipping.html

answered Nov 27 '15 at 03:10

NamNH

1,752
1
15
37

score 1 · Answer 3 · answered Dec 06 '17 at 21:47

Add stateListAnimator="@null" to your Button XML:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" >

    <Button
        android:id="@+id/btn_test"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@android:color/black"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:stateListAnimator="@null" />

        ...

</FrameLayout>

This will make the Button respect its Z-index and position it under the TextView.

Source

This helped me solve a problem applying a third party `BadgeView` that added itself and a target button into a `FrameLayout`. The button just refused to appear beneath the badge until making the XML change here. — Craig McMahon, Jun 13 '21 at 12:41

score 0 · Answer 4 · answered Nov 27 '15 at 09:16

It's addition to @John answer. You can do something like this:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" >

    <Button
        android:id="@+id/btn_test"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@android:color/black"
        android:minHeight="0dp"
        android:minWidth="0dp" />

    <TextView
        android:id="@+id/tv_test"
        ...
        android:elevation="20dp"
        ... />
</FrameLayout>

And then in code:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        finfViewById(R.id.tv_test).setOutlineProvider(null);
}

Incorrect FrameLayout's childs order on android 5.0 and above

4 Answers4