title: Prevent custom SurfaceView from drawing on top of other views
body: <p>I have created a custom SurfaceView which I use to draw shapes, and the user can zoom and pan the view to interact with the shapes. This all works great, but the problem now is that the shapes will always be drawn on top of <strong>everything</strong> on my screen, also on top of other views such as buttons and textviews. I have tried ordering the custom view and my buttons in different ways in the XML layout, tried parenting the views to FrameLayouts and RelativeLayouts (<a href="https://stackoverflow.com/a/2934759/1928874">as suggested here</a>). </p>
  
  <p>I would like to have buttons and other layout elements floating on top of my custom view. As seen in the image below, when I pan my view the rectangle will obscure the buttons.</p>
  
  <p><strong>How can I prevent my custom SurfaceView from drawing on top of everything?</strong></p>
  
  <p><a href="https://i.stack.imgur.com/7RzzT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7RzzT.png" alt="enter image description here"></a></p>
  
  <p>My drawing code runs in a separate thread in the SurfaceView class:</p>
  
  <pre><code>public class CustomShapeView extends SurfaceView implements Runnable, SurfaceHolder.Callback {
  
  /* Other implementation stuff */
  
  @Override
  public void run() {
      while (isDrawing) {
          if (!holder.getSurface().isValid())
              continue; //wait till it becomes valid  
  
          Canvas canvas = null;
          try {
              canvas = holder.lockCanvas(null);
              synchronized (holder) {
                  try {
                      lock.lock();                                
                      canvas.concat(sampleMatrix);
                      canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
                      drawShapes(canvas);                     
                  } finally {
                      lock.unlock();
                  }
              }
          } catch (Exception e) {
              e.printStackTrace();
          } finally {
              if (canvas != null) {
                  holder.unlockCanvasAndPost(canvas);
              }
          }       
      }
  }
  }
  </code></pre>
  
  <p>My test XML layout, which I would expect to create a button (Left) which is behind the custom view and a button (Right) which is floating above the custom view, is:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent"&gt;
  
  &lt;Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Left"
      android:id="@+id/button"
      android:layout_alignParentBottom="true"
      android:layout_alignParentLeft="true"/&gt;
  
  &lt;FrameLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
      &lt;com.example.CustomShapeView
          android:id="@+id/floor_plan_view"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          /&gt;
  &lt;/FrameLayout&gt;
  
  &lt;RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
      &lt;Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Right"
          android:id="@+id/button2"
          android:layout_alignParentBottom="true"
          android:layout_alignParentRight="true"
          android:layout_alignParentEnd="true"/&gt;
  &lt;/RelativeLayout&gt;   
  &lt;/RelativeLayout&gt;
  </code></pre>