Stickers
The PhotoEditor 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 theres/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:
// Add AssetssettingsList.config.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(AbstractIdItem...)
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:
- The resource identifier of the sticker name. Will not be displayed in the default layout but, is used for accessibility
- A drawable resource or ImageSource of the icon
- A list of
ImageStickerItem
objects
settingsList.configure<UiConfigSticker> {it.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 personal stickers#
There is an option for the user to browse the gallery to add their own image as s sticker. To add this option icon to the sticker category panel, all you have to do is add a 'PersonalStickerAddItem' to the sticker list.
public class MyConfig {public void addStickerCategories(SettingsList settingsList) {settingsList.getSettingsModel(UiConfigSticker.class).setStickerLists(new PersonalStickerAddItem(), // The element to select an image from the galleryStickerPackEmoticons.getStickerCategory(),StickerPackShapes.getStickerCategory());}// ...}
Adding Smart Stickers#
There are currently 6 predefined smart stickers available with the SmartStickerPack.
- Weekday
- Date
- Time
- Time Clock
- Weather Cloud (Requires a WeatherProvider)
- 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(StickerPackEmoticons.getStickerCategory(), // Contains Smart StickersSmartStickerPack.getStickerCategory(settingsList, null) // Adds Smart Stickers separately);}// ...}
Background removal#
Remove background
sticker action is available for any of the (non-animated) personal stickers where a clear background can be detected.
To enable background removal, follow our guide here.
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 {@Overridepublic 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);}//...}
Adding GIPHY#
PhotoEditor SDK allows a seamless integration with the GIPHY Stickers API.
In order to add GIPHY stickers, start with a default SettingsList
as described in the configuration section. Then use the setStickerLists(GiphyStickerCategoryItem...)
object. It represents a single GIPHY sticker category and expects the following optional parameters:
- The resource identifier of the sticker name. Will not be displayed in the default layout but, is used for accessibility
- A drawable resource or ImageSource of the icon
settingsList.configure<UiConfigSticker> {it.setStickerLists(GiphyStickerCategoryItem()))}
The GiphyStickerCategoryItem
expects a GiphySettings
class for its config and takes the following parameters:
- Mandatory API key obtained from GIPHY.
- You can also provide optional
language
andrating
parameters to customize search results with respect to the localization and content rating of your app.
settingsList.configure<GiphySettings> {it.apiKey = "YOUR_API_KEY"it.language = "en"it.rating = "g"}
This category item is searchable, while the search bar and pagination is provided by PhotoEditor SDK.
If no search has been performed the trending API will be used to provide a quick access to the most relevant content, ready to be inserted into the canvas.
For more information about GIPHY see their API Quickstart Guide.
Adding Custom Stickers#
You can also implement your own integration with GIPHY (or other) API. To do so, override the following classes to create your own custom implementation:
CustomStickerCategoryItem
see GiphyStickerCategoryItem
for reference
ImglySettings
see GiphySettings
for reference
CustomStickersFragment
see GiphyStickerFragment
for reference
CustomStickersFragment
holds reference to [CustomStickerSelectedListener
] interface which is used to communicate between your custom UI and tool panel to load the sticker.
stickerSelectedListener.onStickerSelected(imageSource: ImageSource)