Media Playback on Android with ExoPlayer: Getting Started

Customizing ExoPlayer

If you take a look at the UI of ExoPlayer, it’s minimalistic. Next, you’ll make it nice and shiny.

The ExoPlayer library is designed specifically with customization in mind. That’s a huge advantage of ExoPlayer: you can customize almost anything. The ExoPlayer library defines a number of interfaces and abstract base classes that make it possible for app developers to easily replace the default implementations provided by the library.

In your app, you’ll customize the user interface.

Changing the Appearance

Video is displayed in the PlayerView in XML. PlayerView is a high level UI component for media playback which displays the video and playback controls. Playback controls are displayed in a PlaybackControlView. Those elements support a variety of XML attributes, which you can use to customize the look of the UI.

You can also override the default layout files. When these views are inflated, they use specific layout files that determine how the UI will look. You’ll change the appearance of the playback controls.

When PlaybackControlView is inflated, it uses exo_playback_control_view.xml. Create a new XML layout file in the res/layout folder and name it exo_playback_control_view.xml. This will override the default file.

Update the file to the following:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:background="#CC000000"
 android:layoutDirection="ltr"
 android:orientation="vertical">

 <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center"
   android:orientation="horizontal"
   android:paddingTop="4dp">

   <ImageButton
     android:id="@id/exo_rew"
     style="@style/ExoMediaButton.Rewind" />

   <ImageButton
     android:id="@id/exo_play"
     style="@style/CustomExoMediaButton.Play" />

   <ImageButton
     android:id="@id/exo_pause"
     style="@style/CustomExoMediaButton.Pause" />

   <ImageButton
     android:id="@id/exo_ffwd"
     style="@style/ExoMediaButton.FastForward" />
 </LinearLayout>

 <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_marginTop="4dp"
   android:gravity="center_vertical"
   android:orientation="horizontal">

   <TextView
     android:id="@id/exo_position"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:includeFontPadding="false"
     android:paddingLeft="4dp"
     android:paddingRight="4dp"
     android:textColor="#FFBEBEBE"
     android:textSize="14sp"
     android:textStyle="bold" />

   <com.google.android.exoplayer2.ui.DefaultTimeBar
     android:id="@id/exo_progress"
     android:layout_width="0dp"
     android:layout_height="26dp"
     android:layout_weight="1" />

   <TextView
     android:id="@id/exo_duration"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:includeFontPadding="false"
     android:paddingLeft="4dp"
     android:paddingRight="4dp"
     android:textColor="#FFBEBEBE"
     android:textSize="14sp"
     android:textStyle="bold" />

 </LinearLayout>
</LinearLayout>

These changes customize how the Play and Pause buttons look. Open styles.xml and view the custom styles for those buttons. The default styles change the drawable source that is displayed and make the buttons a little bit bigger.

<style name="CustomExoMediaButton">
   <item name="android:background">?android:attr/selectableItemBackground</item>
   <item name="android:scaleType">fitXY</item>
   <item name="android:layout_width">@dimen/video_view_exo_player_play_pause_button_dimen</item>
   <item name="android:layout_height">@dimen/video_view_exo_player_play_pause_button_dimen</item>
</style>

<style name="CustomExoMediaButton.Play">
   <item name="android:src">@drawable/ic_play_circle_filled</item>
</style>

<style name="CustomExoMediaButton.Pause">
   <item name="android:src">@drawable/ic_pause_circle_filled</item>
</style>

Build and run your app and play a video to see what it looks like.

OK, it’s not as nice and shiny as you might have hoped, but feel free to modify the styles if you want to see a more dramatic change. :]

There is a small issue with this approach. Since you overrode the default XML layout file, all instances of the PlaybackControlView in your app will be customized like this. If you don’t want this behavior, you can customize individual instances as well. You can use the controller_layout_id attribute in the XML to specify a custom layout file for individual instances.

Pros and Cons of ExoPlayer

The biggest advantages of ExoPlayer are its flexibility and rich feature stack, but that also makes it harder to work with it.

Since you can customize the player to suit almost every use case, ExoPlayer is the best choice for complex use cases. For simple use cases there really isn’t a reason to use ExoPlayer, MediaPlayer will suffice.

For audio-only playback on some devices, ExoPlayer may consume significantly more battery than MediaPlayer.

One more advantage of MediaPlayer over ExoPlayer is that MediaPlayer works all the way back to the beginning of Android, while ExoPlayer is only available on Jelly Bean and above. But I wouldn’t call this a problem since there’s only about 1% of active devices running earlier versions.

Where to Go From Here?

You covered a lot in this tutorial, but ExoPlayer has many other possibilities and advanced features that aren’t mentioned here. In general, if there is something that you can’t do with Android's MediaPlayer there’s a high probability that you can do it with ExoPlayer. Therefore, ExoPlayer is often the best choice for media playback on Android.

However, be careful of over-engineering! You must be thinking now: “ExoPlayer is awesome, I’ll use it all the time!” Before you do that, ask yourself this: “Do I really need an ExoPlayer?” Say you have a killer app idea. You want to make an app that plays silly sound effects. Do you really need ExoPlayer here? ExoPlayer has many cool features, but in this case you don’t need it. You just need a way to play a very simple sound. Android's MediaPlayer would be a better choice. Don’t over-engineer things!

The FunTime app was just one example of how you can play videos from a remote web server in your app. If you want to check out other features of ExoPlayer and see how to implement those, Google’s codelab is a good place to start. You can check it out here.

We hope you enjoyed this tutorial and learned something from it. If you have any question or comments, or you want to share your experience with ExoPlayer, please join in the discussion below.