Change Lottie animation color on jetpack compose

Question

I found this on Lottie Docs which lets you change color for a lottie animation.

This is the exact code

val dynamicProperties = rememberLottieDynamicProperties(
    rememberLottieDynamicProperty(
        property = LottieProperty.COLOR,
        value = color.toArgb(),
        keyPath = arrayOf(
            "H2",
            "Shape 1",
            "Fill 1",
        )
    ),
)

But the issue here is the array of keypath. how do I get this one for my specific animation.

I want to find a way to get the Keypaths programatically, or if its not possible, Is there any way to manually do this?

Answer 1

You can change like that:

    val dynamicProperties = rememberLottieDynamicProperties(
            rememberLottieDynamicProperty(
                property = LottieProperty.COLOR_FILTER,
                value = BlendModeColorFilterCompat.createBlendModeColorFilterCompat(
                    MaterialTheme.colorScheme.primary.hashCode(),
                    BlendModeCompat.SRC_ATOP
                ),
                keyPath = arrayOf(
                    "**"
                )
            )
        )

    val composition by rememberLottieComposition(
        LottieCompositionSpec.RawRes(
            R.raw.lottie_loader
        )
    )
    val progress by animateLottieCompositionAsState(
        composition,
        iterations = LottieConstants.IterateForever
    )
    
    LottieAnimation(
        modifier = Modifier.size(lottieSize),
        composition = composition,
        progress = { progress },
        dynamicProperties = dynamicProperties
    )

Answer 2

If you look into the lottie json file, the key path elements are the nm values.

You might first re-format the json to make it a bit more readable, e.g. open the file with android studio with menu code -> reformat code, then search for "nm", the key path element will be the associated value