Lottie Animation in Native Android Splash Screen

Viewed 5815

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.

1 Answers

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

Related