Overlay an image (on canvas) on a VideoView?

Question

I am trying to put a canvas over a VideoView. On this canvas I would like to be able to draw Images (or rectangles, lines, ect).

I have the following snippet in my XML file.

<VideoView
   android:id="@+id/videoplayer"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content" />

Again, my goal is to have a canvas over this VideoView so that I can put images on the canvas.

So, I would ultimately have images overlaid on the video. I would also like to be able to overlay rectangles and other elements.

Any help would be extremely appreciated! This was a lot harder than I thought!

Answer 1

I've written an application that does exactly what you are looking for. Unfortunately I do not have the code with me now but I do remember where I found code that helped me a great deal!

As you can see in this video and this one it's very much possible to draw whatever you want on top of the video steam, you just need to make sure you don't drop the FPS too much.

Here you can find the tutorial and the code. What I did was I started taking out chunks of the code as after I learned what it did and what I want to change it with. It really speeded up my work on the PoC I worked on.

I hope it helps, and I'll be glad to help you further if you need anything more.

Good luck!

Answer 2

Use a relative layout. Here is what I use to overlay an image in my mapview:

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

    <fragment
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.SupportMapFragment"/>

    <ImageView
        android:id="@+id/add_new_poi_icon_overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/add_new_poi_icon_content_description"
        android:scaleType="centerCrop"
        android:src="@drawable/overlay_with_watermark"
        android:visibility="gone" /> 
</RelativeLayout>

Just change the scaletype to what you need and use these params to put it where you want:

android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="54dp"
android:layout_marginLeft="36dp"