Why FrameLayout isn't setting Z order correctly in my layout?

Question

I have the following layout (here is presented much simpler design):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main">
    <FrameLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hey, badge!"
            android:layout_margin="10dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="AAAAA"
            android:layout_margin="10dp"
            android:textSize="12sp"
            android:background="#ff00ff"
            android:padding="10dp"
            android:layout_gravity="top|end"
            />
    </FrameLayout>
</RelativeLayout>

I wish to set TextView with text "AAAA" to act as a badge for Button, i.e. to be placed over the button in its upper right corner, which is not the case.

Instead, when I try this code on HTC One M7 with Lollipop, or on Genymotion Nexus 6 with Lollipop, screen looks something like this:

When I try the same code on Genymotion Nexus 5 with KitKat, everything looks as expected, i.e. first view (button) is shown underneath badge (textview)

Does anyone have any clue what could be wrong here?

Thanks, Deveti

score 7 · Accepted Answer · answered Feb 27 '16 at 12:05

7

The elevation causes this issue. It was introduced in Lollipop and responsible for z-ordering too. Copy your layout to layout-v21 and set android:elevation="0dp" for the button.

answered Feb 27 '16 at 12:05

Tamás Cseh

3,050
1
20
30

1

It worked, thanks! But, I had to add `android:elevation="2dp"` for the TextView either and then badge showed up. Don't know why, interesting. – Draško Feb 27 '16 at 16:33
1

I forgot to say, if you don't want to create multiple layouts, you can set elevation from code with `View.setElevation(float)` on lollipop or `ViewCompat.setElevation(float)` on pre-lollipop. – Tamás Cseh Feb 27 '16 at 20:33

score 1 · Answer 2 · answered Jul 17 '17 at 05:32

I saw this on another thread somewhere but you can put this into your elements :

android:stateListAnimator="@null"

as others said the button elevation in lolipop and up is changed so its covering the other elements.

for example in my button view below i use it and it shows:

<FrameLayout
    android:id="@+id/ib_one_container"

    android:layout_width="38dp"
    android:layout_height="38dp"
    android:layout_marginLeft="5.3dp"
    android:orientation="vertical"
    android:padding="3dp"
    >


    <Button
        android:id="@+id/ib"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:clickable="true"
        android:gravity="center"
        android:stateListAnimator="@null"
        android:textSize="11sp" />


    <com.mobile.pomelo.UI.customViews.CustomDiagonalLineView
        android:id="@+id/diagaonal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible"

        />


</FrameLayout>

score 1 · Answer 3 · answered Feb 04 '20 at 06:13

I had a similar problem with an FrameLayout that I was using as a progress indicator overlay (when my screen is busy loading).

I didn't want to add XML to every other element in my app, so I just added an elevation to to my FrameLayout overlay. Note the clickable attribute which ensures that click events are not passed down to the buttons underneath.

Progress Indicator overlay:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/progress_overlay"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:alpha="0.4"
    android:background="@android:color/black"
    android:animateLayoutChanges="true"
    android:elevation="10dp"
    android:clickable="true"
    android:visibility="gone">

    <ProgressBar
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:indeterminate="true"/>

</FrameLayout>

Including the progress indicator in my other views:

<include layout="@layout/progress_overlay"/>

Original solution from: https://stackoverflow.com/a/29542951/1912127

Why FrameLayout isn't setting Z order correctly in my layout?

3 Answers3