Skip to content

Emojis

Text blocks in CE.SDK support the use of emojis. A default emoji font is used to render these independently from the target platform. This guide shows how to change the default font and use emojis in text blocks.

    val scene = engine.scene.create()


    val page = engine.block.create(DesignBlockType.Page)
    engine.block.setWidth(page, value = 800F)
    engine.block.setHeight(page, value = 600F)
    engine.block.appendChild(parent = scene, child = page)


    engine.scene.zoomToBlock(
        page,
        paddingLeft = 40F,
        paddingTop = 40F,
        paddingRight = 40F,
        paddingBottom = 40F,
    )

Change the Default Emoji Font

The default font URI can be changed when another emoji font should be used or when the font should be served from another website, a content delivery network (CDN), or a local file path.

The preset is to use the NotoColorEmoji font loaded from our CDN. This font file supports a wide variety of Emojis and is licensed under the Open Font License. The file is relatively small with 9.9 MB but has the emojis stored as PNG images.

As an alternative for higher quality emojis, e.g., this NotoColorEmoji font can be used. This font file supports also a wide variety of Emojis and is licensed under the SIL Open Font License, Version 1.1. The file is significantly larger with 24.3 MB but has the emojis stored as vector graphics.

In order to change the emoji font URI, call the fun setSettingString(keypath: string, value: string) Editor API with ‘defaultEmojiFontFileUri’ as keypath and the new URI as value.

val uri = engine.editor.getSettingString(keypath = "ubq://defaultEmojiFontFileUri")
// From a bundle
engine.editor.setSettingString(
    keypath = "ubq://defaultEmojiFontFileUri",
    value = "file:///android_asset/ly.img.cesdk/fonts/NotoColorEmoji.ttf",
)
// From a URL
engine.editor.setSettingString(
    keypath = "ubq://defaultEmojiFontFileUri",
    value = "https://cdn.img.ly/assets/v3/emoji/NotoColorEmoji.ttf",
)

Add a Text Block with an Emoji

To add a text block with an emoji, add a text block and set the emoji as text content.

val text = engine.block.create(DesignBlockType.Text)
engine.block.setString(text, property = "text/text", value = "Text with an emoji 🧐")
engine.block.setWidth(text, value = 50F)
engine.block.setHeight(text, value = 10F)
engine.block.appendChild(parent = page, child = text)

Full Code

Here’s the full code:

import kotlinx.coroutines.*
import ly.img.engine.*


fun textWithEmojis(
    license: String,
    userId: String,
) = CoroutineScope(Dispatchers.Main).launch {
    val engine = Engine.getInstance(id = "ly.img.engine.example")
    engine.start(license = license, userId = userId)
    engine.bindOffscreen(width = 100, height = 100)


    val uri = engine.editor.getSettingString(keypath = "ubq://defaultEmojiFontFileUri")
    // From a bundle
    engine.editor.setSettingString(
        keypath = "ubq://defaultEmojiFontFileUri",
        value = "file:///android_asset/ly.img.cesdk/fonts/NotoColorEmoji.ttf",
    )
    // From a URL
    engine.editor.setSettingString(
        keypath = "ubq://defaultEmojiFontFileUri",
        value = "https://cdn.img.ly/assets/v3/emoji/NotoColorEmoji.ttf",
    )


    val scene = engine.scene.create()


    val page = engine.block.create(DesignBlockType.Page)
    engine.block.setWidth(page, value = 800F)
    engine.block.setHeight(page, value = 600F)
    engine.block.appendChild(parent = scene, child = page)


    engine.scene.zoomToBlock(
        page,
        paddingLeft = 40F,
        paddingTop = 40F,
        paddingRight = 40F,
        paddingBottom = 40F,
    )


    val text = engine.block.create(DesignBlockType.Text)
    engine.block.setString(text, property = "text/text", value = "Text with an emoji 🧐")
    engine.block.setWidth(text, value = 50F)
    engine.block.setHeight(text, value = 10F)
    engine.block.appendChild(parent = page, child = text)


    engine.stop()
}