Error inflating class com.airbnb.lottie.LottieAnimationView

Question

What I did:

Step 1)

Added the following dependency in graddle:

compile 'com.airbnb.android:lottie:2.0.0-beta4'

Step 2)

Airbnb do not tell us where to place the animated JSON files. Instead, I've seen it in their sample apps that it is placed on app/src/main/assets. So I created that folder and inserted some JSON animations there.

Step 3)

Added the following on activity_main.xml:

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="EmptyState.json"
    app:lottie_loop="true"
    app:lottie_autoPlay="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Upon running the app I get the following error:

04-29 12:55:37.253 21877-21877/com.example.ross.testitout E/AndroidRuntime: FATAL EXCEPTION: main
                                                                      
Process: com.example.ross.testitout, PID: 21877
                                                                      
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.ross.testitout/com.example.ross.testitout.MainActivity}: android.view.InflateException: Binary XML file line #9: Binary XML file line #9: Error inflating class com.airbnb.lottie.LottieAnimationView 

at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2416)

Wondering what I'm doing wrong. There's also a lack of thorough tutorials, which is a shame, a beginner like me needs to spend way longer than necessary to figure things out.

Answer 1

To answer my own question, the problem is the lack of the official assets folder. You can create it manually, but it ain't going to work.

To make it work do the following:

1. Open your project in Android Studio.

2. Select anything on your project folders located on the left hand side.

3. Press alt+insert, a menu will popup.

4. Select the sub-menu "Folder", and then click on "Assets Folder".

This will create the assets folder you need to store your animations.

From there on you can insert the JSON animations and link it there.

You can get the animations from various places (like lottie files or official sample app) or make them yourself using Adobe After Effects.

Answer 2

Without Assets folder you can also do this with res/raw folder:

Put check_mark_done.json at path: app/src/main/res/raw directory. You can download check_mark_done.json from here

The XML layout file used for LottieAnimationView

<com.airbnb.lottie.LottieAnimationView
          android:id="@+id/lottieAnimationView"
          android:layout_width="144dp"
          android:layout_height="144dp"
          android:layout_margin="16dp"
          app:lottie_autoPlay="true"
          app:lottie_loop="true"
          app:lottie_rawRes="@raw/check_mark_done" />

In Activity File:

LottieAnimationView animationView = findViewById(R.id.lottieAnimationView);
startCheckAnimation();

Definition of startCheckAnimation():

private void startCheckAnimation() {
    ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f).setDuration(5000);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            animationView.setProgress((Float) valueAnimator.getAnimatedValue());
        }
    });

    if (animationView.getProgress() == 0f) {
        animator.start();
    } else {
        animationView.setProgress(0f);
    }
}

Answer 3

To add on previous answer. You need to add an official Assets folder. The easiest way I found, on a Mac (might also work for Windows), is to right-click on Java -> New -> Folder -> Assets folder.

Hope this helps someone, I spend a lot of time looking for the error.

Image of the process

Answer 4

I faced the same problem I did everything which is mentioned in the above answers. I follow simple steps.

1. Create an assets folder under the app folder.
2. put all your.JSON animation files in the assets folder
3. Do not use android:src="@drawable/image" if you see this remove it.
4. check your version of Airbnb Lottie repository 'com.airbnb.android:lottie:2.8.0' check the latest version from here

that's it I hope this will help.

Answer 5

I had a similar error today. This may be from the color filter. You can fix the problem by setting the colorFilter programmatically as follows.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/your_id"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_gravity="center"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"
    app:lottie_colorFilter="#FFFFFF" <!-- PROBLEM, DONT KNOW WHY? -->
    app:lottie_rawRes="@raw/your_lottie_res" />

You can fix the problem by setting the colorFilter programmatically as follows. This is from Github

val filter = SimpleColorFilter(Color.parseColor("#fe3144"))
val keyPath = KeyPath("**")
val callback = LottieValueCallback<ColorFilter>(filter)
lottieAnimationView.addValueCallback<ColorFilter>(keyPath, LottieProperty.COLOR_FILTER, callback)