ExoPlayer: Place controller under the video without overlapping the video

Question

I have a PlayerView that takes up the top half of the Activity in portrait orientation with the bottom half of the screen showing some text.

I need to have the controller under the video without overlapping the video content (it will always be shown). By default when a user touches the video the controller appears at the bottom of the video covering the bottom part of the video. I my case I need the controller to stick under the video with no intersections with the video content.

I went through SimpleExoPlayer and PlayerView APIs but I haven't found any way to do so.

Question: How can I place the controller under the video with ExoPlayer?

Here is how the layout looks like:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.exoplayer2.ui.PlayerView
        android:id="@+id/video_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_below="@id/video_view"
        android:scrollbars="vertical" />

</RelativeLayout>

you should edit exoplayer layout by import exoplayer as a module — Tara, Aug 07 '18 at 12:10
can you please post as a image of your problem for better understanding — Tara, Aug 07 '18 at 12:10
@WaleedAsim can't post right now. But I updated the question with more explanation (hope it is clear now). — Sasha Shpota, Aug 07 '18 at 12:18
https://stackoverflow.com/questions/33647496/custom-ui-on-exoplayer-sample may be this helps you — Tara, Aug 07 '18 at 12:54

score 27 · Accepted Answer · edited Aug 14 '18 at 09:19

27

This will push the controls down to the bottom of the screen:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.exoplayer2.ui.PlayerView
        android:id="@+id/video_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:use_controller="false" />

    <com.google.android.exoplayer2.ui.PlayerControlView
        android:id="@+id/controls"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/video_view"
        app:show_timeout="0" />

</RelativeLayout>

Then in Java:

PlayerView videoView = findViewById(R.id.video_view);
PlayerControlView controls = findViewById(R.id.controls);
controls.setPlayer(videoView);

Edit: Modified my answer to suggestion from @RashimiGautam

edited Aug 14 '18 at 09:19

Sasha Shpota

7,441
6
49
100

answered Aug 07 '18 at 13:07

Pierre

6,347
4
48
67

Thank you. This way I'd have two controls at the same time. Do you know how to remove the original one? – Sasha Shpota Aug 07 '18 at 15:43
@OleksandrShpota see if the edited answer works for you – Pierre Aug 12 '18 at 20:04
1

Thank you. It worked. Though `PlaybackControlView` is deprecated - I replaced it with `PlayerControlView`. – Sasha Shpota Aug 13 '18 at 18:10
I updated your answer with the final solution that worked for me. – Sasha Shpota Aug 14 '18 at 09:20
1

You can't set PlayerView in controls.setPlayer(videoView). – Ghodasara Bhaumik Mar 30 '19 at 11:28
3

You need to pass ExoPlayer reference to the controls.setPlayer(player) – Ghodasara Bhaumik Mar 30 '19 at 11:28

score 9 · Answer 2 · edited Aug 12 '18 at 07:27

9

Refer to the answer by @Pierre.
Also to remove controller from above PlayerView, in that case, @id/video_view by writing player.showController(false) in java file.
You can also use app:use_controller:false in the xml.
So you will the only the video without controller on top. And link it to a new controller, in that case, @id/controls at the bottom of the video.

edited Aug 12 '18 at 07:27

Man

2,453
2
11
20

answered Aug 11 '18 at 14:18

Rashmi Gautam

171
7

correction - app:use_controller="false" – Samrat Dec 12 '20 at 05:14

Tejashwi Kalp Taru · Answer 3 · 2018-08-07T12:54:41.143

This might give you an idea, also have you tried to override the controls?

As an example, suppose we want our playback controls to consist of only a play/pause button positioned in the center of the view. We can achieve this by creating exo_playback_control_view.xml file in the application’s res/layout directory, containing:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <ImageButton android:id="@id/exo_play"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:layout_gravity="center"
      android:background="#CC000000"
      style="@style/ExoMediaButton.Play"/>

  <ImageButton android:id="@id/exo_pause"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:layout_gravity="center"
      android:background="#CC000000"
      style="@style/ExoMediaButton.Pause"/>

</FrameLayout>

Note that in the layout @id/exo_play and @id/exo_pause are standard ids defined by the ExoPlayer library. Use of standard ids is required so that child views can be identified, bound to the player and updated in an appropriate way. A full list of the standard ids for each view can be found in the Javadoc for PlaybackControlView and SimpleExoPlayerView. Use of each standard id is optional.

https://medium.com/google-exoplayer/customizing-exoplayers-ui-components-728cf55ee07a

I've got how to hide all buttons except Play and Pause. But how can I stick the control bar under the video view? — Sasha Shpota, Aug 07 '18 at 12:59
you can override the control bar and then place it under the video — Tejashwi Kalp Taru, Aug 07 '18 at 13:00

ExoPlayer: Place controller under the video without overlapping the video

3 Answers3