Docs
API Docs

Stickers

Stickers tool

The VideoEditor SDK comes with a predefined set of stickers, which you can examine in our demo app. You can download the app from the Play Store or clone from the demo repository.

The backend settings of each sticker is implemented in the ImageStickerLayerSettings class and displayed using the StickerToolPanel. If you want to customize the appearance of this tool, take a look at the customization section.

Managing sticker assets

Please make sure you put the PNG files into the res/raw or the res/drawable-nodpi folder, otherwise the sticker is scaled by Android what ends up in memory problems and slow performance.

The list of ImageStickerAsset objects represents the stickers that are available for rendering.

A sticker configuration could then look like this:

// Obtain the asset config from you settingsList
AssetConfig assetConfig = settingsList.getConfig();
// Add Assets
assetConfig.addAsset(
  new ImageStickerAsset(
    "stickerAssetId1",
    ImageSource.create(R.drawable.imgly_sticker_emoticons_alien)
  ),
  new ImageStickerAsset(
    "stickerAssetId2",
    ImageSource.create(R.drawable.imgly_sticker_emoticons_nerd)
  ),
  new ImageStickerAsset(
    "stickerAssetId4",
    R.drawable.imgly_sticker_shapes_arrow_02,
    ImageStickerAsset.OPTION_MODE.TINT_STICKER
  ),
  new ImageStickerAsset(
    "stickerAssetId5",
    R.drawable.imgly_sticker_emoticons_angel,
    ImageStickerAsset.OPTION_MODE.INK_STICKER
  ),
  new ImageStickerAsset(
    "stickerAssetId6",
    ImageSource.create(Uri.parse("https://content.mydomain/stickers/glasses.png"))
  ),
  new ImageStickerAsset(
    "stickerAssetId7",
    ImageSource.create(Uri.parse("https://content.mydomain/stickers/glasses-vector.xml"))
  ),
  new ImageStickerAsset(
    "stickerAssetId8",
    ImageSource.create(Uri.fromFile(new File("path_to_sticker_folder", "sticker_name.png")))
  )
);
// Add Assets
settingsList.config.apply {
    addAsset(
        ImageStickerAsset(
            "stickerAssetId1",
            ImageSource.create(R.drawable.imgly_sticker_emoticons_alien)
        ),
        ImageStickerAsset(
            "stickerAssetId2",
            ImageSource.create(R.drawable.imgly_sticker_emoticons_nerd)
        ),
        ImageStickerAsset(
            "stickerAssetId4",
            R.drawable.imgly_sticker_shapes_arrow_02,
            ImageStickerAsset.OPTION_MODE.TINT_STICKER
        ),
        ImageStickerAsset(
            "stickerAssetId5",
            R.drawable.imgly_sticker_emoticons_angel,
            ImageStickerAsset.OPTION_MODE.INK_STICKER
        ),
        ImageStickerAsset(
            "stickerAssetId6",
            ImageSource.create(Uri.parse("https://content.mydomain/stickers/glasses.png"))
        ),
        ImageStickerAsset(
            "stickerAssetId7",
            ImageSource.create(Uri.parse("https://content.mydomain/stickers/glasses-vector.xml"))
        ),
        ImageStickerAsset(
            "stickerAssetId8",
            ImageSource.create(Uri.fromFile(File("path_to_sticker_folder", "sticker_name.png")))
        )
    )
}

Adding sticker items to the UI

In order to change the available stickers or add new stickers, start with a default SettingsList as described in the configuration section. Then use the setStickerList(StickerCategoryItem...) method to update the configuration. The stickers are partitioned into categories, therefore the AssetConfig expects a list of StickerCategoryItem objects. Each of these objects represents a single sticker category and takes three parameters:

  1. The resource identifier of the sticker name. Will not be displayed in the default layout but, is used for accessibility
  2. A drawable resource or ImageSource of the icon
  3. A list of ImageStickerItem objects
