How to customize Android YouTube Player’s UI

Use the Android-YouTube-Player library to build custom UI’s for your YouTube Player

The official YouTube Android Player API has some limitations, one of which is the impossibility of customizing the way the player looks. So, what if you need to style the YouTube Player to better fit the look and feel of your app?

In this short post I’m presenting a solution to this problem, an open source library intended to be used as a replacement for the official YouTube Android Player API: the Android-YouTube-Player library.

This is an open source alternative to Google’s library, I suggest you read this introduction to the library before reading this post.

inflateCustomPlayerUI

Starting from version 5.0.0 of the Android-YouTube-Player, it’s possible to completely replace the player’s UI.

This is possibile using this new method in YouTubePlayerView:

View inflateCustomPlayerUI(@LayoutRes int customUILayoutID)

This method takes in the id of a layout resource. The method returns the View object corresponding to the inflated layout. The default UI of the player gets removed and replaced with the new UI.

This method gives you all the freedom you need. The layout resource you pass to the method can be built as you prefer.

Obviously you will be responsible for updating the state of your UI. For example, toggling between your Play/Pause icons (if you have them), updating the progress of the seek bar (if you have it) etc.

Simple example

I’m going to write a simple example of UI replacement, our custom UI will consist only of a Play/Pause button.

This is our custom_player_ui.xml file

<FrameLayout
xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height=”match_parent” >
<Button
android:id="@+id/play_pause_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play/Pause" />
</FrameLayout>

To control the state of the UI I’m using a class I’ve called CustomUIController

class CustomUIController {
  private boolean playing = false;
CustomUIController(View customPlayerUI, YouTubePlayer yTPlayer) {
this.playerUI = customPlayerUI;
this.youTubePlayer = yTPlayer;
    initViews(customPlayerUI);
}
  private void initViews(View playerUI) {
playPauseButton = playerUI.findViewById(R.id.play_pause_button);

playPauseButton.setOnClickListener( view -> {
if(playing) this.youTubePlayer.pause();
else this.youTubePlayer.play();
this.playing = !this.playing;
});
}
}

And finally here I am simply inflating the layout in the YouTubePlayerView and creating an instance of CustomUIController.

View customPlayerUI = youTubePlayerView.inflateCustomPlayerUI(R.layout.custom_player_ui);

youTubePlayerView.initialize(youTubePlayer -> {

CustomUIController customUIController =
new CustomUIController(customPlayerUI, youTubePlayer);
  // ...
}, true);

This is a very basic example, in more complex (and common) use cases you will probably want your CustomUIController to implement YouTubePlayerFullScreenListener, YouTubePlayerListener etc, in order to be able to reflect in the UI changes in the player’s state.

If you want to see a more complex example, you can find one here, in the sample app. You can see it working in the sample app, that you can download from the Play Store.

Sample app example

This gif on the left is from the sample app example, it has an enter/exit full screen button and two text views keeping track of the video progress and duration. This UI is intentionally ugly, but you can create every layout you wish to create: complex, simple, beautiful or ugly.