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?

Ib

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.

Parochial

Is it possible to set elevation without shadow ? @Parochial – Calve