Docs
API Docs

Text

Text tool

A picture says more than a thousand words, however sometimes it still takes a few more. The robust text feature of the PhotoEditor SDK provides all necessary functions for quickly adding text to any picture or creative. The corresponding font library can easily be exchanged, reduced, or expanded.

The backend settings for the Layer are implemented in the TextLayerSettings class and displayed using the TextToolPanel. If you want to customize the appearance of this tool, take a look at the styling section.

Adding and removing fonts

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

Editor Fonts

To add new fonts add they to the Assets

final String fontAssetsFolder = "fonts/";

ConfigMap<FontAsset> fontAssetMap = settingsList.getSettingsModel(AssetConfig.class).getAssetMap(FontAsset.class);
fontAssetMap.add(new FontAsset("imgly_font_open_sans_bold", fontAssetsFolder + "imgly_font_open_sans_bold.ttf"));
fontAssetMap.add(new FontAsset("imgly_font_aleo_bold", fontAssetsFolder + "imgly_font_aleo_bold.otf"));
fontAssetMap.add(new FontAsset("imgly_font_amaticsc", fontAssetsFolder + "imgly_font_amaticsc.ttf"));
fontAssetMap.add(new FontAsset("imgly_font_bernier_regular", fontAssetsFolder + "imgly_font_bernier_regular.otf"));
fontAssetMap.add(new FontAsset("imgly_font_blogger_sans_light", fontAssetsFolder + "imgly_font_blogger_sans_light.otf"));
fontAssetMap.add(new FontAsset("imgly_font_cheque_regular", fontAssetsFolder + "imgly_font_cheque_regular.otf"));
fontAssetMap.add(new FontAsset("imgly_font_compton_bold", fontAssetsFolder + "imgly_font_compton_bold.otf"));
fontAssetMap.add(new FontAsset("imgly_font_fira_sans_regular", fontAssetsFolder + "imgly_font_fira_sans_regular.ttf"));
fontAssetMap.add(new FontAsset("imgly_font_gagalin_regular", fontAssetsFolder + "imgly_font_gagalin_regular.otf"));
fontAssetMap.add(new FontAsset("imgly_font_hagin_caps_thin", fontAssetsFolder + "imgly_font_hagin_caps_thin.otf"));
fontAssetMap.add(new FontAsset("imgly_font_intro_inline", fontAssetsFolder + "imgly_font_intro_inline.otf"));
fontAssetMap.add(new FontAsset("imgly_font_lobster", fontAssetsFolder + "imgly_font_lobster.otf"));
fontAssetMap.add(new FontAsset("imgly_font_nexa_script", fontAssetsFolder + "imgly_font_nexa_script.otf"));
fontAssetMap.add(new FontAsset("imgly_font_ostrich_sans_black", fontAssetsFolder + "imgly_font_ostrich_sans_black.otf"));
fontAssetMap.add(new FontAsset("imgly_font_ostrich_sans_bold", fontAssetsFolder + "imgly_font_ostrich_sans_bold.otf"));
fontAssetMap.add(new FontAsset("imgly_font_oswald_semi_bold", fontAssetsFolder + "imgly_font_oswald_semi_bold.ttf"));
fontAssetMap.add(new FontAsset("imgly_font_panton_blackitalic_caps", fontAssetsFolder + "imgly_font_panton_blackitalic_caps.otf"));
fontAssetMap.add(new FontAsset("imgly_font_panton_lightitalic_caps", fontAssetsFolder + "imgly_font_panton_lightitalic_caps.otf"));
fontAssetMap.add(new FontAsset("imgly_font_perfograma", fontAssetsFolder + "imgly_font_perfograma.otf"));
fontAssetMap.add(new FontAsset("imgly_font_poppins", fontAssetsFolder + "imgly_font_poppins.ttf"));
fontAssetMap.add(new FontAsset("imgly_font_static_bold", fontAssetsFolder + "imgly_font_static_bold.otf"));
fontAssetMap.add(new FontAsset("imgly_font_summer_light", fontAssetsFolder + "imgly_font_summer_light.otf"));
fontAssetMap.add(new FontAsset("imgly_font_trash_hand", fontAssetsFolder + "imgly_font_trash_hand.ttf"));
val fontAssetsFolder = "fonts/"

