Search Docs
Loading...
Skip to content

Overlay

In this example, we will show you how to make overlay configurations for the mobile editor.

Explore a full code sample on GitHub.

Configuration#

There are situations when you want to create UI that is drawn over the editor (a.k.a Overlay). 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 to show your own loading dialog when the editor is being loaded upon opening it.

  1. Add a new mutable compose state isLoading.
  2. Update it in the onCreate callback. As the state is updated, the updated state is received in the composable callback of overlay EditorComponent to be rendered.
  3. Render your own loading. In this example, tapping on the button of the loading dialog closes the dialog and the editor.

Full Code#

Here’s the full code:

import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.window.DialogProperties
import androidx.navigation.NavHostController
import ly.img.editor.Editor
import ly.img.editor.core.component.EditorComponent
import ly.img.editor.core.component.remember
import ly.img.editor.core.configuration.EditorConfiguration
import ly.img.editor.core.configuration.remember
import ly.img.editor.core.event.EditorEvent
import ly.img.engine.DesignBlockType


// Add this composable to your NavHost
@Composable
fun OverlayEditorSolution(navController: NavHostController) {
    var isLoading by remember { mutableStateOf(false) }
    Editor(
        license = null, // pass null or empty for evaluation mode with watermark
        configuration = {
            EditorConfiguration.remember {
                onCreate = {
                    isLoading = true
                    try {
                        val scene = editorContext.engine.scene.create()
                        val page = editorContext.engine.block.create(DesignBlockType.Page)
                        editorContext.engine.block.setWidth(block = page, value = 1080F)
                        editorContext.engine.block.setHeight(block = page, value = 1080F)
                        editorContext.engine.block.appendChild(parent = scene, child = page)
                    } finally {
                        isLoading = false
                    }
                }
                overlay = {
                    EditorComponent.remember {
                        decoration = {
                            if (isLoading) {
                                AlertDialog(
                                    onDismissRequest = { },
                                    title = {
                                        Text(text = "Please wait. If you want to close the editor, click the button.")
                                    },
                                    confirmButton = {
                                        TextButton(
                                            onClick = {
                                                isLoading = false
                                                editorContext.eventHandler.send(EditorEvent.CloseEditor())
                                            },
                                        ) {
                                            Text(text = "Close Editor")
                                        }
                                    },
                                    properties = DialogProperties(dismissOnBackPress = false, dismissOnClickOutside = false),
                                )
                            }
                        }
                    }
                }
            }
        },
    ) {
        // You can set result here
        navController.popBackStack()
    }
}