Show and hide a play button over a VideoView in Android

Question

I want to be able to show a button to start a video, centered inside the same view where the video will play (with a VideoView). I also want the button to disappear after I click it, since I'm using the MediaController class to perform Pause, Rewind, Fast-Forward actions once the video has started.

How do I do this?

Here's the layout I have so far:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/LinearLayout1"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical">

<FrameLayout
  android:id="@+id/video_frame"
  android:layout_width="fill_parent"
  android:layout_height="480px"
  android:background="#000"
  >

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

</FrameLayout>

I've tried programmatically adding an ImageButton to the FrameLayout, but that doesn't seem to work.

Answer 1

OK, here's how I solved this. The layout file is pretty simple. Just add an ImageButton after the VideoView element:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/LinearLayout1"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical">

<FrameLayout
  android:id="@+id/video_frame"
  android:layout_width="fill_parent"
  android:layout_height="480px"
  android:background="#000"
  >

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

  <ImageButton
    android:id="@+id/play_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|center_horizontal"
    android:src="@drawable/ic_launcher"
    />

</FrameLayout>

The FrameLayout view element layers its child elements on top of each other, in the order you define them in the layout. So the last element added in the layout gets drawn on top. Notice that the ImageButton has this attribute:

android:layout_gravity="center_vertical|center_horizontal"

This attribute centers the ImageButton in the FrameLayout.

Next trick is to get the ImageButton to disappear after it's clicked. Use the setVisibility() method on the ImageButton to do this:

    // Setup a play button to start the video
    mPlayButton = (ImageButton) findViewById(R.id.play_button);
    mPlayButton.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            if (mPlayer.isPlaying()) {
                resetPlayer();
            } else {
                playVideo(videoUrl, mVideoView.getHolder());
                // show the media controls
                mController.show();
                // hide button once playback starts
                mPlayButton.setVisibility(View.GONE);
            }
        }
    });

Answer 2

There's a lesser known feature of FrameLayout called the Foreground Drawable. You can specify a drawable that will be rendered on top of all FrameLayout children. So:

mFrameLayout.setForegroundDrawable(mPlayDrawable);

will do the trick, and your layout will be more efficient (less views).

You can use Gravity constants to properly align the drawable with

mFrameLayout.setForegroundGravity(Gravity.XXXX)