Hosting UI Controls

Regardless of the StreamHost implementation that you are using, the user must be presented with UI controls to control the streamer behavior. Similar to what happens in all other modules, we offer a default UI implementation called io.video.videokit.live.host.ui.controls.StreamHostControls.

With fragments

If you are using StreamHostFragment, a StreamHostControls 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 StreamHostControls instance anywhere in the hierarchy, the recorder will find it and set it up.

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

By default, the overlay() layout contains a single StreamHostControls 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 StreamHost implementations

When using other StreamHost implementations, the controls can be added to your view hierarchy as an overlay to the host. For example, in case of StreamHostView, you can simply using a frame layout:

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

    <!-- Add StreamHostView here: -->
    <io.video.videokit.live.host.ui.StreamHostView
        android:id="@+id/host_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!-- Then add controls: -->
    <io.video.videokit.live.host.ui.controls.StreamHostControls
        android:id="@+id/host_controls"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

At runtime, the controls should be bound to the host using StreamHostControls.setStreamHost(). Once this is done, the controls class will start listening to the recorder events and update the interface accordingly.

val streamHostView: StreamHostView = findViewById(R.id.host_view)
val streamHostControls: StreamHostControls = findViewById(R.id.host_controls)
streamHostControls.setStreamHost(streamHostView)

Customizing controls

The StreamHostControls class offers many APIs to control the controls appearance, both through XML attributes and programmatically.

API	XML Attribute	Description	Default
showShutter	app:streamHostControlsShowShutter	If true, a shutter is shown whenever the host is in the BUSY state.	true
shutterDrawable	app:streamHostControlsShutterDrawable	Controls the drawable drawn in the center of the fullscreen shutter.	A video icon
shutterBackgroundDrawable	app:streamHostControlsShutterBackgroundDrawable	Controls the fullscreen shutter background.	A black background
showAbort	app:streamHostControlsShowAbort	If true, shows a close icon when not in the BUSY state.	true
showSpinner	app:streamHostControlsShowSpinner	If true, shows a loading spinner in the BACKPRESSURE state.	true
showFacing	app:streamHostControlsShowFacing	If true, shows the 'facing' button, which will toggle the active camera sensor (front or back).	true
facingBackDrawable	app:streamHostControlsFacingBackDrawable	Controls the drawable of the 'facing' button when the back camera is being used.	-
facingFrontDrawable	app:streamHostControlsFacingFrontDrawable	Controls the drawable of the 'facing' button when the front camera is being used.	-
showFlash	app:streamHostControlsShowFlash	If true, shows the 'flash' button, which will toggle the flash setting (on or off).	true
flashOnDrawable	app:streamHostControlsFlashOnDrawable	Controls the drawable of the 'flash' button when the flash is on.	-
flashOffDrawable	app:streamHostControlsFlashOffDrawable	Controls the drawable of the 'flash' button when the flash is off.	-
showLive	app:streamHostControlsShowLive	If true, shows an indicator of the live status, shown in STREAMING and BACKPRESSURE states.	true
liveDrawable	app:streamHostControlsLiveDrawable	Controls the drawable for the live status indicator.	LiveDrawable()
showConfirm	app:streamHostControlsShowConfirm	If true, shows the 'confirm' button, which will confirm the stream by calling host.confirm().	true
showStream	app:streamHostControlsShowStream	If true, shows the 'stream' button, which will start or pause streaming.	true
streamStartDrawable	app:streamHostControlsStreamStartDrawable	Controls the drawable of the 'stream' button which, when pressed, will start recording.	StreamDrawable()
streamPauseDrawable	app:streamHostControlsStreamPauseDrawable	Controls the drawable of the 'stream' button which, when pressed, will pause recording.	streamStartDrawable

You can also have full control over the UI by passing your own layout resource to app:streamHostControlsLayout.