How to make exoplayer's controller background transparent?

Question

I have an exoplayer implementation, but control's background (where pause, stop, progress bar) is not transparent, when it's appearing (see attachments). How to make it's transparent?

Answer 1

You can actually customise the layout controls how you want, adding or removing buttons, changing backgrounds etc.

There are details in the ExoPlayer documentation here:

• https://exoplayer.dev/ui-components.html

Looking at one of the examples at the above link, as a simple use case, you can set the transparency of the background as below (Just for Play in this case):

<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="@android:color/transparent"
      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, you can also set the background to a color and include a transparency 'alpha' value so you get a red background with 50% transparency, or whatever color and transparency combination you want.

The would like like this for a background that is 90% white and 10% transparent - EB is the 'alpha' value giving the transparency and FFFFFF is the color white:

         android:background="#EBFFFFFF" 

You can see more detail and some handy alpha % charts in the answers to this question: How to make a background 20% transparent on Android