How to android Z order?

Question

In my app, I want to draw on top of the background image. I have the following xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg2"
>
    <com.myapp.drawings.DrawingSurface
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/drawingSurface"
    />
    <LinearLayout
            android:orientation="horizontal"
            android:background="@drawable/bg2" 
            android:layout_width="match_parent" 
            android:layout_height="match_parent">
        <Button
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="OK"
                android:onClick="onClick"
                android:id="@+id/colorBlueBtn"
        />
        <Button
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="Save"
                android:onClick="onClick"
                android:id="@+id/saveBtn"
        />
    </LinearLayout>
</FrameLayout>

No, the problem is, my drawing is not showing when I try to draw on the drawing surface. The background image and buttons were shown. And once I saved it, the image file generated by my app is shown. I think the problem is the Z order of my layout.

Any ideas? Thanks for any help! :)

Answer 1

Items that appear in xml first will be drawn first. So you surface view is beneath you linear layout.

Answer 2

According to Android Developers' description of FrameLayout

Child views are drawn in a stack, with the most recently added child on top.

So, in your xml, the LinearLayout is drawn the last, and as it have match_parent attributes, it completely hides your drawing surface.

So, try to use a RelativeLayout, and set the LinearLayout attributes to just wrap_content, something like that:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg2"
>
    <com.myapp.drawings.DrawingSurface
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/drawingSurface"
    />
    <LinearLayout
            android:orientation="horizontal"
            android:background="@drawable/bg2" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true">
        <Button
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="OK"
                android:onClick="onClick"
                android:id="@+id/colorBlueBtn"
        />
        <Button
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="Save"
                android:onClick="onClick"
                android:id="@+id/saveBtn"
        />
    </LinearLayout>
</RelativeLayout>

You could also completely left out the LinearLayout, and just set the buttons attributes to stay at the bottom, etc..