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 fragments

If 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.

val options = PlayerOptions.build {
    overlay(R.layout.player_options_overlay) // customize overlays
    overlay(null) // disable default controls
}

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.

With other Player implementations

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:

<!-- Part of your UI... -->
<FrameLayout>

    <!-- Add PlayerView here: -->
    <io.video.videokit.player.ui.PlayerView
        android:id="@+id/player_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!-- Then add controls: -->
    <io.video.videokit.player.ui.controls.PlayerControls
        android:id="@+id/player_controls"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

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.

val playerView: PlayerView = findViewById(R.id.player_view)
val playerControls: PlayerControls = findViewById(R.id.player_controls)
playerControls.setPlayer(playerView)

Customizing controls

The 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 controls

The 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.

val controls: PlayerControls = findViewById(R.id.player_controls)
controls.singleTapAction = SingleTapAction.NONE // do nothing
controls.singleTapAction = SingleTapAction.TOGGLE_PLAYBACK // pause if playing, plays if paused
controls.singleTapAction = SingleTapAction.TOGGLE_VISIBILITY // shows or hides the controls

controls.doubleTapAction = DoubleTapAction.NONE // do nothing
controls.doubleTapAction = DoubleTapAction.SEEK // seek forward / backward depending on the touch position
controls.doubleTapAction = DoubleTapAction.NAVIGATE // navigate to next / previous video, see navigation docs