How to customize the UI of an Android YouTube Player

Use the android-youtube-player API to build custom UIs for your YouTube Player

One of the limitations of the official YouTube Android Player API is that you can’t change the way the player looks. 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 meant to be used as a replacement for the official player: the android-youtube-player API.

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

inflateCustomPlayerUI

Starting from version 5.0.0 of the android-youtube-player API, it is possible to completely replace the player’s UI.

This is possibile using a new method of YouTubePlayerView:

View inflateCustomPlayerUI(@LayoutRes int customUILayoutID)

This method takes in the id of a layout resource and 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 whatever you want.

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.

A few examples of different UIs on the same player

Simple example

I’m going to write a simple example showing how to use this method. For this example our custom UI is very simple, it only has a Play/Pause button.

This is how the layout file looks like.

Now we can call inflateCustomPlayerUI to use this layout as the player’s UI.

The function returns a reference to the inflated layout.

Now the new UI is visible, but we don’t know how to react when the users clicks it. In our example this means: what should happen when the user clicks the button? the player should stop or play according to the UI’s state.

To control the state of the UI we’re going to define our own UI controller class.

Now we just need to create and instance of our CustomUiController by passing to it the reference to our inflated View on to our YouTubePlayer.