Skip to main content
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.

Text tool

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.

Editor Fonts

To add new fonts add them to the Assets first. A good place to do that is the MainActivity when creating the SettingsList.

val fontAssetsFolder = "fonts/"
settingsList.config.addAsset(
FontAsset("imgly_font_aleo_bold", fontAssetsFolder + "imgly_font_aleo_bold.otf"),
FontAsset("imgly_font_ostrich_sans_black", fontAssetsFolder + "imgly_font_ostrich_sans_black.otf"),
FontAsset("imgly_font_amaticsc", fontAssetsFolder + "imgly_font_amaticsc.ttf"),
FontAsset("imgly_font_sancreek", fontAssetsFolder + "imgly_font_sancreek.ttf"),
FontAsset("imgly_font_kumar_one_outline", fontAssetsFolder + "imgly_font_kumar_one_outline.ttf"),
FontAsset("imgly_font_fira_sans_regular", fontAssetsFolder + "imgly_font_fira_sans_regular.ttf"),
FontAsset("imgly_font_nixie_one", fontAssetsFolder + "imgly_font_nixie_one.ttf"),
FontAsset("imgly_font_lobster", fontAssetsFolder + "imgly_font_lobster.otf"),
FontAsset("imgly_font_molle", fontAssetsFolder + "imgly_font_molle.ttf"),
FontAsset("imgly_font_ostrich_sans_bold", fontAssetsFolder + "imgly_font_ostrich_sans_bold.otf"),
FontAsset("imgly_font_oswald_semi_bold", fontAssetsFolder + "imgly_font_oswald_semi_bold.ttf"),
FontAsset("imgly_font_codystar", fontAssetsFolder + "imgly_font_codystar.ttf"),
FontAsset("imgly_font_poppins", fontAssetsFolder + "imgly_font_poppins.ttf"),
FontAsset("imgly_font_trash_hand", fontAssetsFolder + "imgly_font_trash_hand.ttf"),
FontAsset("imgly_font_imgly_font_archivo_black", fontAssetsFolder + "imgly_font_archivo_black.ttf"),
FontAsset("imgly_font_carter_one", fontAssetsFolder + "imgly_font_carter_one.ttf"),
FontAsset("imgly_font_krona_one", fontAssetsFolder + "imgly_font_krona_one.ttf"),
FontAsset("imgly_font_monoton", fontAssetsFolder + "imgly_font_monoton.ttf"),
FontAsset("imgly_font_notable", fontAssetsFolder + "imgly_font_notable.ttf"),
FontAsset("imgly_font_palanquin_dark_semi_bold", fontAssetsFolder + "imgly_font_palanquin_dark_semi_bold.ttf"),
FontAsset("imgly_font_stint_ultra_expanded", fontAssetsFolder + "imgly_font_stint_ultra_expanded.ttf"),
FontAsset("imgly_font_yeseva_one", fontAssetsFolder + "imgly_font_yeseva_one.ttf"),
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:

settingsList.configure<UiConfigText> {
it.setFontList(
FontItem("imgly_font_open_sans_bold", "Open Sans"),
FontItem("imgly_font_aleo_bold", "Aleo"),
FontItem("imgly_font_amaticsc", "Amaticsc"),
FontItem("imgly_font_imgly_font_archivo_black", "Archivo"),
FontItem("imgly_font_bungee_inline", "Bungee"),
FontItem("imgly_font_campton_bold", "Campton"),
FontItem("imgly_font_carter_one", "Carter"),
FontItem("imgly_font_codystar", "Codystar"),
FontItem("imgly_font_fira_sans_regular", "Fira Sans"),
FontItem("imgly_font_galano_grotesque_bold", "Galano"),
FontItem("imgly_font_krona_one", "Krona"),
FontItem("imgly_font_kumar_one_outline", "Kumar"),
FontItem("imgly_font_lobster", "Lobster"),
FontItem("imgly_font_molle", "Molle"),
FontItem("imgly_font_monoton", "Monoton"),
FontItem("imgly_font_nixie_one", "Nixie"),
FontItem("imgly_font_notable", "Notable"),
FontItem("imgly_font_ostrich_sans_black", "OstrichBlk"),
FontItem("imgly_font_ostrich_sans_bold", "OstrichBld"),
FontItem("imgly_font_oswald_semi_bold", "Oswald"),
FontItem("imgly_font_palanquin_dark_semi_bold", "Palanquin"),
FontItem("imgly_font_permanent_marker", "Marker"),
FontItem("imgly_font_poppins", "Poppins"),
FontItem("imgly_font_roboto_black_italic", "RobotoBlk"),
FontItem("imgly_font_roboto_light_italic", "RobotoLt"),
FontItem("imgly_font_sancreek", "Sancreek"),
FontItem("imgly_font_stint_ultra_expanded", "Stint"),
FontItem("imgly_font_trash_hand", "Trashhand"),
FontItem("imgly_font_vt323", "VT323"),
FontItem("imgly_font_yeseva_one", "Yeseva")
)
}