Configure Overlay

In this example, we will show you how to make overlay 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 UI events, you may want to update the UI that is drawn over the editor (a.k.a Overlay) upon receiving events. A great example would be showing a loading indicator when the editor is being loaded or showing a custom dialog asking for export configurations when your customer taps on the Export button. This is when overlay configuration comes to help. In this example, we are going to demonstrate how upon capturing show/hide loading events you can render your own loading dialog.

The default EditorUiState already contains showLoading property that is responsible for drawing an overlaying loading. Although we can use the same property, let's create our own state class in order to demonstrate how the default state can be wrapped and extended. The only requirement of the state class is that it has to be Parcelable.

By default, both onCreate and onExport callbacks send ShowLoading and HideLoading UI events. All we have to do is capture these events and override the default behavior. Similar to the UI events guide, the events are captured and an updated state is returned. Note that instead of updating the EditorUiState.showLoading property we update the property of the brand new state: OverlayCustomState.showCustomLoading.

As the state is updated, the updated state is received in the overlay composable callback to be rendered. Finally, we can render our custom loading dialog and render remaining default overlay components via EditorDefaults.Overlay composable function. Note that the callback receives EditorEventHandler object too in case your composable component requires UI interaction. In this example, tapping on the confirm button of the loading dialog closes the dialog and the editor.

Note that the overlay is edge-to-edge, therefore it is your responsibility to draw over system bars too.


import android.os.Parcel
import android.os.Parcelable
import ly.img.editor.EditorUiState

data class OverlayCustomState(
    // hide default loading so we can use custom loading
    val baseState: EditorUiState = EditorUiState(showLoading = false),
    val showCustomLoading: Boolean = true,
) : Parcelable {
    constructor(parcel: Parcel) : this(
        baseState = parcel.readParcelable(EditorUiState::class.java.classLoader)!!,
        showCustomLoading = parcel.readByte() != 0.toByte(),
    ) {
    }

    override fun writeToParcel(
        parcel: Parcel,
        flags: Int,
    ) {
        parcel.writeParcelable(baseState, flags)
        parcel.writeByte(if (showCustomLoading) 1 else 0)
    }

    override fun describeContents() = 0

    companion object CREATOR : Parcelable.Creator<OverlayCustomState> {
        override fun createFromParcel(parcel: Parcel): OverlayCustomState {
            return OverlayCustomState(parcel)
        }

        override fun newArray(size: Int): Array<OverlayCustomState?> {
            return arrayOfNulls(size)
        }
    }
}