Develop Animated Splash Screens on Fire TV with Lottie
Tags: howto, tutorial, lottie, tv
Published: 2023-07-26 22:11:26


A smooth and visually appealing on-boarding experience can greatly impact how users perceive the quality of your app. In my [previous article](https://dev.to/amazonappdev/how-to-develop-custom-splash-screens-on-fire-tv-mcm), we explored how to create custom splash screens on Fire TV apps to optimize the startup time and improve user experience. Building on that knowledge we will take a step further and learn how to develop an animated splash screen using [Lottie](https://github.com/airbnb/lottie-android) for Fire TV applications.

**What is Lottie?**
[Lottie](https://airbnb.io/lottie/#/) is an open-source animation library created by Airbnb to render complex animations on mobile devices in real time. It is an excellent choice for creating captivating and interactive animations for both Android and iOS. Since Fire OS is based on the Android Open source Project [AOSP](https://source.android.com/) we can use Lottie to render eye-catching, captivating splash screens on Fire TV apps.

Before we proceed, I highly recommend checking out the previous article, ["How to Develop Custom Splash Screens on Fire TV"](https://dev.to/amazonappdev/how-to-develop-custom-splash-screens-on-fire-tv-mcm) and the [Github repo](https://github.com/giolaq/splash-screen-fire-tv-demo). We will be using the same project adapting the code to use Lottie.

Let's create a splash screen for our app on Fire TV!

### **Step 1:** Prepare the Lottie animation

To integrate the Lottie animation into our splash screen, we need to build an animation to match our app's branding and theme. For this article, we'll use the [Cat TV Loading Animation](https://lottiefiles.com/animations/cat-tv-loading-animation-sz7kZo9SCY) by [Eva Schicker](https://lottiefiles.com/evaschicker) available at [LottieFiles](https://lottiefiles.com/). This delightful animation features an adorable cat waiting for our app to load, bringing a touch of fun to the onboarding experience. Create your own custom Lottie animations using After Effects, Figma or other graphics tools you prefer.

![Lottie animation from LottieFiles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfbiuwcbi3qe5o5equ18.png)

### **Step 2:** Place the Lottie animation into the Android app project

Download the ["Cat TV Loading Animation"](https://lottiefiles.com/animations/cat-tv-loading-animation-sz7kZo9SCY) in Lottie JSON format from LottieFiles  and place the JSON file in the `res/raw` folder of our Fire TV Android project. Rename the JSON file `cattv.json`.

### **Step 3:** Lottie as a dependency

Add Lottie as a dependency to our project app's `build.gradle` file.

```groovy
dependencies {

    ...
    implementation "com.airbnb.android:lottie:6.1.0"
}
```

### **Step 4:** Implement the Animated Splash Screen

Add a `LottieAnimationView` view in the splash screen xml layout file `splashscreen_activity.xml`. This layout represents the UI of the splash screen. You will notice Lottie Animation, centered on a white background, auto playing when the app starts.

```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background_splashscreen"
    tools:context=".SplashScreenActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/loading_animation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_rawRes="@raw/cattv"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        android:layout_margin="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

### **Step 5:** Implement the SplashScreenActivity

We need to start the `MainActivity` of the app once the animation completes. Let's modify the `SplashScreenActivity.java` to remove the delay logic and delegate the Lottie animation to launch the `MainActivity` intent when the animation finishes.

```kotlin
class SplashScreenActivity : AppCompatActivity() {

    private lateinit var binding: SplashscreenActivityBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = SplashscreenActivityBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // Start the MainActivity after Lottie animation completes
        binding.loadingAnimation.addAnimatorUpdateListener { animation ->
            if (animation.animatedFraction >= 1f) {
                startActivity(Intent(this, MainActivity::class.java))
                finish()
            }
        }
    }
}
```

## **Wrap Up:** Load and test our animated splash screen!

Now we can build and [test](https://developer.amazon.com/docs/fire-tv/connecting-adb-to-device.html?cmp=2023_07_devg-sa&ch=soc&chlast=soc&pub=devto&publast=devto&type=org&typelast=org) our app on Fire TV to see the cat Splash screen in action!

![Animated Splash screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwdaj26h6tu4mccg9iyf.gif)


**Source code**
You can find the complete project source code on this [Github repo](https://github.com/giolaq/splash-screen-fire-tv-demo/tree/lottie)


**Stay updated** 

For the latest Amazon Appstore developer news, product releases, tutorials, and more:

📣 Follow [@AmazonAppDev](https://twitter.com/AmazonAppDev) and [our team](https://twitter.com/i/lists/1580293569897984000/members) on Twitter

📺 Subscribe to our [Youtube channel](https://www.youtube.com/amazonappstoredevelopers)

📧 Sign up for the [Developer Newsletter](https://m.amazonappservices.com/devto-newsletter-subscribe)

### About the author

Giovanni ("Gio") Laquidara is a Senior Dev Advocate at Amazon, where he works on supporting developers around the world using the Amazon Appstore across many devices. 

Previously, Gio worked as a software engineer building mobile apps, real-time defence systems, and VR/AR experiences. For fun, Gio enjoys low level programming, IoT hacking, and command line apps ⌨️✨.

_You can connect with Gio on [Twitter](https://twitter.com/giolaq), [Linkedin](https://www.linkedin.com/in/glaquidara/), and [giolaq.dev](https://giolaq.dev)._