Annotations

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

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 PhotoEditorSettingsList to include the previously defined stickers and to only display the menu items of the annotation tools.


class PhotoAnnotation(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 = PhotoEditorSettingsList(false)
            .configure<LoadSettings> {
                // Set the source as the Uri of the image to be loaded
                it.source = activity.resourceUri(R.drawable.la)
            }

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

        // Start the photo editor using PhotoEditorBuilder
        // The result will be obtained in onActivityResult() corresponding to EDITOR_REQUEST_CODE
        PhotoEditorBuilder(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#