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 id s 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 id s are required

Answer 3

Try the following in your style.xml

    <style name="ExoMediaButton.Previous">
        <item name="android:layout_height">0dp</item>
        <item name="android:layout_width">0dp</item>
    </style>

    <style name="ExoMediaButton.Next">
        <item name="android:layout_height">0dp</item>
        <item name="android:layout_width">0dp</item>
    </style>

Answer 4

the PlayerView class of exoplayer has two methods to hide those

    playerView.setShowNextButton(showNextPrevButtons)
    playerView.setShowPreviousButton(showNextPrevButtons)

Answer 5

Notice that the visibility of buttons is changed dynamically
So it's better to set zero size of them to fully hide

    <ImageButton android:id="@id/exo_prev"
        android:layout_width="0dp"
        android:layout_height="0dp"
        style="@style/ExoMediaButton.Previous"
        android:visibility="gone"/>

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

    <ImageButton android:id="@id/exo_shuffle"
        style="@style/ExoMediaButton.Shuffle"
        android:visibility="gone"/>

    <ImageButton android:id="@id/exo_repeat_toggle"
        style="@style/ExoMediaButton"
        android:visibility="gone"/>

    <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"
        android:layout_width="0dp"
        android:layout_height="0dp"
        style="@style/ExoMediaButton.Next"
        android:visibility="gone"/>

    <ImageButton android:id="@+id/exo_fullscreen"
        android:src="@drawable/fullscreen"
        style="@style/ExoMediaButton"/>

    <ImageButton android:id="@+id/exo_vr"
        style="@style/ExoMediaButton"
        android:visibility="gone"/>

Answer 6

You should hideControl() , I also do it.

1. Create CustomSimpleExoPlerView like SimpleExoPlayerView .
2. Comment all line have showControl() .
3. Set CustomSimpleExoPlayer in xml.

Answer 7

You can also go with this, It works fine for me

            ExoPlayer player = new ExoPlayer.Builder(context).build();
            StyledPlayerView styledPlayerView = viewHolder.binding.idExoPlayerVIew;
            MediaItem mediaItem = MediaItem.fromUri(message.getVideoUrl());
            styledPlayerView.setPlayer(player);
            styledPlayerView.setShowNextButton(false);
            styledPlayerView.setShowPreviousButton(false);
            player.setMediaItem(mediaItem);
            player.prepare();

Answer 8

StyledPlayerView playerView = view.findViewById(R.id.videoPlayer);
playerView.findViewById(R.id.exo_prev).setVisibility(View.GONE);
playerView.findViewById(R.id.exo_next).setVisibility(View.GONE);

This is worked for me!

Answer 9

SimpleExoPlayer deprecated. You should use StyledPlayerView in this version:

'com.google.android.exoplayer:exoplayer:2.18.2'

Short answer:

 argType:show_next_button="false"
 argType:show_previous_button="false"

Long answer: You can hide and show other buttons in a similar way.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:argType="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:keepScreenOn="true"
    tools:context=".MainActivity">

    <com.google.android.exoplayer2.ui.StyledPlayerView
        android:id="@+id/playerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        argType:resize_mode="fixed_width"
        argType:show_buffering="when_playing"
        argType:show_fastforward_button="false"
        argType:show_next_button="false"
        argType:show_previous_button="false"
        argType:show_rewind_button="false"
        argType:show_subtitle_button="true"
        argType:use_artwork="true"
        argType:use_controller="true">

    </com.google.android.exoplayer2.ui.StyledPlayerView>

</androidx.constraintlayout.widget.ConstraintLayout>

It's worked:

Answer 10

playerView.setShowPreviousButton(false);
playerView.setShowNextButton(false);