UI Controls

Regardless of the Editor implementation that you are using, you might want to display UI controls to the user, in order to control the editor behavior. Similar to what happens with other VideoKit SDKs, we offer a default UI implementation called io.video.videokit.editor.ui.controls.EditorControls.

With fragments

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

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

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

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

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

    <!-- Add EditorView here: -->
    <io.video.videokit.editor.ui.EditorView
        android:id="@+id/editor_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!-- Then add controls: -->
    <io.video.videokit.editor.ui.controls.EditorControls
        android:id="@+id/editor_controls"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

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

val editorView: EditorView = findViewById(R.id.editor_view)
val editorControls: EditorControls = findViewById(R.id.editor_controls)
editorControls.setEditor(editorView)

Customizing controls

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

API	XML Attribute	Description	Default
showErrors	app:editorControlsShowErrors	If true, a toast is shown whenever we detect an error.	true
showPlay	app:editorControlsShowPlay	If true, a play / pause button will be shown.	true
playDrawable	app:editorControlsPlayDrawable	Controls the drawable for the playing state. Set to @empty to avoid showing a drawable at all.	-
pauseDrawable	app:editorControlsPauseDrawable	Controls the drawable for the paused state. Set to @empty to avoid showing a drawable at all.	-
showProgress	app:editorControlsShowProgress	If true, a rotating progress bar will be shown in the FINALIZING state.	true
progressDrawable	app:editorControlsProgressDrawable	Controls the drawable for the progress bar.	-
showImport	app:editorControlsShowImport	If true, a button to import videos from gallery will be shown.	true
importDrawable	app:editorControlsImportDrawable	Controls the drawable for the import from gallery icon.	-
showAbort	app:editorControlsShowAbort	If true, shows an abort button in the PREVIEW state, which will call editor.abort().	true
showConfirm	app:editorControlsShowConfirm	If true, shows a confirm button in the PREVIEW state, which will call editor.confirm().	true
showKeepChanges	app:editorControlsShowKeepChanges	If true, shows an icon in the EDITING state which will call editor.unselectSegment(keepChanges = true).	true
showDiscardChanges	app:editorControlsShowDiscardChanges	If true, shows an icon in the EDITING state which will call editor.unselectSegment(keepChanges = false).	true
keepChangesDrawable	app:editorControlsKeepChangesDrawable	Controls the drawable for the keep changes icon.	-
discardChangesDrawable	app:editorControlsDiscardChangesDrawable	Controls the drawable for the discard changes icon.	-
showTrimmer	app:editorControlsShowTrimmer	If true, shows the video trimmer in the EDITING state, which gives control over the video trimming, displays video thumbnails and playback progress in the same piece of UI.	true
showSegments	app:editorControlsShowSegments	If true, shows an horizontal bar in the PREVIEW state which displays a thumbnail for each segment, with the ability to rearrange them with drag and drop. When clicked, the segment will become selected.	true
showRemoveSegment	app:editorControlsShowRemoveSegment	If true, the segment thumbnails described above will have a remove icon which will remove that specific segment from the editor.	true

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