Lottie Animation in Native Android Splash Screen

Question

Is it possible to load a Lottie animation in the layout of my splash screen?

Currently my splash screen layout is as such:

background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:opacity="opaque">

<item android:drawable="@drawable/path_background_gradient" />

<item
    android:drawable="@drawable/ic_locky"
    android:gravity="center" />

</layer-list>

styles.xml

<!-- Splash Launcher UI theme. -->
<style name="Locky.Theme.Launcher" parent="Locky.Theme">
    <item name="android:windowBackground">@drawable/custom_background_launcher</item>
    <item name="colorPrimary">@color/background_gradient_accent_start</item>
    <item name="colorPrimaryDark">@color/background_gradient_accent_start</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

I used this to prevent the white screen on android cold boot.

But instead of the icon ic_locky I want to use a Lottie animation. Is it possible to do so? Because there are many apps that uses an animated logo in the splash screen.

Lowgrade

Answer 1

Since there is litte control over WindowManager you can use a static image of your animation in windowbackground and then replace it with the lottie animation.

Lottie:

implementation 'com.airbnb.android:lottie:$lottieVersion'

highest version seems to be 3.4.0 at this time.

And then use the LottieAnimationView to load the animation:

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lav_thumbUp"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginStart="80dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:lottie_autoPlay="false"
    app:lottie_fileName="thumb_up.json"
    app:lottie_loop="false"
    app:lottie_speed="1.25" />

Read more: https://github.com/airbnb/lottie-android/blob/master/README.md

Bevis

Yes, but i want to use it in a layer-list. I can't put <com.airbnb.lottie.LottieAnimationView> in a layer-list. The point of using a layer-list in the splash screen is to prevent the white screen during cold boot. Any other way i can do that ? – Lowgrade

Yes. There's little to control in the windowmanager. What you can do is start with a static image of your animation, then replace it with the lottie animation. – Bevis

Hey i used the lottie animation after the static load but what I noticed was - "a white screen flashes for few milliseconds and then animation starts" . Is there any solution for that? – Select