Develop Animated Splash Screens on Fire TV with Lottie

A smooth and visually appealing on-boarding experience can greatly impact how users perceive the quality of your app. In my previous article, 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 for Fire TV applications.

What is Lottie?
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 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" and the Github repo. 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 by Eva Schicker available at LottieFiles. 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.

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

Download the "Cat TV Loading Animation" 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.

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 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.

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 our app on Fire TV to see the cat Splash screen in action!

Source code
You can find the complete project source code on this Github repo

Stay updated

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

📣 Follow @AmazonAppDev and our team on Twitter

📺 Subscribe to our Youtube channel

📧 Sign up for the Developer Newsletter

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, Linkedin, and giolaq.dev.