UiConfigSticker uiConfigSticker = settingsList.getSettingsModel(UiConfigSticker.class);
uiConfigSticker.setStickerLists(
  new StickerCategoryItem(
    "myUniqStickerCategoryId1",
    R.string.imgly_sticker_category_name_emoticons,
    ImageSource.create(R.drawable.imgly_sticker_emoticons_alien),
    new ImageStickerItem("imgly_sticker_emoticons_grin", ly.img.android.pesdk.assets.sticker.emoticons.R.string.imgly_sticker_name_emoticons_grin, ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_grin)),
    new ImageStickerItem("imgly_sticker_emoticons_laugh", ly.img.android.pesdk.assets.sticker.emoticons.R.string.imgly_sticker_name_emoticons_laugh, ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_laugh)),
    new ImageStickerItem("imgly_sticker_emoticons_smile", ly.img.android.pesdk.assets.sticker.emoticons.R.string.imgly_sticker_name_emoticons_smile, ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_smile)),
    new ImageStickerItem("imgly_sticker_emoticons_wink", ly.img.android.pesdk.assets.sticker.emoticons.R.string.imgly_sticker_name_emoticons_wink, ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_wink)),
    new ImageStickerItem("imgly_sticker_emoticons_tongue_out_wink", ly.img.android.pesdk.assets.sticker.emoticons.R.string.imgly_sticker_name_emoticons_tongue_out_wink, ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_tongue_out_wink)),
    new ImageStickerItem("imgly_sticker_emoticons_angel", ly.img.android.pesdk.assets.sticker.emoticons.R.string.imgly_sticker_name_emoticons_angel, ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_angel))
    //...
  ),
  new StickerCategoryItem(
    "myUniqStickerCategoryId2",
    R.string.imgly_sticker_category_name_shapes,
    ImageSource.create(R.drawable.imgly_sticker_shapes_badge_35),
    new ImageStickerItem("imgly_sticker_shapes_badge_01", ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_badge_01, ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_badge_01)),
    new ImageStickerItem("imgly_sticker_shapes_badge_04", ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_badge_04, ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_badge_04)),
    new 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)),
    new ImageStickerItem("imgly_sticker_shapes_badge_06", ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_badge_06, ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_badge_06)),
    new ImageStickerItem("imgly_sticker_shapes_badge_13", ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_badge_13, ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_badge_13))
    //...
  )
);
settingsList.getSettingsModel(UiConfigSticker::class.java).apply {
    setStickerLists(
        StickerCategoryItem(
            "myUniqStickerCategoryId1",
            R.string.imgly_sticker_category_name_emoticons,
            ImageSource.create(R.drawable.imgly_sticker_emoticons_alien),
            ImageStickerItem("imgly_sticker_emoticons_grin", ly.img.android.pesdk.assets.sticker.emoticons.R.string.imgly_sticker_name_emoticons_grin, ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_grin)),
            ImageStickerItem("imgly_sticker_emoticons_laugh", ly.img.android.pesdk.assets.sticker.emoticons.R.string.imgly_sticker_name_emoticons_laugh, ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_laugh)),
            ImageStickerItem("imgly_sticker_emoticons_smile", ly.img.android.pesdk.assets.sticker.emoticons.R.string.imgly_sticker_name_emoticons_smile, ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_smile)),
            ImageStickerItem("imgly_sticker_emoticons_wink", ly.img.android.pesdk.assets.sticker.emoticons.R.string.imgly_sticker_name_emoticons_wink, ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_wink)),
            ImageStickerItem("imgly_sticker_emoticons_tongue_out_wink", ly.img.android.pesdk.assets.sticker.emoticons.R.string.imgly_sticker_name_emoticons_tongue_out_wink, ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_tongue_out_wink)),
            ImageStickerItem("imgly_sticker_emoticons_angel", ly.img.android.pesdk.assets.sticker.emoticons.R.string.imgly_sticker_name_emoticons_angel, ImageSource.create(ly.img.android.pesdk.assets.sticker.emoticons.R.drawable.imgly_sticker_emoticons_angel))
            //...
        ),
        StickerCategoryItem(
            "myUniqStickerCategoryId2",
            R.string.imgly_sticker_category_name_shapes,
            ImageSource.create(R.drawable.imgly_sticker_shapes_badge_35),
            ImageStickerItem("imgly_sticker_shapes_badge_01", ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_badge_01, ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_badge_01)),
            ImageStickerItem("imgly_sticker_shapes_badge_04", ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_badge_04, ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_badge_04)),
            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_06", ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_badge_06, ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_badge_06)),
            ImageStickerItem("imgly_sticker_shapes_badge_13", ly.img.android.pesdk.assets.sticker.shapes.R.string.imgly_sticker_name_shapes_badge_13, ImageSource.create(ly.img.android.pesdk.assets.sticker.shapes.R.drawable.imgly_sticker_shapes_badge_13))
            //...
        )
    )
}

Adding Smart Stickers

There are currently 6 predefined smart stickers available with the SmartStickerPack.

  1. Weekday
  2. Date
  3. Time
  4. Time Clock
  5. Weather Cloud (Requires a WeatherProvider)
  6. Weather Thermostat (Requires a WeatherProvider)

The smart stickers are part of the StickerPackEmoticons sticker category if the ‘backend:sticker-smart’ module is included. To add all of the smart stickers you need a WeatherProvider and a SettingsList reference.

public class MyConfig {
    public void addSmartSticker(SettingsList settingsList) {
        settingsList.getSettingsModel(UiConfigSticker.class).setStickerLists(
          new PersonalStickerAddItem(),
          StickerPackEmoticons.getStickerCategory(), // Contains Smart Stickers
          StickerPackShapes.getStickerCategory(),
          SmartStickerPack.getStickerCategory(settingsList, null) // Adds Smart Stickers separately
        );
    }
    // ... 
}

Adding mandatory sticker

To set adding stickers on images as a mandatory step, the application has to check if a sticker has been added to an edited image. For this you can check the layer list. To achieve this effect, add a custom MyUiStateMenu and override UiStateMenu like this:

public class MyUiStateMenu extends UiStateMenu {
    @Override
    public void notifySaveClicked() {
        List<LayerListSettings.LayerSettings> layerList = getStateModel(LayerListSettings.class).getLayerSettingsList();
 
        boolean hasSticker = false;
 
        for (int i = 0; i < layerList.size(); i++) {
            if (layerList.get instanceof ImageStickerLayerSettings) { 
                hasSticker = true;
            }
        }
 
        if (hasSticker) { 
            super.notifySaveClicked();
        } else {
            Toast.makeText(PESDK.getAppContext(), "You have to add a sticker!", Toast.LENGTH_LONG).show();
        }
 
    }
}

Now you have to replace the old state class with the new one. You can do this in the MainActivity like this:

class MainActivity {
    static {
        StateHandler.replaceStateClass(UiStateMenu.class, MyUiStateMenu.class);
    }
    //...
}