CODEWITHSUNDEEP
javaandroidexoplayerexoplayer2.x
Sasha Shpota
Sasha Shpota

Reputation: 10310

ExoPlayer: Place controller under the video without overlapping the video

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>

Upvotes: 24

Views: 14957

Answers (3)

Pierre
Pierre

Reputation: 9062

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.getPlayer());

Edit: Modified my answer to suggestion from @RashimiGautam

Upvotes: 30

Rashmi Gautam
Rashmi Gautam

Reputation: 171

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.

Upvotes: 9

Tejashwi Kalp Taru
Tejashwi Kalp Taru

Reputation: 3074

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

Upvotes: 4

Related Questions