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.

This is a very basic example, in a more complex use case you will probably want your CustomUiController to implement YouTubePlayerFullScreenListener, YouTubePlayerListener etc, in order to be able to react to 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 also download the sample app apk and try it on your phone.

Sample app example

This gif 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.

Next steps

1. Visit the project’s home page.
2. Read the API documentation.
3. Leave a star on GitHub :)

Where can you find me?

PlayStoreReply: https://playstorereply.com
Follow me on Twitter: https://twitter.com/psoffritti
My website/portfolio: pierfrancescosoffritti.com
My GitHub account: https://github.com/PierfrancescoSoffritti
My LinkedIn account: linkedin.com/in/pierfrancescosoffritti/en