Present Photo Editor using Jetpack Compose

Register Contract#

The PhotoEditorActivityResultContract extends from ActivityResultContract. It is used to start the photo editor and handle its result. It parses the result into EditorSDKResult that provides a convenient API to check the status of the export.

Create SettingsList#

The PhotoEditorSettingsList stores all the settings that are used to configure the photo editor and its tools. The configure() method is used to configure the different ImglySettings models inside the SettingsList. Here, we configure the LoadSettings to set the source to the Uri of the photo to be loaded.

Start Editor#

The ActivityResultLauncher obtained from registering the PhotoEditorActivityResultContract is used to launch the photo editor with the configured PhotoEditorSettingsList.


class PhotoEditorComposeActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val editorLauncher = rememberLauncherForActivityResult(
                contract = PhotoEditorActivityResultContract(),
                onResult = { result ->
                    when (result.resultStatus) {
                        EditorSDKResult.Status.CANCELED -> showMessage("Editor cancelled")
                        EditorSDKResult.Status.EXPORT_DONE -> showMessage("Result saved at ${result.resultUri}")
                        else -> {
                        }
                    }
                }
            )

            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Button(
                    onClick = {
                        // In this example, we do not need access to the Uri(s) after the editor is closed
                        // so we pass false in the constructor
                        val settingsList = PhotoEditorSettingsList(false)
                            .configure<LoadSettings> {
                                // Set the source as the Uri of the image to be loaded
                                it.source = resourceUri(R.drawable.la)
                            }
                        editorLauncher.launch(settingsList)
                        // Release the SettingsList once done
                        settingsList.release()
                    },
                    shape = MaterialTheme.shapes.medium,
                ) {
                    Text(text = "Start", color = Color.White)
                }
            }
        }
    }
}