Surface View in round shape on top of other surface view

Viewed 422

My requirement is to show video chat using surface view. And my video view will contain both remote view and local view as well.

I am able to round the shape of local surface view, but when remote video view get inflated then local surface view comes back to original rectangle shape.

I am using outline provide and clipping enabled to make round shape of surface view.

This is the snapshot I want to achieve. Local video surface view on top of other remote video surface view

And this is what I am getting:-

Before remote view get inflated with video: I can get curve shape of local view

After remote view get inflated with video: again local view came back to original shape i.e rectangular

This is my xml code :-

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_video_chat_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="io.agora.tutorials1v1vcall.VideoChatViewActivity">

    <RelativeLayout
        android:id="@+id/remote_video_view_container"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/remoteBackground">


    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/local_frame"
        android:layout_width="@dimen/local_preview_width"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/remote_video_view_container">

        <FrameLayout
            android:id="@+id/local_video_view_container"
            android:layout_width="@dimen/local_preview_width"
            android:layout_height="@dimen/local_preview_height"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginEnd="@dimen/local_preview_margin_right"
            android:layout_marginRight="@dimen/local_preview_margin_right"
            android:background="@color/localBackground"
            android:elevation="10dp">
        </FrameLayout>
    </RelativeLayout>

Here remote surface view will go inside the @+id/remote_video_view_container

and local surface view will go inside the @+id/local_video_view_container with circle in shape.

For more reference, I have taken this sample for 1 to 1 video chat.sample video chat

NOTE:- I can't create the custom surface view as surface view instance I am getting dynamically from 3rd party library.

Any help would be appreciated....

1 Answers
Related