4

I am in the process of writing an app and wanted to have a Lottie animation as my splash screen, since I am learning java as I code this app I made a test app to see how things would work. I found that almost any Lottie animation displays just as a still image and does not play/loop the animation. I followed the guide on LottieFiles website and also information that I found on other questions but I still did not manage to get the animation playing. The following is exactly what I have added:

Gradle dependency of my app:

dependencies {  
        implementation 'com.airbnb.android:lottie:3.6.1'
}

To my Layout XML:

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/splashlottie"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="opening_book.json" //Even tried placing the file in raw and using app:lottie_rawRes="@raw/opening_book"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

In my activity:

        LottieAnimationView splashscreen;
        splashscreen = findViewById(R.id.splashlottie);

        splashscreen.animate();
        splashscreen.playAnimation();

I am not sure exactly what I am doing wrong as I even tried various different lottie animation files and by placing the same file under raw and assets. Could the API level be the cause of the animation not playing?

TylerH
  • 20,799
  • 66
  • 75
  • 101
SRVittal
  • 43
  • 1
  • 4
  • 2
    1. Try with `FrameLayout` instead of `ConstraintLayout`. 2. You don't need to specify `animate();` and `playAnimation()` in your code, since your xml handles it with `autoPlay=true`. – amira Feb 28 '21 at 06:43
  • @amira Firstly thank you for the suggestion which I tried but did not play the animation, I included the `animate();` and `playAnimation()` hoping that my animation would play but that did not resolve my issue. – SRVittal Feb 28 '21 at 12:21
  • @SRVittal Did you find a solution to this issue, I am getting this same problem when I place an animation in a nested layout. In root, there are no issues, but when nested it always shows still Images? – Vinu Polly Nov 01 '21 at 09:43
  • @VinuPolly I believe the reason it did not play in my case was that the Animations on the device was disabled. – SRVittal Nov 02 '21 at 11:31

4 Answers4

15

Looks like you are doing it right. Is there any chance of animations are completely disabled on your phone?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Berkay Kireçci
  • 651
  • 5
  • 18
0

I was able to run the animation with the following code:

val imageView = view.findViewById<LottieAnimationView>(R.id.image_view)
imagView.playAnimation()

xml code:

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="womensDay.json"
    app:layout_constraintBottom_toTopOf="@+id/button_first"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textview_first"
    app:lottie_loop="true"/>

A few things to remember:

  1. Make sure you're placing your json file in the asset folder, if don't have one create one. Refer: https://stackoverflow.com/a/50907775/5745574
  2. Just to test, try giving your view absolute dimension say 200dp (width & height). It might be a case where your view doesn't have proper dimension.
  3. Try animating a different json file, your file may be corrupted
  4. Try placing your lottieView inside a ViewGroup (Of any type e.g. LinearLayout)
  5. Lottie animation is supported in API level 16 and above
Vipul Kumar
  • 653
  • 8
  • 14
  • Thank you for the suggestions, I was certainly not able to use `val imageView = view.findViewById(R.id.image_view) imagView.playAnimation()` as val could not be resolved, I am an amateur so I do apologise for not knowing how to use val correctly. – SRVittal Feb 28 '21 at 12:27
  • To your points: I did try placing my animation in the assets folder in the code shown in the question which did not work, I tried setting the dimensions manually by stating the values and also using wrap content which did also failed to play the animation, as I have stated in my question I tried 5/6 different animations and all failed including the most popular one of all time, I tried using framelayout and I am working with API19 but still no luck getting to work. Could it be a device issue? – SRVittal Feb 28 '21 at 12:30
  • Hey, don't worry abt `val imageView = view.findViewById(R.id.image_view) imagView.playAnimation() it's just kotlin syntax` :D It's highly unlikely that it's a device issue. Please check in your developer option setting of your mobile whether animations are disabled? – Vipul Kumar Feb 28 '21 at 17:18
  • Hi thanks, I did have it turned off for some reason – SRVittal Feb 28 '21 at 18:43
  • It's better to place the json file in the res > raw folder instead of the assets folder, and using `app:lottie_rawRes` instead of `app:lottie_fileName` – omiwrench Jan 17 '22 at 13:30
0

I wanted to specify something about not playing animations. If you are using LottieAnimationView for either with image url or with lottie json url like toggle, you may need to start animation programmatically even you setapp:lottie_autoPlay="true" before in xml;

fun LottieAnimationView.setImageOrAnimationFromUrl(imageOrLottieUrl : String?) {
    if (imageOrLottieUrl?.endsWith(".json") == true) {
        //lottie json url
        this.setAnimationFromUrl(imageOrLottieUrl,imageOrLottieUrl)
        this.animate()
        this.playAnimation()
    } else {
        //normal image url
        Glide.with(this).load(imageOrLottieUrl).circleCrop().into(this)
    }
}
oguzhan
  • 2,073
  • 1
  • 26
  • 23
-2

This is work without lottieView.playAnimation() because lottie_autoPlay="true":

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/anim_view"
            android:layout_width="256dp"
            android:layout_height="256dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:lottie_rawRes="@raw/anim_radio_waves"
            app:lottie_autoPlay="true"
            app:lottie_loop="true"/>

Also check your animation json: lottie player

Denis Zozulinsky
  • 27
  • 1
  • 3