Search code examples
androidanimationandroid-jetpack-composelottiedynamic-text

Android: Lottie Animation with dynamic text and custom font issue


I'm trying to dynamically swap a text inside a LottieAnimation in jetpack compose. The lottie file is exported without glyphs

It's working when using the old android view inside a

AndroidView(factory = { context ->
    val view = LottieAnimationView(context).apply {
        setAnimation(R.raw.testing_no_glyphs)
        playAnimation()
        repeatCount = LottieConstants.IterateForever
    }

    val textDel = object : TextDelegate(view) {
        override fun getText(layerName: String?, input: String?): String {
            return when (layerName) {
                "Test234" -> "OtherLettersHere"
                else -> super.getText(layerName, input)
            }
        }
    }

    val fontDel = object : FontAssetDelegate() {
        override fun getFontPath(fontFamily: String?, fontStyle: String?, fontName: String?): String {
            return "fonts/[MyFontInside /assets].ttf"
        }
    }

    view.setTextDelegate(textDel)
    view.setFontAssetDelegate(fontDel)
    return@AndroidView view
})

But I can't find the correct handles in the JetpackCompose version of Lottie to get the same result.

If we export the lottie with glyphs, it's works for the letters in the chars array inside the lottie json. But we want to be able to replace with any letters/symbols, so this isn't a viable solution.

I've noticed in the 5.3.0-SNAPSHOT that a fontMap parameter has been added, but I can't figure out which key to hit with it.

Here is my code:

val dynamicProperties = rememberLottieDynamicProperties(
    rememberLottieDynamicProperty(LottieProperty.TEXT, value = "AaBbCcEeFf", keyPath = arrayOf("Test234"))
)
val composition by rememberLottieComposition(
    spec = LottieCompositionSpec.RawRes(R.raw.testing)
)
val progress by animateLottieCompositionAsState(composition, iterations = LottieConstants.IterateForever)

LottieAnimation(
    composition,
    { progress },
    dynamicProperties = dynamicProperties,
    fontMap = mapOf("fName" to Typeface.createFromAsset(LocalContext.current.assets, "fonts/[MyFontInside /assets].ttf"))
)

It just shows a blank for all the texts inside the Lottie Animation - so this is kinda where i'm stuck.


Solution

  • After some trial an error I found a way to add the typeface for a specific layer:

    val typeface = Typeface.createFromAsset(LocalContext.current.assets, "fonts/[MyFontInside /assets].ttf")
    
    val dynamicProperties = rememberLottieDynamicProperties(
        rememberLottieDynamicProperty(LottieProperty.TEXT, value = "AaBbCcEeFf", keyPath = arrayOf("Test234")),
    --> rememberLottieDynamicProperty(LottieProperty.TYPEFACE, value = typeface, keyPath = arrayOf("Test234")),
    )
    

    Hence there is no need for the fontMap in my case