Text
A picture says more than a thousand words, however sometimes it still takes a few more. The robust text feature of the VideoEditor 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 customization 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.
To add new fonts add them to the Assets first. A good place to do that is the MainActivity
when creating the SettingsList
.
final String fontAssetsFolder = "fonts/";ConfigMap<FontAsset> fontAssetMap = settingsList.getSettingsModel(AssetConfig.class).getAssetMap(FontAsset.class);fontAssetMap.add(new FontAsset("imgly_font_aleo_bold", fontAssetsFolder + "imgly_font_aleo_bold.otf"));fontAssetMap.add(new FontAsset("imgly_font_ostrich_sans_black", fontAssetsFolder + "imgly_font_ostrich_sans_black.otf"));fontAssetMap.add(new FontAsset("imgly_font_amaticsc", fontAssetsFolder + "imgly_font_amaticsc.ttf"));fontAssetMap.add(new FontAsset("imgly_font_sancreek", fontAssetsFolder + "imgly_font_sancreek.ttf"));fontAssetMap.add(new FontAsset("imgly_font_kumar_one_outline", fontAssetsFolder + "imgly_font_kumar_one_outline.ttf"));fontAssetMap.add(new FontAsset("imgly_font_fira_sans_regular", fontAssetsFolder + "imgly_font_fira_sans_regular.ttf"));fontAssetMap.add(new FontAsset("imgly_font_nixie_one", fontAssetsFolder + "imgly_font_nixie_one.ttf"));fontAssetMap.add(new FontAsset("imgly_font_lobster", fontAssetsFolder + "imgly_font_lobster.otf"));fontAssetMap.add(new FontAsset("imgly_font_molle", fontAssetsFolder + "imgly_font_molle.ttf"));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_codystar", fontAssetsFolder + "imgly_font_codystar.ttf"));fontAssetMap.add(new FontAsset("imgly_font_poppins", fontAssetsFolder + "imgly_font_poppins.ttf"));fontAssetMap.add(new FontAsset("imgly_font_trash_hand", fontAssetsFolder + "imgly_font_trash_hand.ttf"));fontAssetMap.add(new FontAsset("imgly_font_imgly_font_archivo_black", fontAssetsFolder + "imgly_font_archivo_black.ttf"));fontAssetMap.add(new FontAsset("imgly_font_carter_one", fontAssetsFolder + "imgly_font_carter_one.ttf"));fontAssetMap.add(new FontAsset("imgly_font_krona_one", fontAssetsFolder + "imgly_font_krona_one.ttf"));fontAssetMap.add(new FontAsset("imgly_font_monoton", fontAssetsFolder + "imgly_font_monoton.ttf"));fontAssetMap.add(new FontAsset("imgly_font_notable", fontAssetsFolder + "imgly_font_notable.ttf"));fontAssetMap.add(new FontAsset("imgly_font_palanquin_dark_semi_bold", fontAssetsFolder + "imgly_font_palanquin_dark_semi_bold.ttf"));fontAssetMap.add(new FontAsset("imgly_font_stint_ultra_expanded", fontAssetsFolder + "imgly_font_stint_ultra_expanded.ttf"));fontAssetMap.add(new FontAsset("imgly_font_yeseva_one", fontAssetsFolder + "imgly_font_yeseva_one.ttf"));fontAssetMap.add(new FontAsset("imgly_font_vt323", fontAssetsFolder + "imgly_font_vt323.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 font 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_imgly_font_archivo_black", "Archivo"));fontsInUiList.add(new FontItem("imgly_font_bungee_inline", "Bungee"));fontsInUiList.add(new FontItem("imgly_font_campton_bold", "Campton"));fontsInUiList.add(new FontItem("imgly_font_carter_one", "Carter"));fontsInUiList.add(new FontItem("imgly_font_codystar", "Codystar"));fontsInUiList.add(new FontItem("imgly_font_fira_sans_regular", "Fira Sans"));fontsInUiList.add(new FontItem("imgly_font_galano_grotesque_bold", "Galano"));fontsInUiList.add(new FontItem("imgly_font_krona_one", "Krona"));fontsInUiList.add(new FontItem("imgly_font_kumar_one_outline", "Kumar"));fontsInUiList.add(new FontItem("imgly_font_lobster", "Lobster"));fontsInUiList.add(new FontItem("imgly_font_molle", "Molle"));fontsInUiList.add(new FontItem("imgly_font_monoton", "Monoton"));fontsInUiList.add(new FontItem("imgly_font_nixie_one", "Nixie"));fontsInUiList.add(new FontItem("imgly_font_notable", "Notable"));fontsInUiList.add(new FontItem("imgly_font_ostrich_sans_black", "OstrichBlk"));fontsInUiList.add(new FontItem("imgly_font_ostrich_sans_bold", "OstrichBld"));fontsInUiList.add(new FontItem("imgly_font_oswald_semi_bold", "Oswald"));fontsInUiList.add(new FontItem("imgly_font_palanquin_dark_semi_bold", "Palanquin"));fontsInUiList.add(new FontItem("imgly_font_permanent_marker", "Marker"));fontsInUiList.add(new FontItem("imgly_font_poppins", "Poppins"));fontsInUiList.add(new FontItem("imgly_font_roboto_black_italic", "RobotoBlk"));fontsInUiList.add(new FontItem("imgly_font_roboto_light_italic", "RobotoLt"));fontsInUiList.add(new FontItem("imgly_font_sancreek", "Sancreek"));fontsInUiList.add(new FontItem("imgly_font_stint_ultra_expanded", "Stint"));fontsInUiList.add(new FontItem("imgly_font_trash_hand", "Trashhand"));fontsInUiList.add(new FontItem("imgly_font_vt323", "VT323"));fontsInUiList.add(new FontItem("imgly_font_yeseva_one", "Yeseva"));UiConfigText uiConfigText = settingsList.getSettingsModel(UiConfigText.class);uiConfigText.setFontList(fontsInUiList);