settingsList.getSettingsModel(AssetConfig::class.java)!!.getAssetMap(FontAsset::class.java).apply {
    add(FontAsset("imgly_font_open_sans_bold", fontAssetsFolder + "imgly_font_open_sans_bold.ttf"))
    add(FontAsset("imgly_font_aleo_bold", fontAssetsFolder + "imgly_font_aleo_bold.otf"))
    add(FontAsset("imgly_font_amaticsc", fontAssetsFolder + "imgly_font_amaticsc.ttf"))
    add(FontAsset("imgly_font_bernier_regular", fontAssetsFolder + "imgly_font_bernier_regular.otf"))
    add(FontAsset("imgly_font_blogger_sans_light", fontAssetsFolder + "imgly_font_blogger_sans_light.otf"))
    add(FontAsset("imgly_font_cheque_regular", fontAssetsFolder + "imgly_font_cheque_regular.otf"))
    add(FontAsset("imgly_font_compton_bold", fontAssetsFolder + "imgly_font_compton_bold.otf"))
    add(FontAsset("imgly_font_fira_sans_regular", fontAssetsFolder + "imgly_font_fira_sans_regular.ttf"))
    add(FontAsset("imgly_font_gagalin_regular", fontAssetsFolder + "imgly_font_gagalin_regular.otf"))
    add(FontAsset("imgly_font_hagin_caps_thin", fontAssetsFolder + "imgly_font_hagin_caps_thin.otf"))
    add(FontAsset("imgly_font_intro_inline", fontAssetsFolder + "imgly_font_intro_inline.otf"))
    add(FontAsset("imgly_font_lobster", fontAssetsFolder + "imgly_font_lobster.otf"))
    add(FontAsset("imgly_font_nexa_script", fontAssetsFolder + "imgly_font_nexa_script.otf"))
    add(FontAsset("imgly_font_ostrich_sans_black", fontAssetsFolder + "imgly_font_ostrich_sans_black.otf"))
    add(FontAsset("imgly_font_ostrich_sans_bold", fontAssetsFolder + "imgly_font_ostrich_sans_bold.otf"))
    add(FontAsset("imgly_font_oswald_semi_bold", fontAssetsFolder + "imgly_font_oswald_semi_bold.ttf"))
    add(FontAsset("imgly_font_panton_blackitalic_caps", fontAssetsFolder + "imgly_font_panton_blackitalic_caps.otf"))
    add(FontAsset("imgly_font_panton_lightitalic_caps", fontAssetsFolder + "imgly_font_panton_lightitalic_caps.otf"))
    add(FontAsset("imgly_font_perfograma", fontAssetsFolder + "imgly_font_perfograma.otf"))
    add(FontAsset("imgly_font_poppins", fontAssetsFolder + "imgly_font_poppins.ttf"))
    add(FontAsset("imgly_font_static_bold", fontAssetsFolder + "imgly_font_static_bold.otf"))
    add(FontAsset("imgly_font_summer_light", fontAssetsFolder + "imgly_font_summer_light.otf"))
    add(FontAsset("imgly_font_trash_hand", fontAssetsFolder + "imgly_font_trash_hand.ttf"))
}

In order to change the available fonts or rearrange them, start with a default SettingsList as described in the configuration section and use getSettingsModel(UiConfigText.class) and the setFontList(ly.img.android.pesdk.ui.panels.item.FontItem...) method to add your filter selection as a list of FontItem objects:

