Setting "z-index" on LinearLayout on android

Question

I am placing four image views on a vertical linear layout. I want them to ocuppy the same space, so I assign to each an android:layout_weight="1". I also want them to overlap (that is a design requeriment), so I set a negative margin for each view. The last image I add (@+id/floor_1st) is the last to be added (the one at the bottom), so it stays at the front. However, I want it to be the other way around: I want the first image on layout to be at the front followed by the second and so on (the last image shuld be at the back).

I understand that it is easier to control the order the images are placed using a RelativeLayout, but I do not know how to place the images the way I want using this layout. I have also seen that is possible to use the method bringToFront(), but that just do not let the images to overlap.

So, is there any way to place the images in the order I want using LinearLayout? Or should I use another layout? In this case, how should I place the images?

Here is my xml code

<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/floors_container"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="@dimen/overview_buttons_top_margin"
    android:layout_marginBottom="@dimen/overview_buttons_bottom_margin"
    >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/floor_4th"
        android:src="@drawable/piso_4"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="@dimen/floors_overview_margin_three_quarter"
        android:clickable="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/floor_3rd"
        android:src="@drawable/piso_3"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1"
        android:layout_marginTop="@dimen/floors_overview_margin_quarter"
        android:layout_marginBottom="@dimen/floors_overview_margin_half"
        android:clickable="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/floor_2nd"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/piso_2"
        android:layout_weight="1"
        android:layout_marginTop="@dimen/floors_overview_margin_half"
        android:layout_marginBottom="@dimen/floors_overview_margin_quarter"
        android:clickable="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/floor_1st"
        android:src="@drawable/piso_1"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1"
        android:layout_marginTop="@dimen/floors_overview_margin_three_quarter"
        android:clickable="true" />
</LinearLayout>

Thanks.

Answer 1

If you want to reverse drawing order, you need to subclass the LinearLayout class and override getChildDrawingOrder.

@Override
protected int getChildDrawingOrder(int childCount, int i) {
    //The standard implementation just retuns i
    return childCount - i - 1;
}

Make sure to enable custom ordering somewhere:

setChildrenDrawingOrderEnabled(true);

Answer 2

For Android from Level 21, you can use view.setZ() http://developer.android.com/reference/android/view/View.html#Drawing

For Android level below 21, I suggest to use either FrameLayout or RelativeLayout combine with bringToFront() and/or negative padding, margin if required. For using of bringToFront() method, refer to this Defining Z order of views of RelativeLayout in Android