UI Controls

Regardless of the Recorder implementation that you are using, the user must be presented with UI controls to control the recorder behavior. Similar to what happens in the player module, we offer a default UI implementation called io.video.videokit.recorder.ui.controls.RecorderControls.

With fragments

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

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

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

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

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

    <!-- Add RecorderView here: -->
    <io.video.videokit.recorder.ui.RecorderView
        android:id="@+id/recorder_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!-- Then add controls: -->
    <io.video.videokit.recorder.ui.controls.RecorderControls
        android:id="@+id/recorder_controls"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

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

val recorderView: RecorderView = findViewById(R.id.recorder_view)
val recorderControls: RecorderControls = findViewById(R.id.recorder_controls)
recorderControls.setRecorder(recorderView)

Customizing controls

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

API	XML Attribute	Description	Default
showPreviewScreen	app:recorderControlsShowPreviewScreen	If true, the video will be previewed before confirmation, by calling recorder.enterPreview() before recorder.completeRecord().	true
showShutter	app:recorderControlsShowShutter	If true, a shutter is shown whenever the recorder is in the BUSY state.	true
shutterDrawable	app:recorderControlsShutterDrawable	Controls the drawable drawn in the center of the fullscreen shutter.	A video icon
shutterBackgroundDrawable	app:recorderControlsShutterBackgroundDrawable	Controls the fullscreen shutter background.	A black background
showAbort	app:recorderControlsShowAbort	If true, shows a close icon in the IDLE and PREVIEW state.	true
showClipsBar	app:recorderControlsShowClipsBar	If true, shows the clips bar, an horizontal bar marking the video recording progress and the video clips.	true
clipsBarDrawable	app:recorderControlsClipsBarDrawable	Controls the drawable that displays the clips bar.	ClipsBarDrawable()
showConfirm	app:recorderControlsShowConfirm	If true, shows the 'confirm' button, which will confirm the recording (or preview it, if showPreviewScreen is true).	true
showConfirmPreview	app:recorderControlsShowConfirmPreview	If true, shows the 'confirm preview', a button shown in the PREVIEW state to confirm it.	-
showRemoveClip	app:recorderControlsShowRemoveClip	If true, shows the 'remove clip' button, a delete button that will remove the last recorded clip.	true
showRecord	app:recorderControlsShowRecord	If true, shows the 'record' button, which will start or pause recording.	true
recordStartDrawable	app:recorderControlsRecordStartDrawable	Controls the drawable of the 'record' button which, when pressed, will start recording.	RecordDrawable()
recordPauseDrawable	app:recorderControlsRecordPauseDrawable	Controls the drawable of the 'record' button which, when pressed, will pause recording.	recordStartDrawable
showFacing	app:recorderControlsShowFacing	If true, shows the 'facing' button, which will toggle the active camera sensor (front or back).	true
facingBackDrawable	app:recorderControlsFacingBackDrawable	Controls the drawable of the 'facing' button when the back camera is being used.	-
facingFrontDrawable	app:recorderControlsFacingFrontDrawable	Controls the drawable of the 'facing' button when the front camera is being used.	-
showFlash	app:recorderControlsShowFlash	If true, shows the 'flash' button, which will toggle the flash setting (on or off).	true
flashOnDrawable	app:recorderControlsFlashOnDrawable	Controls the drawable of the 'flash' button when the flash is on.	-
flashOffDrawable	app:recorderControlsFlashOffDrawable	Controls the drawable of the 'flash' button when the flash is off.	-

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

Touch controls

The controls view is able to react to simple touch events and perform recorder actions accordingly. You can configure the touch behavior with the moveRecordOnTouch and recordMovementAction APIs, both in XML and programmatically.

val controls: RecorderControls = findViewById(R.id.recorder_controls)
controls.moveRecordOnTouch = true // now the record button will follow the finger on long press
controls.recordMovementAction = RecordMovementAction.ZOOM // translating the button controls camera zoom
controls.recordMovementAction = RecordMovementAction.NONE // translating the button does nothing