Customizing ExoPlayer’s UI components

ExoPlayer V2 includes several out-of-the-box UI components, most notably:

• PlaybackControlView is a view for controlling ExoPlayer instances. It displays standard playback controls including a play/pause button, fast-forward and rewind buttons, and a seek bar.
• SimpleExoPlayerView is a high level view for SimpleExoPlayer media playbacks. It displays video, subtitles and album art during playback, and displays playback controls using a PlaybackControlView.

Use of these out-of-the-box views is optional. Application developers are free to implement their own UI components from scratch if they prefer, giving complete control at the cost of having to undertake extra work. Whilst this approach remains necessary for advanced use cases, from V2.1.0 it will no longer be needed for basic customization. The out-of-the-box views will support such customization directly in three ways, which are (from simplest to most flexible):

• By setting attributes (or calling corresponding methods) on the views.
• By globally overriding the view layout files.
• By specifying a custom layout file for a single view instance.

Examples of the three approaches are given below. Full documentation can be found in the Javadoc for PlaybackControlView and SimpleExoPlayerView, including complete lists of the available attributes and of the standard view ids that should be used when creating custom layouts.

Attributes

A SimpleExoPlayerView might be included in the layout for an Activity belonging to a video application as follows:

As an example of how attributes can be used to adjust the view’s behavior, we can set the resize_mode attribute. By default this attribute has value “fit”, which means the video is rendered within the bounds of the view at its native aspect ratio, with horizontal or vertical black bars visible if the aspect ratio of the video differs from that of the view. By changing this attribute to “fill”, we can deform the video so that it fills the entire view:

The change in the visual appearance is shown below.

Changing resize_mode from fit (left) to fill (right)

We can also set attributes that adjust the playback controls displayed by the SimpleExoPlayerView. In fact, any attribute that can be set directly on a PlaybackControlView can also be set on a SimpleExoPlayerView. Two such attributes are rewind_increment and fastfoward_increment, which we can set on the view to cause the rewind and fast forward buttons to move the playback position by 30 seconds, rather than the default 5 (rewind) and 15 (fastforward) seconds:

Overriding layout files

When a SimpleExoPlayerView is instantiated it inflates its layout from the layout file exo_simple_player_view.xml. PlaybackControlView inflates its layout from exo_playback_control_view.xml. To customize these layouts, an application can define layout files with the same names in its own res/layout* directories. These layout files override the ones provided by the ExoPlayer library.

As an example, suppose we want our playback controls to consist of only a play/pause button positioned in the center of the view. We can achieve this by creating exo_playback_control_view.xml file in the application’s res/layout directory, containing:

The change in visual appearance compared to the standard controls is shown below.

Replacing the standard playback controls (left) with custom controls (right)

Note that in the layout @id/exo_play and @id/exo_pause are standard ids defined by the ExoPlayer library. Use of standard ids is required so that child views can be identified, bound to the player and updated in an appropriate way. A full list of the standard ids for each view can be found in the Javadoc for PlaybackControlView and SimpleExoPlayerView. Use of each standard id is optional, which is why we’ve been able to omit most of the usual playback controls in our example.

Custom layout files

Overriding a layout file is an excellent solution for changing the layout across the whole of an application, but what if a custom layout is required only in a single place? This scenario is addressed by combining the two approaches described above. First define a layout file as though overriding one of the default layouts, but this time give it a different file name, for example custom_controls.xml. Second, use an attribute to indicate that this layout should be used when inflating the view. When using SimpleExoPlayerView, the layout inflated to provide the playback controls is specified using the controller_layout_id attribute:

It’s also possible to specify a different layout for the entire SimpleExoPlayerView using the player_layout_id attribute. When using PlaybackControlView, the controller_layout_id attribute specifies the layout used.

This post has shown how to customize the standard UI components provided by the ExoPlayer library. The features described will be available from the V2.1.0 release, and are available to try today on the V2 dev branch). There are no doubt more attributes that we could provide to enable additional customization. If you can think of some that would be useful, please let us know!