Add button for full screen video with exo player

Question

I'm using exoPlayer to stream video to my app and so far works fine. What I would like to do now is to add some extra functionality such as a button on the bottom right edge to act as a "full screen button".

But there are two problems. The first is that ExoPlayer doesn't seems to provide any Control class so you can simple add a button and override its functionality. What I guess is that I have to display that button on top of the video so I might have to wrap both in a FrameLayout and add gravity = bottom for the button or is there another way ?

The second problem is : if user clicks the full screen button what should I do next? Add another Fragment with the video view in full screen ? But how can I start the video from the point it was when user click the button and not start it from the beginning ? I cant find in exoPlayer anything relative to start from a specific time.

Answer 1

If you are using SimpleExoPlayerView, there is a way to customize the Player's view, especially the Control's view. Check the documentation of SimpleExoPlayerView:

Attributes

The following attributes can be set on a SimpleExoPlayerView when used in a layout XML file: ...

controller_layout_id - Specifies the id of the layout resource to be inflated by the child PlaybackControlView. See below for more details.

• Corresponding method: None

• Default: R.id.exo_playback_control_view

...

So basically you can provide your own layout file for the controller (you can copy the exo_playback_control_view layout mentioned in the docs, which is the default one, and customize that as you want. Note that you'll need to provide the same view ids for the existing controls (so it's best to actually copy that), as mentioned in the docs of PlaybackControlView:

Overriding the layout file

To customize the layout of PlaybackControlView throughout your app, or just for certain configurations, you can define exo_playback_control_view.xml layout files in your application res/layout* directories. These layouts will override the one provided by the ExoPlayer library, and will be inflated for use by PlaybackControlView. The view identifies and binds its children by looking for the following ids:

• exo_play - The play button.

• exo_pause - The pause button.

• exo_ffwd - The fast forward button.

• exo_rew - The rewind button.

• exo_prev - The previous track button.

• exo_next - The next track button.

• exo_position - Text view displaying the current playback position.

• exo_duration - Text view displaying the current media duration.

• exo_progress - Seek bar that's updated during playback and allows seeking.

All child views are optional and so can be omitted if not required, however where defined they must be of the expected type.

Below is the customized layout with fullscreen button. You get the reference to the button by view.findViewById(R.id.exo_fullscreen_button) and attach the OnClickListener to the button. Inside onClick() you can start your full screen activity (you can define it's full screen either in the AndroidManifest.xml or programatically) or show another fragment, that has the SimpleExoPlayerView occupying the whole screen. As of your second point you can get the playback position like this: playbackPosition = player.getCurrentPosition()and pass it to the new full screen Activity/Fragment as an Intent extra. Then, in that full screen Activity/Fragment you load the video, extract that playbackPosition value and call:

player.seekTo(playbackPosition);
player.setPlayWhenReady(true);

Here is the control layout file:

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:paddingTop="4dp"
    android:orientation="horizontal">

    <ImageButton android:id="@id/exo_prev"
      style="@style/ExoMediaButton.Previous"/>

    <ImageButton android:id="@id/exo_rew"
      style="@style/ExoMediaButton.Rewind"/>

    <ImageButton android:id="@id/exo_play"
      style="@style/ExoMediaButton.Play"/>

    <ImageButton android:id="@id/exo_pause"
      style="@style/ExoMediaButton.Pause"/>

    <ImageButton android:id="@id/exo_ffwd"
      style="@style/ExoMediaButton.FastForward"/>

    <ImageButton android:id="@id/exo_next"
      style="@style/ExoMediaButton.Next"/>

    // This is the custom button
    <ImageButton
        android:id="@+id/exo_fullscreen_button"
        style="@style/ExoMediaButton"
        android:src="@drawable/ic_fullscreen"/>
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <TextView android:id="@id/exo_position"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textSize="14sp"
      android:textStyle="bold"
      android:paddingLeft="4dp"
      android:paddingRight="4dp"
      android:includeFontPadding="false"
      android:textColor="#FFBEBEBE"/>

    <SeekBar android:id="@id/exo_progress"
      android:layout_width="0dp"
      android:layout_weight="1"
      android:layout_height="32dp"
      android:focusable="false"
      style="?android:attr/progressBarStyleHorizontal"/>

    <TextView android:id="@id/exo_duration"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textSize="14sp"
      android:textStyle="bold"
      android:paddingLeft="4dp"
      android:paddingRight="4dp"
      android:includeFontPadding="false"
      android:textColor="#FFBEBEBE"/>

  </LinearLayout>

</LinearLayout>