Customize Menu Items

VideoEditor SDK supports full control over the menu items used in the editor UI.

Create tools list#

By default, VideoEditor SDK automatically displays all the tools that are included in your license and are available on the runtime classpath.

Here, we first create a custom list of ToolItems that we want to be displayed in the video editor menu. Make sure to only include the tools that are included in your license.

Set tools list#

Here, we configure UiConfigMainMenu to set the custom tools list that we created above.


class VideoCustomizeMenuItems(private val activity: AppCompatActivity) : Example(activity) {

    override fun invoke() {
        val tools = listOf(
            ToolItem(
                VideoCompositionToolPanel.TOOL_ID,
                ly.img.android.pesdk.ui.video_composition.R.string.vesdk_video_composition_title_name,
                ImageSource.create(ly.img.android.pesdk.ui.R.drawable.imgly_icon_tool_video_composition)
            ),
            ToolItem(
                AudioOverlayOptionsToolPanel.TOOL_ID,
                ly.img.android.pesdk.ui.audio_composition.R.string.vesdk_audio_composition_title_name,
                ImageSource.create(ly.img.android.pesdk.ui.R.drawable.imgly_icon_tool_audio)
            ),
            ToolItem(
                TransformToolPanel.TOOL_ID,
                ly.img.android.pesdk.ui.transform.R.string.pesdk_transform_title_name,
                ImageSource.create(ly.img.android.pesdk.ui.R.drawable.imgly_icon_tool_transform)
            ),
            ToolItem(
                FilterToolPanel.TOOL_ID,
                ly.img.android.pesdk.ui.filter.R.string.pesdk_filter_title_name,
                ImageSource.create(ly.img.android.pesdk.ui.R.drawable.imgly_icon_tool_filters)
            ),
            ToolItem(
                AdjustmentToolPanel.TOOL_ID,
                ly.img.android.pesdk.ui.adjustment.R.string.pesdk_adjustments_title_name,
                ImageSource.create(ly.img.android.pesdk.ui.R.drawable.imgly_icon_tool_adjust)
            ),
            ToolItem(
                FocusToolPanel.TOOL_ID,
                ly.img.android.pesdk.ui.focus.R.string.pesdk_focus_title_name,
                ImageSource.create(ly.img.android.pesdk.ui.R.drawable.imgly_icon_tool_focus)
            ),
            ToolItem(
                StickerToolPanel.TOOL_ID,
                ly.img.android.pesdk.ui.sticker.R.string.pesdk_sticker_title_name,
                ImageSource.create(ly.img.android.pesdk.ui.R.drawable.imgly_icon_tool_sticker)
            ),
            ToolItem(
                TextToolPanel.TOOL_ID,
                ly.img.android.pesdk.ui.text.R.string.pesdk_text_title_name,
                ImageSource.create(ly.img.android.pesdk.ui.R.drawable.imgly_icon_tool_text)
            ),
            ToolItem(
                TextDesignToolPanel.TOOL_ID,
                ly.img.android.pesdk.ui.text_design.R.string.pesdk_textDesign_title_name,
                ImageSource.create(ly.img.android.pesdk.ui.R.drawable.imgly_icon_tool_text_design)
            ),
            ToolItem(
                OverlayToolPanel.TOOL_ID,
                ly.img.android.pesdk.ui.overlay.R.string.pesdk_overlay_title_name,
                ImageSource.create(ly.img.android.pesdk.ui.R.drawable.imgly_icon_tool_overlay)
            ),
            ToolItem(
                FrameOptionToolPanel.TOOL_ID,
                ly.img.android.pesdk.ui.frame.R.string.pesdk_frame_title_name,
                ImageSource.create(ly.img.android.pesdk.ui.R.drawable.imgly_icon_tool_frame)
            ),
            ToolItem(
                BrushToolPanel.TOOL_ID,
                ly.img.android.pesdk.ui.brush.R.string.pesdk_brush_title_name,
                ImageSource.create(ly.img.android.pesdk.ui.R.drawable.imgly_icon_tool_brush)
            )
        ).sortedBy { it.name }

        // 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 = VideoEditorSettingsList(false)
            // Set the source as the Uri of the video to be loaded
            .configure<LoadSettings> {
                it.source = activity.resourceUri(R.raw.skater)
            }
            .configure<UiConfigMainMenu> {
                it.setToolList(ArrayList(tools))
            }

        // Start the video editor using VideoEditorBuilder
        // The result will be obtained in onActivityResult() corresponding to EDITOR_REQUEST_CODE
        VideoEditorBuilder(activity)
            .setSettingsList(settingsList)
            .startActivityForResult(activity, EDITOR_REQUEST_CODE)

        // Release the SettingsList once done
        settingsList.release()
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, intent: Intent?) {
        super.onActivityResult(requestCode, resultCode, intent)
        intent ?: return
        if (requestCode == EDITOR_REQUEST_CODE) {
            // Wrap the intent into an EditorSDKResult
            val result = EditorSDKResult(intent)
            when (result.resultStatus) {
                EditorSDKResult.Status.CANCELED -> showMessage("Editor cancelled")
                EditorSDKResult.Status.EXPORT_DONE -> showMessage("Result saved at ${result.resultUri}")
                else -> {
                }
            }
        }
    }
}