DataSourceIdItemList<FontItem> fontsInUiList = new DataSourceIdItemList<>();
fontsInUiList.add(new FontItem("imgly_font_open_sans_bold", "Open Sans"));
fontsInUiList.add(new FontItem("imgly_font_aleo_bold", "Aleo"));
fontsInUiList.add(new FontItem("imgly_font_amaticsc", "Amaticsc"));
fontsInUiList.add(new FontItem("imgly_font_bernier_regular", "BERNIER"));
fontsInUiList.add(new FontItem("imgly_font_blogger_sans_light", "Blogger Sans"));
fontsInUiList.add(new FontItem("imgly_font_cheque_regular", "Cheque"));
fontsInUiList.add(new FontItem("imgly_font_compton_bold", "Compton"));
fontsInUiList.add(new FontItem("imgly_font_fira_sans_regular", "Fira Sans"));
fontsInUiList.add(new FontItem("imgly_font_gagalin_regular", "Gagalin"));
fontsInUiList.add(new FontItem("imgly_font_hagin_caps_thin", "Hagin Caps"));
fontsInUiList.add(new FontItem("imgly_font_intro_inline", "Intro Inline"));
fontsInUiList.add(new FontItem("imgly_font_lobster", "Lobster"));
fontsInUiList.add(new FontItem("imgly_font_nexa_script", "Nexa Script"));
fontsInUiList.add(new FontItem("imgly_font_ostrich_sans_black", "OstrichSans-Black"));
fontsInUiList.add(new FontItem("imgly_font_ostrich_sans_bold", "OstrichSans-Bold"));
fontsInUiList.add(new FontItem("imgly_font_oswald_semi_bold", "Oswald-SemiBold"));
fontsInUiList.add(new FontItem("imgly_font_panton_blackitalic_caps", "Panton-Black Italic Caps"));
fontsInUiList.add(new FontItem("imgly_font_panton_lightitalic_caps", "Panton-Light Italic Caps"));
fontsInUiList.add(new FontItem("imgly_font_perfograma", "Perfograma"));
fontsInUiList.add(new FontItem("imgly_font_poppins", "Poppins"));
fontsInUiList.add(new FontItem("imgly_font_static_bold", "Static"));
fontsInUiList.add(new FontItem("imgly_font_summer_light", "Summer"));
fontsInUiList.add(new FontItem("imgly_font_trash_hand", "Trash"));

UiConfigText uiConfigText = settingsList.getSettingsModel(UiConfigText.class);
uiConfigText.setFontList(fontsInUiList);
val fontsInUiList = DataSourceIdItemList<FontItem>().apply {
    add(FontItem("imgly_font_open_sans_bold", "Open Sans"))
    add(FontItem("imgly_font_aleo_bold", "Aleo"))
    add(FontItem("imgly_font_amaticsc", "Amaticsc"))
    add(FontItem("imgly_font_bernier_regular", "BERNIER"))
    add(FontItem("imgly_font_blogger_sans_light", "Blogger Sans"))
    add(FontItem("imgly_font_cheque_regular", "Cheque"))
    add(FontItem("imgly_font_compton_bold", "Compton"))
    add(FontItem("imgly_font_fira_sans_regular", "Fira Sans"))
    add(FontItem("imgly_font_gagalin_regular", "Gagalin"))
    add(FontItem("imgly_font_hagin_caps_thin", "Hagin Caps"))
    add(FontItem("imgly_font_intro_inline", "Intro Inline"))
    add(FontItem("imgly_font_lobster", "Lobster"))
    add(FontItem("imgly_font_nexa_script", "Nexa Script"))
    add(FontItem("imgly_font_ostrich_sans_black", "OstrichSans-Black"))
    add(FontItem("imgly_font_ostrich_sans_bold", "OstrichSans-Bold"))
    add(FontItem("imgly_font_oswald_semi_bold", "Oswald-SemiBold"))
    add(FontItem("imgly_font_panton_blackitalic_caps", "Panton-Black Italic Caps"))
    add(FontItem("imgly_font_panton_lightitalic_caps", "Panton-Light Italic Caps"))
    add(FontItem("imgly_font_perfograma", "Perfograma"))
    add(FontItem("imgly_font_poppins", "Poppins"))
    add(FontItem("imgly_font_static_bold", "Static"))
    add(FontItem("imgly_font_summer_light", "Summer"))
    add(FontItem("imgly_font_trash_hand", "Trash"))
}


val uiConfigText = settingsList.getSettingsModel(UiConfigText::class.java)
uiConfigText!!.setFontList(fontsInUiList)