Setting "z-index" on LinearLayout on Android
I place four images in a vertical linear layout. I want them to recoup the same space, so I assign each one android:layout_weight="1"
. I also want them to overlap (this is a design requirement), so I set a negative margin for each view. The last image I add ( @+id/floor_1st
) is the last one to add (what's at the bottom), so it stays in front. However, I want it the other way around: I want the first image in the layout to be in front, then the second, etc. (The last image should be from the back).
I understand that it is RelativeLayout
easier to control the order of the images using , but I don't know how to place the images the way I want using this layout. I've also seen that the method can be used bringToFront()
, but that just doesn't allow the images to overlap.
So, is there a way to arrange the images in the order I want to use LinearLayout
? Or should I use a different layout? In this case, how do you 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>
Thank.
source to share
If you want to reverse the 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;
}
Be sure to include custom order:
setChildrenDrawingOrderEnabled(true);
source to share
For android from level 21 you can use view.setZ () http://developer.android.com/reference/android/view/View.html#Drawing
For Android tier below 21, I suggest using either FrameLayout or RelativeLayout to combine with showToFront () and / or negative padding if margin is needed. For using bringToFront () method see this Z Ordering of RelativeLayout Views in Android
source to share
To achieve this kind of layout, FrameLayout will be your best bet.
This layout is typically used for a z-index (overlap) based structure. Take a look at this class here: FrameLayout .
And here is one link that shows its use: - Example.
You can also find other links demonstrating its use.
Hope it helps,
Thank.
source to share