Lottie Android: add color overlay to animation

To apply a color filter you'll need three things as of now:

1. KeyPath (name of content you wish to edit)
2. LottieProperty (name of property you wish to edit)
3. LottieValueCallback (callback called for every animation re-render)

The layer name can be found in the JSON of the animation by the tag 'nm'.

Add a full color overlay:

LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.addValueCallback(
        new KeyPath("**"),
        LottieProperty.COLOR_FILTER,
        new SimpleLottieValueCallback<ColorFilter>() {
            @Override
            public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
                return new PorterDuffColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP);
            }
        }
);

Add a single layer color overlay (layer called "checkmark"):

LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.addValueCallback(
        new KeyPath("checkmark", "**"),
        LottieProperty.COLOR_FILTER,
        new SimpleLottieValueCallback<ColorFilter>() {
            @Override
            public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
                return new PorterDuffColorFilter(Color.CYAN, PorterDuff.Mode.SRC_ATOP);
            }
        }
);

Remove any color overlays:

LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.addValueCallback(new KeyPath("**"), LottieProperty.COLOR_FILTER,
        new SimpleLottieValueCallback<ColorFilter>() {
            @Override
            public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
                return null;
            }
        }
);

You can read all about it in the official documentation.

You can also check out this sample repository

Here's a visual on the results of the code snippets:

Found in sources of lottie, based on main answer (thanks @SolveSoul ).

Java

First, get your color, for example:

int yourColor = ContextCompat.getColor(getContext(),R.color.colorPrimary);

Then set color filter like this:

SimpleColorFilter filter = new SimpleColorFilter(yourColor);
KeyPath keyPath = new KeyPath("**");
LottieValueCallback<ColorFilter> callback = new LottieValueCallback<ColorFilter>(filter);
animationView.addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback);

Kotlin

First, get your color, for example:

val yourColor = ContextCompat.getColor(context, R.color.colorPrimary)

Then set color filter like this:

val filter = SimpleColorFilter(yourColor)
val keyPath = KeyPath("**")
val callback: LottieValueCallback<ColorFilter> = LottieValueCallback(filter)

animationView.addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback)

Kotlin extension

fun LottieAnimationView.changeLayersColor(
    @ColorRes colorRes: Int
) {
    val color = ContextCompat.getColor(context, colorRes)
    val filter = SimpleColorFilter(color)
    val keyPath = KeyPath("**")
    val callback: LottieValueCallback<ColorFilter> = LottieValueCallback(filter)

    addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback)
}

Since you're passing a JSONObject containing all of the drawing data to Lottie when setting the animation, you could just replace some of the color values with your desired ones before you set it.

If you look for the color key c you'll probably find something like

...,"c":{"k":[1,0.7,0,1]},"fillEnabled":true,...

where changing those float values in that JSONArray would change the colors in the animation.

Granted, I'm not saying it will be too trivial to find/replace the correct values, but this should at least point you in that direction.

As a side note: once you find it, you could set the value in your asset to some kind of nice placeholder like "k":[ BG_COLOR_REPLACEMENT_1 ] and then when loading the asset, just run .replace("BG_COLOR_REPLACEMENT_1", "1,0.7,1,1"); on your String before creating the JSONObject and passing it to Lottie.