UI Controls

Regardless of the Recorder implementation that you are using, the user must be presented with UI controls to control the recorder behavior.

To avoid increasing the binary size, and since no UI can possibly adapt to all apps, the SDK comes with no built-in UI. Instead, you can check our integration samples on GitHub, which include UI components that you can freely reuse in your app.

We also explain below how to add overlays depending on the type of component that you chose.

With fragments

If you are using RecorderFragment (see docs), you have the option to pass an overlay layout resource that contains your UI through RecorderFragment.Options:

val options = RecorderFragment.Options.build {
    overlay(R.layout.recorder_overlay) // customize overlays
    overlay(null) // no overlays
}

Note that by default, the overlay() layout is empty. In addition, fragments can be stacked so you are free to put, for example, another fragment on top of RecorderFragment with your UI controls.

With views

When using the RecorderView implementation, the controls can be added to your view hierarchy as an overlay to the recorder. For example, you could use 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: -->
    <com.example.MyRecorderControls
        android:id="@+id/recorder_controls"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

In Jetpack Compose

With Compose, you can use the equivalent of a frame layout, called Box():

@Composable fun RecorderWithOverlays(modifier: Modifier = Modifier) {
    val recorder = rememberRecorder()
    Box(modifier) {
        Recorder(recorder, modifier = Modifier.fillMaxSize())
        MyRecorderControls(recorder, modifier = Modifier.fillMaxSize())
    }
}

@Composable fun MyRecorderControls(recorder: DefaultRecorder, modifier: Modifier) {
    ...
}