Customize ExoPlayer Overlay to look like Youtube Player

Creating custom UI elements for ExoPlayer

If you haven’t checked out my first part on ExoPlayer like What is ExoPlayer, Why do we need it and ExoPlayer basic integration please checkout Android ExoPlayer: Play Videos in Your App Like YouTube for better understanding while further reading. Else if you have a basic idea regarding ExoPlayer you can skip that and proceed.

Introduction

ExoPlayer is the video player running in the Android YouTube app, Netflix, Hotstar, Amazon Prime, etc. For the reasons like it is an open-source project which is maintained by Google that has its perks and it’s totally free most player apps in Android use this ExoPlayer. Also, the other reason is that customizing the default MediaPlayer is very difficult to manage and doesn’t support many formats for flexible use. In my previous article, we discussed the importance and basic usage of ExoPlayer. In this post, we will focus on how to customize the UI of an ExoPlayer as per our requirement. By the end of this article, we should get a similar UI of the Youtube app.

If you are a code enthusiast and don’t want the theory please check out the code directly at exoplayer_android_sample. The code is on the branch feature/customizing_ui_youtube

How to Customize the UI of ExoPlayer?

User Interface(UI) plays a key role in the success of any app. As everyone loves to have their own UI elements on the player app than those default ones provided by ExoPlayer, it provides the flexibility to change the UI very easily.

The above screen is the output of the basic implementation of ExoPlayer on exoplayer_android_sample which we implemented in the previous article. The UI elements in the above image like Play, Pause, Forward, etc don’t look so good. Let’s check how to customize them

The best and easiest way that can be used to change the visual appearance is by overriding the layout files and changing the UI elements. We can simply override the controller layout file named exo_playback_control_view.xml from the base and provide our custom elements or we can create a custom layout and provide it as value to app:controller_layout_id . But before heading into it directly let's explore a few attributes of ExoPlayer.

Customizing ExoPlayer Attributes

Let’s add a few attributes to our ExoPlayer view in the layout file to customize its behavior. The below is the snippet of few attributes added

Let’s understand each of them

rewind_increment — This was the attribute used to specify the duration of the rewind applied when the user taps the rewind button. The duration is specified in milliseconds. Use zero to disable the rewind button.

fastforward_increment — This was the attribute used to specify the duration of the forward applied when the user taps the forward button. The duration is specified in milliseconds. Use zero to disable the forward button.

auto_show — This was the attribute used to specify whether to automatically show the controls when playback starts, pauses, ends or fails. If set to false, the playback controls can be manually operated with showController() and hideController(). The default value is taken as true

surface_type - This was the attribute used to specify the type of surface view to be used for video playbacks. Supported values are surface_view, texture_view, spherical_gl_surface_view, video_decoder_gl_surface_view and none. Using none is recommended in case of audio-only applications, since the creation of surface is expensive. Using surface_view is recommended for video applications. Note, TextureView can only be used in a hardware-accelerated window. When rendered in software, TextureView will draw nothing. The default value will be taken as surface_view

use_controller — This was the attribute used to specify whether the playback controls can be shown or not. Its default value is taken as true. The corresponding method setUseController(boolean) can be used at the class level to operate it.

Note — If use_controller was set to false we need to implement customized UI and write our own logic for all actions as the default ones doesn’t apply.

Yes we understood few important attributes now let’s move to the customization of UI for the player

Ovveridding exo_playback_control_view.xml

This approach is easy. We just need to go copy the exo_playback_control_view layout file from the library and paste that file in our layout folder and change the UI elements as per our requirement. Simply change the drawable and run it to check the UI changes.

Let's check how to get to exo_playback_control_view layout file. Follow the below instructions from gif

Now in the copied layout file change the drawable sources and run to verify the changes are reflecting correctly. I changed the forward and rewind icons and run it check the differences below

The videos are at different positions but the forward and rewind icons are changed

If you don’t have a pre-defined set of icons to replace import the required icons from the Vector Asset Studio. If you are newer to it check out my post on Android Vector Drawables which briefly explain about Vector Asset Studio available in Android Studio

And the modified XML is as follows

There are only two lines of changes from the copied file from the library those are

<ImageButton android:id="@id/exo_ffwd"
  style="@style/ExoMediaButton.FastForward"
    android:src="@drawable/ic_exo_icon_fastforward"/>

<ImageButton android:id="@id/exo_ffwd"
  style="@style/ExoMediaButton.FastForward"
    android:src="@drawable/ic_exo_icon_fastforward"/>

Now let's jump to the concept of providing a fully customized layout and attaching it to the Player view.

Customizing ExoPlayer Overlay as YouTube Player

For this let's create a layout file in the layout folder and name it as per your convenience. I would like to name it as layout_exoplayer_control_view .

Let’s divide the layout into three sections as many players designed

Section 1 — Header container which holds the items at the top for info purpose like the title, subtitle, cross to dismiss the overlay, other things depending on our requirement.

Section 2 — Bottom Container which holds the items at the bottom like the seek bar, texts to display current and total time on the overlay, other things depending on our requirement.

Section 3 — The middle container which holds the items at the center of the player like play, pause, forward, rewind, etc depending on our requirement.

Add all the required images beforehand. I have added the below list of icons you can use them from vector asset studio or from our exoplayer_sample git repo by shifting branch to feature/customizing_ui_youtube

The final layout file of design putting all three sections together would look something like below

Note — Do not change id or styles of views or these may have improper working impact. I know few things can be modified from the above to get a better version but need to spent more time so experiment more investing your own time

Now finally attach the layout to the player view using controller_layout_id

<com.google.android.exoplayer2.ui.PlayerView
    android:id="@+id/video_player_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:rewind_increment="10000"
    app:fastforward_increment="10000"
    app:auto_show="true"
    app:surface_type="surface_view"
    app:use_controller="true"
   app:controller_layout_id="@layout/layout_exoplayer_control_views"
    />

Run and check the output

Finally achieved a version similar to youtube overlay. But many things can be handled like state maintenance, showing progress bar while loading, etc for better user experience,

Summary

That’s all, for now. I hope you learned something new. Let’s check the advanced state handling, Live stream handling, rotation handling, etc in my upcoming articles. Stay tuned!

To learn more about Kotlin check out my posts

Kotlin Guide for Beginners — Explains the basics of variable declarations & Why to learn Kotlin
Kotlin Advanced Programming — This post is regarding basics related to functions & types of functions in Kotlin
Kotlin Advanced Programming Part 2 — This post is regarding Functional Programming in Kotlin
Kotlin Advanced Programming Part 3 — This post is regarding scope functions in Kotlin
Kotlin Advanced Programming Part 4 — This post is regarding inline functions & reified types in Kotlin
Kotlin Delegates — This post explains about inline functions & reified types in Kotlin

References

Please let me know your suggestions and comments.

You can find me on Medium and LinkedIn …

Thanks for reading…