Annotations

While there is no dedicated tool for annotations, VideoEditor SDK can easily be configured to include the features necessary for a powerful yet simple-to-use video annotation tool. To this end we only enable features that are useful to annotate objects in a video:

brush tool for flexible marking and colored highlights
sticker tool for including shapes such as arrows, tags or badges
text tool to provide information around annotation markers

Since we only want to include the three above mention tools, we create their respective menu items using the ToolItem API.

Stickers#

We want to omit stickers that are not annotation specific, but rather add shapes such as arrows, tags or badges. To that end, we create ImageStickerItems from local drawable resources that are included as part of the assets:sticker-shapes module. Those stickers are then added to a category so we can meaningful name and group them in the editor UI. Consult the sticker configuration section for more details.

Configuration#

Finally, we configure the VideoEditorSettingsList to include the previously defined stickers and to only display the menu items of the annotation tools.


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

    override fun invoke() {

        // For this example only the sticker, text, and brush tool are enabled
        val toolList = arrayListOf(
            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(
                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)
            )
        )

        // For this example only stickers suitable for annotations are enabled
        val annotationStickers = listOf(
            ImageStickerItem(
                "imgly_sticker_shapes_arrow_02",
                ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_arrow_02,
                ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_arrow_02)
            ),
            ImageStickerItem(
                "imgly_sticker_shapes_arrow_03",
                ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_arrow_03,
                ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_arrow_03)
            ),
            ImageStickerItem(
                "imgly_sticker_shapes_badge_11",
                ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_badge_11,
                ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_badge_11)
            ),
            ImageStickerItem(
                "imgly_sticker_shapes_badge_12",
                ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_badge_12,
                ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_badge_12)
            ),
            ImageStickerItem(
                "imgly_sticker_shapes_badge_36",
                ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_badge_36,
                ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_badge_36)
            )
        )

        // Create a custom sticker category for the annotation stickers
        val annotationStickersCategory = StickerCategoryItem(
            "annotation_stickers",
            "Annotation",
            ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_arrow_02),
            annotationStickers
        )

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

        settingsList.configure<UiConfigMainMenu> {
            // Set custom tool list
            it.setToolList(toolList)
        }.configure<UiConfigSticker> {
            // Set custom sticker list
            it.setStickerLists(annotationStickersCategory)
        }

        // 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) {
            val result = EditorSDKResult(intent)
            when (result.resultStatus) {
                EditorSDKResult.Status.CANCELED -> showMessage("Editor cancelled")
                EditorSDKResult.Status.EXPORT_DONE -> showMessage("Result saved at ${result.resultUri}")
                else -> {
                }
            }
        }
    }
}

Annotations

Configuring menu items#

Stickers#

Configuration#