Configure UI Events

In this example, we will show you how to make UI events configurations for the mobile editor. The example is based on the Design Editor, however, it is exactly the same for all the other solutions.

Explore a full code sample on GitHub.

View on GitHub

Configuration#

When working with the callbacks, you may want to make UI updates before, during, or after the callback execution. This is when UI events come to help. All the callbacks receive an extra parameter EditorEventHandler, which can be used to send editor events. By default, there are existing ui events, which can be found in Events.kt file (i.e. ShowLoading, HideLoading etc).

You may want to declare your own custom event. Simply inherit from class EditorEvent.

After declaring the event, you can send the UI event using send function. Note that EditorEventHandler has another function called sendCloseEditorEvent, which can be used to forcefully close the mobile editor.

Once the event is sent, it can be captured in EditorConfiguration.onEvent. The lambda contains three parameters: activity, state and of course, the captured event. In this example, the editor state is of default type EditorUiState (initially provided in initialState), however, you can have your own state class that wraps the EditorUiState or does not contain EditorUiState at all. The only requirement is that it should be Parcelable. The lambda should return the updated state, which, if changed, will trigger overlay composable to be recomposed and the overlaying ui components will be updated.

To handle your brand new custom event, simply check the type of the event and handle it per your needs.

Besides, you can override the behavior of existing events too. Simply extend your when block and override the behavior.

If you want to leave the behavior of remaining default events unchanged, simply return the result of EditorDefaults.onEvent in the else block.


import android.widget.Toast
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.navigation.NavHostController
import ly.img.editor.DesignEditor
import ly.img.editor.EditorConfiguration
import ly.img.editor.EditorDefaults
import ly.img.editor.EditorUiState
import ly.img.editor.EngineConfiguration
import ly.img.editor.ShowLoading
import ly.img.editor.core.event.EditorEvent

data object OnCreateCustomEvent : EditorEvent

// Add this composable to your NavHost
@Composable
fun UiEventsEditorSolution(navController: NavHostController) {
    val engineConfiguration =
        remember {
            EngineConfiguration(
                license = "<your license here>",
                onCreate = { engine, eventHandler ->
                    EditorDefaults.onCreate(
                        engine = engine,
                        sceneUri = EngineConfiguration.defaultDesignSceneUri,
                        eventHandler = eventHandler,
                    )
                    eventHandler.send(OnCreateCustomEvent)
                },
            )
        }
    val editorConfiguration =
        EditorConfiguration(
            initialState = EditorUiState(),
            onEvent = { activity, state, event ->
                when (event) {
                    OnCreateCustomEvent -> {
                        Toast.makeText(activity, "Editor is created!", Toast.LENGTH_SHORT).show()
                        state
                    }
                    ShowLoading -> {
                        state.copy(showLoading = true)
                    }
                    else -> {
                        // handle other default events
                        EditorDefaults.onEvent(activity, state, event)
                    }
                }
            },
        )
    DesignEditor(
        engineConfiguration = engineConfiguration,
        editorConfiguration = editorConfiguration,
    ) {
        // You can set result here
        navController.popBackStack()
    }
}