Configure Stickers

VideoEditor SDK supports several configuration options for the StickerToolPanel allowing flexible adaptation to different needs and use cases.

Personal stickers#

The default configuration does not allow users to add custom stickers. In this example, we enable users to add stickers from the device's gallery.

Weather smart stickers#

By default, the editor provides a variety of different stickers when the assets:sticker-shapes and assets:sticker-emoticons modules are included in your project. Including backend:sticker-smart module also adds some smart stickers.

Here, we also want to include weather smart stickers. For this, we provide our implementation of WeatherProvider.

Custom stickers#

Here, we add a CustomStickerCategoryItem that shows your own Fragment when the category is selected. This allows you to fully customize the UI according to your needs. For this example, we have created an ExampleStickersFragment that adds a sticker to the canvas when a button is clicked.

Dynamic smart stickers#

Here, we add a MetadataImageStickerItem that shows your own DialogFragment when the sticker is selected. This allows you to construct the metadata that is needed for your dynamic smart sticker while fully customizing the UI according to your needs.

For this example, we have created an ExampleMetadataFragment that takes text input from the user and passes it as part of the metadata. The ExampleSmartLinkTextSticker takes this metadata to render its content.

Set available tools#

By default, all available sticker tools are enabled. In our example, we only allow replacing stickers and changing the color and duration.

Set available colors#

By default, the editor provides a variety of different colors to customize the color of the sticker. For this example, only a small selection of colors is shown by default.


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

    override fun invoke() {
        // 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)
            }

        settingsList.configure<UiConfigSticker> {
            it.setStickerLists(
                PersonalStickerAddItem(),
                StickerPackShapes.getStickerCategory(),
                // Sticker category with emoticons and all smart stickers
                // Alternatively, you can use SmartStickerPack.getStickerCategory(settingsList, TestWeatherProvider::class.java)
                // to get only the smart stickers category
                StickerPackEmoticons.getStickerCategory(settingsList, TestWeatherProvider::class.java),
                CustomStickerCategoryItem(
                    "custom_sticker_category",
                    ExampleStickersFragment::class.java,
                    "Custom Stickers",
                    ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_hitman)
                ),
                StickerCategoryItem(
                    "custom_smart_sticker_category",
                    "Custom",
                    ImageSource.create(SmartLinkTextSticker0::class.java),
                    MetadataImageStickerItem(
                        "imgly_smart_sticker_custom_text",
                        ExampleMetadataFragment::class.java,
                        "Custom Link Text",
                        ImageSource.create(SmartLinkTextSticker0::class.java)
                    )
                )
            )

            // Add the asset for our custom smart sticker to the AssetConfig
            settingsList.config.addAsset(
                MultiImageStickerAsset(
                    id = "imgly_smart_sticker_custom_text", stickerAssets = arrayListOf(
                        ImageStickerAsset("imgly_smart_sticker_custom_text_0", ImageSource.create(SmartLinkTextSticker0::class.java)),
                        ImageStickerAsset("imgly_smart_sticker_custom_text_1", ImageSource.create(SmartLinkTextSticker1::class.java))
                    )
                )
            )

            // By default all available sticker tools are enabled
            // For this example only a couple are enabled
            it.optionList.set(it.optionList.filter { item ->
                item.id == StickerOptionToolPanel.OPTION_REPLACE
                    || item.id == StickerOptionToolPanel.OPTION_COLOR_COLORIZED
                    || item.id == StickerOptionToolPanel.OPTION_DURATION
            })

            // By default the editor provides a variety of different colors to customize the color of the sticker
            // For this example only a small selection of colors is shown
            it.setStickerColorList(
                ColorItem(ly.img.android.pesdk.ui.R.string.pesdk_common_title_whiteColor, ColorAsset(-0x1)),
                ColorItem(ly.img.android.pesdk.ui.R.string.pesdk_common_title_blackColor, ColorAsset(-0x1000000))
            )
        }

        // 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?) {
        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 -> {
                }
            }
        }
    }
}