android add view over surfaceView

Question

i just want to make an video call layout and i faced this problem i want to add some of imageView and button over surfaceView for swithc camera , mute , end call and some information and this is my xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
    >


<org.webrtc.SurfaceViewRenderer
    android:id="@+id/preview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">



<LinearLayout
    android:id="@+id/rind"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
      <!-- here my ImageView and button -->

     </LinearLayout>



</RelativeLayout>

SurfaceViewRenderer its extend surfaceView

now when i run this i cant see my camera in surfaceView and i add red background for my SurfaceViewRenderer and its appear without my camera display i just search and i found mySurfaceView.setZOrderOnTop(true); i add its and now its show the display of camera but i can't see my view (mute, end call ...)

also i try

   mySurfaceView.setZOrderMediaOverlay(true);

   mySurfaceView.getHolder().setFormat(PixelFormat.TRANSPARENT);

no effect

i just want to make layout like this

before i use surfaceView i tried glsurfaceview but its same and i read i can't do it (add view over glsurfaceview) in glsurfaceview

Answer 1

Try this hope this will help you:

<?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">

<FrameLayout
    android:clipChildren="false"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<!--local view-->
<com.example.gwl.apprtc.PercentFrameLayout
    android:id="@+id/local_video_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<org.webrtc.SurfaceViewRenderer
        android:id="@+id/local_video_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
<!--remote View -->
</com.example.gwl.apprtc.PercentFrameLayout>
<com.example.gwl.apprtc.PercentFrameLayout
    android:id="@+id/remote_video_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<org.webrtc.SurfaceViewRenderer
        android:id="@+id/remote_video_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</com.example.gwl.apprtc.PercentFrameLayout>
<!---->
</FrameLayout>
<FrameLayout
    android:id="@+id/buttons_call_container"
    android:orientation="horizontal"
    android:layout_marginBottom="@dimen/marginBottom_32dp"
    android:layout_gravity="bottom|center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

<ImageButton
            android:id="@+id/button_call_disconnect"
            android:background="@drawable/disconnect"
            android:contentDescription="@string/disconnect_call"
            android:layout_width="@dimen/layoutWidth_48dp"
            android:layout_height="@dimen/layoutHeight_48dp"/>

<ImageButton
            android:id="@+id/button_call_toggle_mic"
            android:background="@android:drawable/ic_btn_speak_now"
            android:contentDescription="@string/toggle_mic"
            android:layout_marginRight="@dimen/marginRight_10dp"
            android:layout_width="@dimen/layoutWidth_48dp"
            android:layout_height="@dimen/layoutHeight_48dp"/>

<ImageButton
            android:id="@+id/button_call_switch_camera"
            android:background="@android:drawable/ic_menu_camera"
            android:layout_marginEnd="8dp"
            android:layout_width="48dp"
            android:layout_height="48dp"/>


</LinearLayout>

</FrameLayout>

</FrameLayout>

Answer 2

Try this hope this will help you

and set for the top serface setZOrderMediaOverlay(true) and setZOrderMediaOverlay(false) for the next one

 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.discuss.app.call.CallScreen" android:id="@+id/backgroundImage" android:background="@color/black" android:windowSoftInputMode="stateHidden"> <LinearLayout android:layout_width="wrap_content" android:id="@+id/remoteVideoContainer" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:background="@color/black"> <org.webrtc.SurfaceViewRenderer android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/remoteVideoViewSurface" android:visibility="gone" android:backgroundTint="@color/darkBackgroundColor" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintEnd_toStartOf="parent" app:layout_constraintStart_toEndOf="parent" app:layout_constraintBottom_toTopOf="parent" app:layout_constraintTop_toBottomOf="parent" app:layout_constraintHorizontal_bias="0.284" app:layout_constraintVertical_bias="0.492" android:id="@+id/localVideoContainer" android:elevation="7dp" android:background="@color/black"> <org.webrtc.SurfaceViewRenderer android:layout_width="100dp" android:layout_height="100dp" android:id="@+id/localVideoViewSurface" android:visibility="gone" /> </LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout>