Video view over camera preview

Question

I am trying to play a video and want to show it on camera preview. The video is played with transparent background and video controls are also shown but no video is visible. I do get the sound of the video being played.

Here is my code:

// CameraSampleActivity.java, OnCreate Method

 View layout_Initialization= (View)findViewById(R.id.layout_Initialization);
 layout_Initialization.setVisibility(View.VISIBLE);

View custom_Video_Dialog=(View)findViewById(R.id.videoLayout);
custom_Video_Dialog.setVisibility(View.GONE);

//Code related to camera and camera preview here in the OnCreate method


// CameraSampleActivity.java This code is executed when video needs to be played

View custom_Video_Dialog=(View)findViewById(R.id.videoLayout);
custom_Video_Dialog.setVisibility(View.VISIBLE);

VideoView mVideoView = (VideoView) findViewById(R.id.myvideoview);
mVideoView.setMediaController(new MediaController(CameraSampleActivity.this));
mVideoView.setVideoURI(Uri.parse(firstVideo.getUrl()));

 mVideoView.setOnPreparedListener(new OnPreparedListener() {

                    public void onPrepared(MediaPlayer arg0) {
                        mVideoView.setFocusable(true);
                        mVideoView.requestFocus();
                        mVideoView.start();
                    }
                });

// Here is main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_layout" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:background="@drawable/transparent"
    android:orientation="vertical" xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads">
    <FrameLayout android:layout_width="fill_parent"
        android:layout_height="0px" android:layout_weight="1">
        <FrameLayout android:id="@+id/cameraPreview"
            android:layout_width="fill_parent" android:layout_height="fill_parent" />

        <RelativeLayout android:id="@+id/layout_Initialization"
            android:layout_width="fill_parent" android:layout_height="fill_parent"
            android:background="@drawable/transparent" android:orientation="horizontal">
.................................
.................................
....................... .........        
        </RelativeLayout>
        <RelativeLayout
                android:id="@+id/videoLayout"
                android:layout_width="fill_parent"
                android:layout_height="280dp" >

            <VideoView android:id="@+id/myvideoview"
                android:layout_width="fill_parent" android:layout_height="180dp"
                android:layout_alignParentTop="true" />
            <Button android:id="@+id/videoListButton" android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true" android:text="List" />
        </RelativeLayout>

    </FrameLayout>



</LinearLayout>

I think the context being passed to mediaController is incorrect. Note that if i take the videoLayout outside the frameLayout the video is visible but not transparent. Placing it inside the Framelayout gives my transparency and video is shown with camera preview on the back visible which is what i want. Any help?

Answer 1

I managed to do something quite similar, overlaying a TextView over a camera video preview, this might help you:

Unlike Linear Layouts, order of declaration does NOT define the Z order in Relative Layouts. I was able of overlaying a textview over the Camera Preview by declaring both views in XML and, and overlaying them programatically on my Activity's onCreate Method.

Suppose you have an XML with a TextView with a nice transparent backgroud that you want to overlay over the Camera Preview frame layout, because why not?, it looks cool!:

<RelativeLayout>
      <TextView
        android:id="@+id/txtnombotiga"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ola ke ase"
        android:textColor="#000000"
        android:textSize="16sp"    
        android:background="#55ffffff" 
       />
  <FrameLayout
      android:id="@+id/cameraPreview"
      android:layout_width="match_parent"
      android:layout_height="240dp">     
  </FrameLayout>
</RelativeLayout>

If left like that, the camera will cover your text, no matter what :( To solve it, let´s go programatical, and: 1) detach the TextView from its parent Layout 2) attach it to the camera´s frame layout after attaching the camera first.

Heres the code

OnCreate(){ ...blaa blaaa...

//Create camera instance and reference to our frame Layout
mPreview = new CameraPreview(this, mCamera, previewCb, autoFocusCB);        
FrameLayout preview = (FrameLayout) findViewById(R.id.cameraPreview);
//Add camera to the Frame Layout
preview.addView(mPreview);
//Get reference to the TextView you want to overlay and type something funny
TextView txt=(TextView)findViewById(R.id.txtnombotiga);     
txt.setText("ola keee aseee!");
//1) Step 1, here comes the magic! dettach the textView from its original Layout
((ViewGroup)txt.getParent()).removeView(txt);
//1) Step 2, voila! attach it to the View, order matters here so it will appear on 
//top of the camera!
preview.addView(txt);

This is the general way to do it, If you need more details let me know. I need to meet deadlines at work, so I use the first solution that comes up to my mind, sometimes not the most elegant or efficient, if you know a better way of doing it, please share it with us!