SurfaceView on top of SurfaceView

Question

I am building an application using two MjpegView (custom view that extends SurfaceView). The issue is sometimes I don`t see the second camera view as it behind the first camera view. The streaming working without any problems, I tried to change the location of the camera views inside the layout but without any success, also tried bring to front (the second camera).

this is the code for the layout it self,

Thanks

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/visul_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/camera_border"
        android:padding="2dp" >

        <TextView
            android:id="@+id/no_visu_stream"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/measurment_no_stream"
            android:textColor="@android:color/white"
            android:textSize="25sp" />

         <com.example.test.views.MjpegView
            android:id="@+id/sh_surface"
            android:layout_alignParentBottom="true"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:visibility="gone" />

        <com.example.test.views.MjpegView
            android:id="@+id/visul_surface"
            android:layout_width="match_parent"
            android:layout_margin="2dp"
            android:layout_height="500dp"
            android:visibility="gone" />

        <ImageView
            android:id="@+id/cible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@drawable/cible"
            android:visibility="gone" />


        <TextView
            android:id="@+id/no_sh_stream"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerInParent="true"
            android:text="@string/measurment_no_stream"
            android:textColor="@android:color/white"
            android:textSize="14sp" />



    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/eye_left_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="15dp"
        android:padding="10dp" >

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/motor_arrow_selector_left" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/eye_right_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="15dp"
        android:padding="10dp" >

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/motor_arrow_selector_right" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/eye_up_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:padding="10dp" >

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/motor_arrow_selector_up" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/eye_down_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="15dp"
        android:padding="10dp" >

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/motor_arrow_selector_down" />
    </RelativeLayout>


    <ImageView
        android:id="@+id/disable_camera_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/disable_camera_layout"
        android:clickable="true"
        android:visibility="gone" />

</RelativeLayout>

Answer 1

(I'm not sure if this is a simple layout question or an issue with overlapping SurfaceView surfaces; I'm going to treat it as the second.)

SurfaceView surfaces exist on a separate layer, independent of the graphics layer used to render the View hierarchy. The "view" part of the SurfaceView is just a transparent hole that lets you see through the View layer to the Surface(s).

Each Surface layer has a Z-ordering. If two Surfaces try to occupy the same space, one of them will win, and the winner is not entirely deterministic. You can work around this by explicitly setting the Z order of one of the Surfaces. The setZOrderMediaOverlay() call will position the layer above the default surface position, but below the View layer. setZOrderOnTop() will place the surface above the View UI. The call must be made before the surface is created (e.g. in onCreate()).

For an example, see the "multi-surface test" activity in Grafika.