CODEWITHSUNDEEP
javaandroidimage
High schooler
High schooler

Reputation: 1680

Overlay an image (on canvas) on a VideoView?

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!

Upvotes: 8

Views: 3811

Answers (3)

afpro
afpro

Reputation: 1103

i beleive you need more than an image, right?

so, try this:

  1. use GLSurfaceView
  2. create an texture
  3. create an SurfaceTexture
  4. create an Surface with SurfaceTexture
  5. tell MediaPlay output to Surface created above
  6. render the SurfaceTexture
  7. render other widgets(button progressbar etc)

Upvotes: 1

Assaf Gamliel
Assaf Gamliel

Reputation: 12015

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!

Upvotes: 8

lentz
lentz

Reputation: 337

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"

Upvotes: 4

Related Questions