Show and hide the play button via VideoView in Android

Question

I want you to be able to show a button to start a video, in the center of which is the same view where the video will be played (using VideoView). I also want the button to disappear after clicking on it, since I use the MediaController class to perform Pause, Rewind, Fast-Forward actions after the video starts.

How to do it?

Here is 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 tried programmatically adding ImageButton to FrameLayout, but this does not seem to work.

Answer 1

OK, that’s how I solved it. 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 item splits its children into each other, in the order they are defined in the layout. Thus, the last element added to the layout is drawn on top. Note that ImageButton has this attribute:

 android:layout_gravity="center_vertical|center_horizontal" 

This attribute centers the ImageButton in the FrameLayout.

The next trick is to make ImageButton disappear after clicking it. To do this, use the setVisibility () method in ImageButton:

  // 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

Instead of using a button, try making FrameLayout Clickable .

Alternatively, you can simply place the button under FrameLayout and set the view visibility to GONE in the onClick event handler.

EDIT: try something like this: stack overflow

Answer 3

The FrameLayout function called Foreground Drawable is less well known here . You can specify a drawable that will be displayed on top of all FrameLayout children. So:

 mFrameLayout.setForegroundDrawable(mPlayDrawable); 

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

You can use gravity constants to properly align with

 mFrameLayout.setForegroundGravity(Gravity.XXXX)