Android buttons not displaying on top of SurfaceView

Question

So in an Activity I have a SurfaceView which I use as a drawing canvas, and 2 layouts to provide UI function. There is a LinearLayout holding buttons and a RelativeLayout which I use later on (it is GONE from the start and called VISIBLE later).

Now the button row doesn't appear correctly on the screen. The buttons are all washed out, as if they are trapped behind the canvas. I have tried setting the alpha with:

 button.getBackground().setAlpha(255);

I have tried making the SurfaceView transparent as in how to make surfaceview transparent but neither of these have worked.

Interestingly if I set the background of the buttons to #ff000000 (as can be seen in some of the buttons below, been testing a few ideas) then it appears completely black on top of the canvas, although obviously it has now lost its button shape which is not what I want!

Here's the layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/TopLevelView"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<!--  Drawing Surface -->
<stu.test.project.DrawingSurface
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/drawingSurface"/>

<!--  Button Row -->
<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:id="@+id/ButtonRow">
        <!--  START BUTTON -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Start"
            android:visibility="gone"
            android:id="@+id/startDrawingButtonId"/>
        <!--  FINISH BUTTON -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Finish"
            android:visibility="gone"
            android:id="@+id/finishButtonId"/>
        <!--  RESET BUTTON -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ff000000"
            android:text="Restart"
            android:visibility="gone"
            android:id="@+id/resetButtonId"/>
        <!--  HOME BUTTON -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Home"
            android:background="#ff000000"
            android:visibility="gone"
            android:id="@+id/homeButtonId"/>
        <!--  RESTART BUTTON -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Restart"
            android:background="#ff000000"
            android:visibility="gone"
            android:id="@+id/restartButtonId"/>
        <!--  SAVE BUTTON -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Save"
            android:background="#ff000000"
            android:visibility="gone"
            android:id="@+id/saveButtonId"/>
        <!--  STATS BUTTON -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Stats"
            android:visibility="gone"
            android:id="@+id/statsButtonId"/>
        <!--  EMAIL BUTTON -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Send email"
            android:visibility="gone"
            android:background="#ff000000"
            android:id="@+id/emailButtonId"/>
        <!--  LOAD BUTTON -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Load another record"
            android:visibility="gone"
            android:background="#ff000000"
            android:id="@+id/loadButtonId"/>
        <!--  MARKS BUTTON -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Add marks"
            android:visibility="gone"
            android:id="@+id/marksButtonId"/>       
</LinearLayout>

<!--  Here is the Marking Scheme Layout -->
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    android:background="@drawable/marks_background"
    android:id="@+id/marksRelativeLayout">
    <!--  Element Title -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:id="@+id/markTitle"
        android:padding="10dp"/>
    <!--  Instructions -->
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Enter the score"
         android:id="@+id/markDescription"
         android:padding="10dp"
         android:layout_centerHorizontal="true"
         android:layout_below="@id/markTitle"/>
     <!--  Previous Button -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Previous"
        android:id="@+id/previousMarkButton"
        android:layout_below="@id/markDescription"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="10dp"/>
    <!--  Marking Scheme -->
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        android:layout_below="@id/markDescription"
        android:layout_toRightOf="@id/previousMarkButton"
        android:id="@+id/marksRadioGroup">
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:id="@+id/radioButton0"/>
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:id="@+id/radioButton1"/>
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:id="@+id/radioButton2"/>
    </RadioGroup>
    <!-- Next Button -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Next"
        android:id="@+id/nextMarkButton"
        android:layout_below="@id/markDescription"
        android:layout_marginRight="10dp"
        android:layout_toRightOf="@id/marksRadioGroup"/>
    <!--  Done Button -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Done"
        android:id="@+id/doneMarkButton"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:layout_below="@id/marksRadioGroup"/>
</RelativeLayout>

</FrameLayout>

Here's an image:

Answer 1

SurfaceView.setZOrderOnTop(false);hope this can help you

Answer 2

Your problem has to do with the default image used in the Holo theme on Android 3.0+; take a look at this link, which is the actual 9-patch used in that theme for a default button. Notice how the PNG itself is partially transparent? That means it will partially show through it's background no matter what color you put underneath it. It was designed to be used over the top of the dark backgrounds present in that theme.

All the buttons in the Holo theme are partially transparent, even those in Holo.Light, so you will get this effect with any default button background. Because the transparency is in the background image, setting the alpha of the Drawable won't have any effect. As you've already discovered, you can set the button background to something solid and this is no longer an issue.

If you want a solid button that still maintains the Holo look, I would suggest pulling the PNG images from the linked source I gave and modifying the 9-patches to have a fully solid color underlay.

HTH

Answer 3

If you want the "Button Row" on top of the layout simply add at the LinearLayout:

android:layout_gravity="bottom"

For default the views added to FrameLayout stacks.

Seeing your layout I noticed too that all the buttons has the visibility to GONE. To chech if the row is on top of the surfaceView add a background to the Button row LinearLayout.