CODEWITHSUNDEEP
androidandroid-videoview
Joe Fernandez
Joe Fernandez

Reputation: 4811

Show and hide a play button over a VideoView in Android

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.

Upvotes: 13

Views: 25149

Answers (3)

rupps
rupps

Reputation: 9887

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)

Upvotes: 1

Joe Fernandez
Joe Fernandez

Reputation: 4811

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);
            }
        }
    });

Upvotes: 14

crazylpfan
crazylpfan

Reputation: 1088

Instead of using a button, try making the FrameLayout Clickable.

Alternatively, you could just place a Button below the FrameLayout and, in the onClick event handler, set the View's visibility to GONE.

EDIT: or try something like this: https://stackoverflow.com/a/7511535/826731

Upvotes: 0

Related Questions