Amazing animated splash screen (Kotlin and Lottie), How to?

3 min readJan 10, 2021

This post is going to be beginner friendly so before starting let’s get few important questions’ answers like “What is splash screen” or “Why it is needed”.

What is Splash screen?

Generally splash screen is a screen which shows a logo of your app or brand for few seconds when your app starts. Apart from a static logo, we can also show an animated logo (sounds interesting right!? stay till the end to learn this 😁).

Why Splash screen is used?

Splash screen plays an important role in terms of your app or brand recognition because splash screen will be shown always while your app startup.

Is Splash screen necessary ?

Off-course not. But as seen in above answer, showing a splash screen can increase your app or brand recognition especially when you are using a animated splash screen😉.

Okay enough questions and answers. Let’s jump into the practical part. For this demo I’m gonna use Kotlin language and Android Studio 4.1 to create this demo project.

Step 1

First of all create a new project with empty Activity named “MainActivity”. Then open MainActivity.kt and your file should look like below code snippet.

MainActivity.kt

Step 2

Next we have to implement the required dependencies in the build.gradle (App level) file.

build.gradle

Step 3

Go to LottieFiles website and download an animation of your choice in Lottie JSON format. There are so many animations available for free on the website. For this demo I’m going to use Happy new year 2021 Doodle animation.

Now create a raw resource directory inside res folder of your Android project and store the downloaded file inside the raw folder (don’t forget to rename the animation file name).

Step 4

Create a new activity named “SplashActivity” and open it’s XML file, in my case activity_splash.xml and copy below code.

We have used LottieAnimationView in which our animation will be played and some of the important attributes used in above snippet inside LottieAnimationView are

app:lottie_rawRes="@raw/doodle_animation" //animation file path
app:lottie_autoPlay="true" //true for auto playing the animation
app:lottie_loop="true" //true if you want to loop the animation

We are almost there, now open SplashActivity and copy below code.

We are going to use a Handler to delay the start of next Activity (MainActivity).

At last change your manifest file to start the SplashActivity when app starts.

That’s it 😎, now run your app and see the MAGIC!

I’ve tried to keep the post short and simple so there are so many things which are missing over here. If you want to learn more about Lottie then visit Lottie documentation website. Also you can find full project code on GitHub.

If you learned something from this post then don’t forget to clap or save it. And if you have suggestions then please let me know as I’m new to writing.