UI Controls
Regardless of the Player
implementation that you're using, you will likely want
to show UI elements to control playback and the player behavior. Similar to
what happens in the recorder module, we offer a default UI implementation
called io.video.videokit.player.ui.controls.PlayerControls
.
#
With fragmentsIf you are using PlayerFragment
or PagerFragment
, a PlayerControls
view will be automatically
added to the hierarchy and it is managed by the fragment itself, so there's nothing you should do.
When creating the fragment, you also have the option to pass a more generic layout
resource that contains your overlays. If the view contains a PlayerControls
instance anywhere
in the hierarchy, the player will find it and set it up.
By default, the overlay()
layout contains a single PlayerControls
view. Your overlays can contain
a richer hierarchy or you can leverage a layout file to customize controls with the XML attributes listed below.
You can also pass null
to disable the default controls.
Player
implementations#
With other When using other Player
implementations, the controls can be added to your view hierarchy as an
overlay to the player. For example, in case of PlayerView
, you can simply using a frame layout:
At runtime, the controls should be bound to the player using PlayerControls.setPlayer()
. Once
this is done, the controls class will start listening to player events and update
the interface accordingly.
#
Customizing controlsThe PlayerControls
class offers many APIs to control the controls appearance,
both through XML attributes and programmatically.
API | XML Attribute | Description | Default |
---|---|---|---|
showErrors | app:playerControlsShowErrors | If true, a toast is shown whenever we detect a playback error. | true |
showSpinner | app:playerControlsShowSpinner | If true, a loading spinner is shown when the video is being loaded or buffered. | true |
showNavigation | app:playerControlsShowNavigation | If true, the "next video" and "previous video" buttons are shown. See navigation. | true |
showPlay | app:playerControlsShowPlay | If true, the play / pause button will be shown. | true |
showMute | app:playerControlsShowMute | If true, the mute / unmute button will be shown. | true |
showProgress | app:playerControlsShowProgress | If true, the horizontal progress bar will be shown, including a text view with the current time. | true |
showDuration | app:playerControlsShowDuration | If true, a text view with the video duration will be shown. | true |
playDrawable | app:playerControlsPlayDrawable | Controls the drawable for the play state. Set to @empty to avoid showing a drawable at all. | - |
pauseDrawable | app:playerControlsPauseDrawable | Controls the drawable for the pause state. Set to @empty to avoid showing a drawable at all. | - |
muteDrawable | app:playerControlsMuteDrawable | Controls the drawable for the mute control. Set to @empty to avoid showing a drawable at all. | - |
unmuteDrawable | app:playerControlsUnmuteDrawable | Controls the drawable for the unmute control. Set to @empty to avoid showing a drawable at all. | - |
You can also have full control over the UI by passing your own layout resource to app:playerControlsLayout
.
#
Touch controlsThe controls view is able to react to simple touch events and perform player actions accordingly.
You can configure the touch behavior with the singleTapAction
and doubleTapAction
APIs, both in
XML and programmatically.