create video view to be transparent

Question

I have video calling app that having 2 layout: one for local video view and the another one for remote video view. what I want to do is to make the remote video view to be transparent and place it over local video view.

I already tried to add android:background:@colour/transparent or android:alpha:"0.5" in the xml layout but both of that doesn't work. any suggestion for this issue? thanks

this is my xml layout

<?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=".CallActivity">



<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="4"
    android:background="@android:color/darker_gray"
    android:orientation="vertical"
    android:padding="0dip">

<FrameLayout
    android:id="@+id/remote_video_view_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    />

<FrameLayout
    android:id="@+id/local_video_view_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_marginEnd="@dimen/activity_horizontal_margin"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:background="@android:color/darker_gray"
    android:alpha="0.5"/>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="20"
            android:onClick="onLocalVideoMuteClicked"
            android:scaleType="centerInside"
            android:src="@drawable/btn_voice" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="20"
            android:onClick="onLocalAudioMuteClicked"
            android:scaleType="centerInside"
            android:src="@drawable/btn_mute" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="20"
            android:onClick="onSwitchCameraClicked"
            android:scaleType="centerInside"
            android:src="@drawable/btn_switch_camera" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="20"
            android:onClick="onEncCallClicked"
            android:scaleType="centerInside"
            android:src="@drawable/btn_end_call" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="20"
            android:scaleType="centerInside"
            android:src="@drawable/sc"
            android:onClick="save"/>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="20"
            android:scaleType="centerInside"
            android:src="@drawable/draw" />

    </LinearLayout>

</RelativeLayout>

<LinearLayout
    android:id="@+id/layout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:gravity="center_vertical|start"
        android:text="Waiting for remote users"/>

    <TextView
        android:id="@+id/txChannelName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="40dp"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:gravity="center_vertical|start" />

</LinearLayout>

</RelativeLayout>

Answer 1

I think you first write remote video View and after write Local video View inside XML Try it may be useful

Answer 2

First off you need to switch the order of the views, put the remote view below the local view in the XML (further down in the XML, higher up in the view hierarchy):

<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=".CallActivity">

    <!-- ... -->

    <FrameLayout
        android:id="@+id/local_video_view_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:background="@android:color/darker_gray"/>

    <FrameLayout
        android:id="@+id/remote_video_view_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:alpha="0.5"
        />

    <!-- ... -->

</RelativeLayout>

Second it's sort of hard to help with this without knowing what kind of view the video is shown in. But if you are using a VideoView it's not especially flexible when it comes to animating/changing its view properties. But in that case, try switching to a TextureView, it has better support for animations, like fading.