CODEWITHSUNDEEP
androidandroid-videoview
Jesse
Jesse

Reputation: 23

Android layout ordering for overlapping VideoViews not working correctly

I'am developing an app that will show 2 videos at the same time. One small in the bottom right corner and the other full screen (kinda). When I run the video_view on an Android 6.0.1 device the order works correctly. But when i run it on a version newer (Android 7 for example) it does not order it correctly. Also the function setZ() does nothing for me.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <nl.hacker115.drivingwithdrivepro550.CustomVideoView
        android:id="@+id/roadCamera"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <nl.hacker115.drivingwithdrivepro550.CustomVideoView
        android:id="@+id/faceCamera"
        android:layout_width="500dp"
        android:layout_height="300dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:layout_gravity="bottom|end" />
</FrameLayout>

I want the faceCamera on top of the roadCamera, how can I do this?

My CustomVideoView.java looks like this

package nl.hacker115.drivingwithdrivepro550;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.VideoView;

public class CustomVideoView extends VideoView {
    private PlayPauseListener mListener;

    public CustomVideoView(Context context) {
        super(context);
    }

    public CustomVideoView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomVideoView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public void setPlayPauseListener(PlayPauseListener listener) {
        mListener = listener;
    }

    @Override
    public void pause() {
        super.pause();
        if (mListener != null) {
            mListener.onPause();
        }
    }

    @Override
    public void start() {
        super.start();
        if (mListener != null) {
            mListener.onPlay();
        }
    }

    public static interface PlayPauseListener {
        void onPlay();
        void onPause();
    }

}

Upvotes: 1

Views: 123

Answers (2)

Maik
Maik

Reputation: 3539

My knowledge in this area is very limited, but your issue is the following: The issue is because views like VideoView and GLSurfaceView need/provide a dedicated drawing area and are handled outside of the "normal" rendering pipeline that draws UI widgets. The image that they are showing is composited into the final image at a later stage. This stage has no knowledge about in what way the view is layout-ed.

I assume this was a bug or unspecified behavior in Android 6 in what order these views get composited onto the final image.

I was able to reproduce your issue and solved it by setting

faceCameraView.setZOrderMediaOverlay(true);

on the overlay VideoView.

For more information take a look at the class description of SurfaceView which is the base class for VideoView and GLSurfaceView.

Upvotes: 0

Arjun
Arjun

Reputation: 358

This could be what you are looking for.

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

<nl.hacker115.drivingwithdrivepro550.CustomVideoView
    android:id="@+id/roadCamera"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<nl.hacker115.drivingwithdrivepro550.CustomVideoView
    android:id="@+id/faceCamera"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="16dp" />
</FrameLayout>

Upvotes: 1

Related Questions