Skip to main content
Version: 1.2.0

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.

APIXML AttributeDescriptionDefault
showErrorsapp:editorControlsShowErrorsIf true, a toast is shown whenever we detect an error.true
showPlayapp:editorControlsShowPlayIf true, a play / pause button will be shown.true
playDrawableapp:editorControlsPlayDrawableControls the drawable for the playing state. Set to @empty to avoid showing a drawable at all.-
pauseDrawableapp:editorControlsPauseDrawableControls the drawable for the paused state. Set to @empty to avoid showing a drawable at all.-
showProgressapp:editorControlsShowProgressIf true, a rotating progress bar will be shown in the FINALIZING state.true
progressDrawableapp:editorControlsProgressDrawableControls the drawable for the progress bar.-
showImportapp:editorControlsShowImportIf true, a button to import videos from gallery will be shown.true
importDrawableapp:editorControlsImportDrawableControls the drawable for the import from gallery icon.-
showAbortapp:editorControlsShowAbortIf true, shows an abort button in the PREVIEW state, which will call editor.abort().true
showConfirmapp:editorControlsShowConfirmIf true, shows a confirm button in the PREVIEW state, which will call editor.confirm().true
showKeepChangesapp:editorControlsShowKeepChangesIf true, shows an icon in the EDITING state which will call editor.unselectSegment(keepChanges = true).true
showDiscardChangesapp:editorControlsShowDiscardChangesIf true, shows an icon in the EDITING state which will call editor.unselectSegment(keepChanges = false).true
keepChangesDrawableapp:editorControlsKeepChangesDrawableControls the drawable for the keep changes icon.-
discardChangesDrawableapp:editorControlsDiscardChangesDrawableControls the drawable for the discard changes icon.-
showTrimmerapp:editorControlsShowTrimmerIf 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
showSegmentsapp:editorControlsShowSegmentsIf 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
showRemoveSegmentapp:editorControlsShowRemoveSegmentIf 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.

Last updated on