You're viewing documentation for a previous version of this software.Switch to the latest stable version
VESDK/Android/Features
Text
The VideoEditor SDK for Android ships with a robust tool that provides all necessary functions for quickly adding text. Learn how to add custom fonts.
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);