How to remove Next and Previous button from SimpleExoPlayerView in Android

Question

I use ExoPlayer to play audio on my Android App with SimpleExoPlayerView as the controller. The default controller have five button, Play/Pause, Forward, Backward, Next, and Previous. My app only use Play/Pause, Forward, and Backward, so I want to remove the Next and Previous button from the controller but I couldn't find how to do it with the SimpleExoPlayerView. How do I achieve this?

Answer 1

There are default styles for each button. Just override the styles of Previous and Next buttons and add visibility gone.
Put below styles in your style.xml

<style name="ExoMediaButton.Previous">
    <item name="android:visibility">gone</item>
</style>

<style name="ExoMediaButton.Next">
    <item name="android:visibility">gone</item>
</style>

Answer 2

You'll need a custom layout exo_playback_control_view.xml file which is what exoplayer looks for by default for inflating the control view. It is important that the custom layout is named exo_playback_control_view and that certain ids are used

The default controls can be seen in the source code here release-v2 or here dev-v2-r2.3.1 (Make sure you find the version of exoplayer which you're using)

You can copy that file into your res/layout directory, and remove the undesirable buttons, here is what the default looks like:

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

---

There is also a post on medium which is a big help for customizing exoplayer; the author writes a custom control:

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

Notice the ids are required