QuickBlox WebRtc VideoChat Android

Question

For few days i am working on quickblox.i keep opponent view below my view like this.

It works fine but when i keep views like skype:- Opponent view is on full screen and my view is on top right corner of opponent view it renders only one view which is render at last. I look quickblox webrtc Sample given on quickblox site. i saw the code in that sample but it contains conference talk is given with some complex coding of recycle view for me single one to one talk is required can any one tell me the best way to keep one webrtc view above another which works in perfect manner.Can any one tell me how to put one webrtc above another.

Answer 1

In My Understanding QuickBlox is handling room based Video chatting based on WebRTC protocol. They are managing a room ID and anyone got the room id can join the video. We can create one to one session with our own idea. In the case of the layout, we can modify the layout in our own way. Please check my layout implementation and its working fine for me.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/rl_video_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/iv_hang_up_icon"
            android:layout_width="@dimen/app_video_screen_icon_width_height"
            android:layout_height="@dimen/app_video_screen_icon_width_height"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:layout_marginTop="@dimen/activity_horizontal_margin"
            android:background="@mipmap/hung_up" />

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            android:layout_gravity="top">

            <android.support.v4.view.PagerTitleStrip
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:background="@color/app_text_icon_color" />

        </android.support.v4.view.ViewPager>

        <RelativeLayout
            android:id="@+id/preview"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="@dimen/app_common_five_dp_padding" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_patient_info_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"
        android:gravity="bottom">

        <LinearLayout
            android:id="@+id/ll_patient_details_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/app_common_five_dp_padding"
            android:orientation="vertical">

            <com.adoctortalk.android.utilities.CustomTxtViewBold
                android:id="@+id/tv_patient_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/app_common_five_dp_padding"
                android:layout_marginLeft="@dimen/app_common_ten_dp_padding"
                android:layout_marginTop="@dimen/app_common_five_dp_padding"
                android:text="New Text"
                android:textColor="@color/app_text_icon_color"
                android:textSize="@dimen/application_font_size_very_large" />

            <com.adoctortalk.android.utilities.CustomTxtViewBold
                android:id="@+id/tv_patient_sub_info"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/app_common_five_dp_padding"
                android:layout_marginLeft="@dimen/app_common_ten_dp_padding"
                android:layout_marginTop="@dimen/app_common_five_dp_padding"
                android:text="New Text"
                android:textColor="@color/app_text_icon_color"
                android:textSize="@dimen/application_font_size_large" />

            <LinearLayout
                android:id="@+id/ll_patient_action_cotainer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="@dimen/app_common_five_dp_padding"
                android:layout_margin="@dimen/app_common_five_dp_padding"
                android:orientation="horizontal"
                android:visibility="visible">

                <ImageView
                    android:id="@+id/iv_profile_icon"
                    android:layout_width="@dimen/app_video_screen_icon_width_height"
                    android:layout_height="@dimen/app_video_screen_icon_width_height"
                    android:layout_marginRight="@dimen/app_common_five_dp_padding"
                    android:background="@mipmap/profile" />

                <ImageView
                    android:id="@+id/iv_medical_notes_icon"
                    android:layout_width="@dimen/app_video_screen_icon_width_height"
                    android:layout_height="@dimen/app_video_screen_icon_width_height"
                    android:layout_marginLeft="@dimen/app_common_five_dp_padding"
                    android:layout_marginRight="@dimen/app_common_five_dp_padding"
                    android:background="@mipmap/medical_notes" />

                <ImageView
                    android:id="@+id/iv_prescription_icon"
                    android:layout_width="@dimen/app_video_screen_icon_width_height"
                    android:layout_height="@dimen/app_video_screen_icon_width_height"
                    android:layout_marginLeft="@dimen/app_common_five_dp_padding"
                    android:layout_marginRight="@dimen/app_common_five_dp_padding"
                    android:background="@mipmap/prescription" />

                <ImageView
                    android:id="@+id/iv_attachment_icon"
                    android:layout_width="@dimen/app_video_screen_icon_width_height"
                    android:layout_height="@dimen/app_video_screen_icon_width_height"
                    android:layout_marginLeft="@dimen/app_common_five_dp_padding"
                    android:layout_marginRight="@dimen/app_common_five_dp_padding"
                    android:background="@mipmap/attachments" />
            </LinearLayout>
        </LinearLayout>

        <RelativeLayout
            android:id="@+id/rl_video_fragmnet_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/ll_patient_details_container"
            android:visibility="gone"></RelativeLayout>
    </RelativeLayout>

</RelativeLayout>