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.

Provide a `LinearLayout` with horizontal orientation to each `ImageView` — Anshul Tyagi, May 07 '15 at 03:41
For z-index you can set margin from top in negative form like `marginTop="-20dp"` — Anshul Tyagi, May 07 '15 at 04:11
That is what I am currently doing. The margin top/bottom I define are negative values. — Nicolás Arias, May 07 '15 at 04:12

score 8 · Answer 1 · answered Nov 26 '15 at 18:15

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);

score 2 · Answer 2 · edited May 23 '17 at 12:01

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

edited May 23 '17 at 12:01

Community

1
1

answered May 07 '15 at 04:14

Tony Vu

4,251
3
31
38

score 2 · Answer 3 · answered May 07 '15 at 04:49

For achieving this kind of layout FrameLayout would be your best bet.

This layout is generally used for z-Index based structure(overlapping). Take a look about this class here :- FrameLayout .

And here is one link which shows its use :- Example Given.

You can find other links too demonstrating its use.

Hope it helps,

Thanks.

Setting "z-index" on LinearLayout on android

3 Answers3