Android FrameLayout z-index issue when child is elevated

Question

I have following Android XML layout file:

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/AutoComplete_marginSides"
        android:layout_marginRight="@dimen/AutoComplete_marginSides"
        android:layout_marginTop="@dimen/AutoComplete_marginTopBottom"
        android:layout_marginBottom="@dimen/AutoComplete_marginTopBottom"
        android:layout_marginLeft="@dimen/AutoComplete_marginSides"
        android:layout_marginStart="@dimen/AutoComplete_marginSides"
        android:id="@+id/autoCompleteLayout" >

        <MyPackage.maps.DelayAutoCompleteTextView
            android:id="@+id/geoAutoComplete"
            android:layout_margin="@dimen/AutoCompleteTextView_layoutMargin"
            android:layout_width="match_parent"
            android:layout_height="@dimen/AutoCompleteTextView_height"
            android:layout_gravity="center"
            android:gravity="start|center_vertical"
            android:inputType="textCapSentences"
            android:background="@color/white"
            android:paddingLeft="@dimen/AutoCompleteTextView_padding"
            android:paddingRight="@dimen/AutoCompleteTextView_padding"
            android:dropDownWidth="fill_parent"
            android:textSize="@dimen/AutoCompleteTextView_fontSize"
            android:hint="@string/search_map"
            android:elevation="2dp"
            android:singleLine="true"
            android:maxLength="30"/>

        <ImageView
            android:id="@+id/geoAutoCompleteClear"
            android:layout_gravity="center_vertical|end"
            android:contentDescription="@string/search_map_clear"
            android:layout_marginEnd="@dimen/AutoCompleteTextView_clearIconMargins"
            android:layout_marginRight="@dimen/AutoCompleteTextView_clearIconMargins"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_clear"/>

    </FrameLayout>

The FrameLayout layout is inside of RelativeLayout (I did not show that above). This FrameLayout is just text view with a cross at the end to remove text.

The problem is that when I add android:elevation to TextView that ImageView goes behind the TextView although it shouldn't because I defined that after TextView itself. As far as I know, child sequence is what determines how components are shown. But when I remove elevation from TextView, that ImageView is shown properly.

Am I missing here something? What is the reason of this?

Answer 1

android:elevation overrides the typical notion of z-indexing in a FrameLayout or RelativeLayout. What you are witnessing is correct behaviour. You can set the elevation of the ImageView to "3dp" and that should give you the expected ordering.