Draw overlay (HUD) on Android VideoView?

Question

I have a custom view that draws HUD:

Here is my layout:

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

    <VideoView
        android:id="@+id/videoView1"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.widgets.HUD
            android:id="@+id/hud"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />

</FrameLayout>

public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.hud_fragment, container, false);

    frameLayout = (FrameLayout) view.findViewById(R.id.frameLayout);

    hudWidget = (HUD) view.findViewById(R.id.hudWidget);

    videoView = (VideoView) view.findViewById(R.id.videoView1);
    videoView.setVideoURI(Uri.parse("http://88.150.210.138:5001/spor"));
    videoView.start();

    frameLayout.removeView(hudWidget);
    frameLayout.addView(hudWidget);
    hudWidget.bringToFront();

    return view;
}

I play an RTSP stream on my VideoView as soon as the video starts playing it looks like that:

How can i force the HUD to draw on top of the VideoView? HUD extends SurfaceView

Project

• The project I'm trying to add the the VideoView is DroidPlanner You can try cloning and see the problem. (Need to add the VideoView manually because it's not in the repo).

Answer 1

I found the answer for your question: VideoView on top of SurfaceView The SurfaceView and the VideoView are both surface views and it was not supported to overlap these in old versions of Android but available since 2.0.

What you need to do:

1. set the pixelformat to TRANSPARENT in order to let the video shine through the interface

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

2. set the HUD surface to be a Media Overlay.

hudWidget.setZOrderMediaOverlay(true);

3. create a new surface and set that as the Display for a MediaPlayer that plays the video.

There is a pull request where you can try these. https://github.com/arthurbenemann/droidplanner/pull/247

The thread that brought the solution: https://groups.google.com/forum/?fromgroups#!msg/android-developers/nDNQcceRnYA/ps9wTBfXIyEJ

Answer 2

From the documentation on FrameLayout available here: Link

Child views are drawn in a stack, with the most recently added child on top

Add an id to the FrameLayout in your layout file. In your onCreate(Bundle), you will have something similar:

// find your framelayout
frameLayout = (FrameLayout) findViewById(....);

videoView = (VideoView) findViewById(R.id.videoView1);

hudView = (com.widgets.HUD) findViewById(R.id.hud);

After the video starts, do the following:

frameLayout.removeView(hudView);

frameLayout.addView(hudView);

Answer 3

make a Handler which invalidate your hudView every 50 or 100 milliseconds

like this:

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.hud_fragment, container, false);

        frameLayout = (FrameLayout) view.findViewById(R.id.frameLayout);

        hudWidget = (HUD) view.findViewById(R.id.hudWidget);

        videoView = (VideoView) view.findViewById(R.id.videoView1);
        videoView.setVideoURI(Uri.parse("http://88.150.210.138:5001/spor"));
        videoView.start();

        frameLayout.removeView(hudWidget);
        frameLayout.addView(hudWidget);
        hudWidget.bringToFront();

        //The Handler which invalidate your (hudWidget) every 50 milliseconds 

        new Handler() {
            public void handleMessage(android.os.Message msg) {
                super.handleMessage(msg);
                hudWidget.invalidate();
                sendEmptyMessageDelayed(0, 50);

            };
        }.sendEmptyMessage(0);

        return view;
    }

Answer 4

Test FrameLayout to replace RelativeLayout.

Maybe It works good.

Answer 5

Extend VideoView and call setWillNotDraw(false) in its constructor. This way you can draw in onDraw(Canvas) then.