Create Splash Screen Android Studio Java & Kotlin Tutorial

what is a splash Screen?

The splash screen is the first screen in any app and is often referred to as the launch screen or welcome screen. and this screen presents the company logo and app name with the tag line of that particular company. And the splash screen is a great way to welcome a user.

Why Use Splash Screen?

It reduces the anxiety of the user from waiting. the wait of loading the app is become sorter because of the splash screen. and it helps to re-introduce the logo so the user can remember it.

The Origins of Splash Screen = The splash screen originated from the comic industry the purpose of the splash screen was to capture readers' attention and can be used to attract them. and the nowadays splash screen purpose is also similar to capture user attention with a beautiful logo.

Demo 

#1 step is to create an empty activity with the name MainActivity.java and copy the below code in the activity XML file. 

we are using MainActivity as a splash activity for this example you can set any name whatever you like.

In the activity_main.xml file parent/root view is the constraint layout and in that constraint layout, we added two LottieAnimationViews.don't worry if you don't know about LottieAnimationView we will discuss it in detail.

LottieAnimationView. For this LottieAnimationView, we first need to add Airbnb Lottie Dependency in our app-level build.gradle file after that we can use this LottieAnimationView anywhere in our app. you can download this library from this link.  

LottieAnimationView Dependency  (Add this in your app-level build.gradle file and sync project)

dependencies {
  implementation 'com.airbnb.android:lottie:3.7.0'
}

now we can use LottieAnimations in our project. thousands of free animations available at Lottie's official website (https://lottiefiles.com). Now let's see how we can use these animations in our android app. To use a Lottie animation in our app first step is to download the Lottie animation JSON file.  On the Lottie website, we can download animation in different formats like GIF, MP4, and JSON. we will use JSON format in this project. Download any of your favorite animation JSON files from the Lottie website and then put that file in the raw resource directory or in the assets directory. As you can see in the above code we used lottie_fileName property of the Lottie animation view whenever we will use this property that's mean we first have to add the Lottie animation JSON file in the assets folder. and the value of lottie_fileName  value name should be the same as the name of the Jason file in the Assets folder. we also set this view property lottie_autoPlay to true. that's mean when our app will run, this animation will start automatically. I hope now you understand enough about Lottie animations. if you want to learn more about it you can check out Lottie's official website.

Now let's discuss the MainActivity.java file.

package com.itinsidenews.splash;

import androidx.appcompat.app.AppCompatActivity;

import android.animation.Animator;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

import com.airbnb.lottie.LottieAnimationView;

public class MainActivity extends AppCompatActivity {

//    auther :  Avdesh Yadav
//    website : https://itinsidenews.com
//    for help: [email protected]

    LottieAnimationView lottieAnimationView,backgroundimage;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        backgroundimage = findViewById(R.id.backgroundimg);
        lottieAnimationView = findViewById(R.id.lootie);

        //setStartDelay(5000) mean animation will start after 5 second
        // .setDuration(1000)  mean animation will take 1 second to complete 
        // .translationY(-3500)  mean view will animate vertically up side from its initial position to -3500

        backgroundimage.animate().translationY(-3500).setDuration(1000).setStartDelay(5000); // 1000 mean 1 second 

        lottieAnimationView.animate().translationY(3500).setDuration(1000).setStartDelay(5000).setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
             //   on animation end start HomeActivity 
                Intent intent = new Intent(MainActivity.this,HomeActivity.class);
                startActivity(intent);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });;;








    }

}

 in onAnimationEnd method we set intent to HomeActivity.java but we still not created that activity. Now its time to create HomeActivity and then start designing your home page as per your requirement. 

Kotlin Code For MainActivity

As I mentioned in the title that I will share with you both code Java & Kotlin. so here is a kotlin MainActivity file code. In Kotlin Project everything will remain the same just we need to make changes in MainActivity

MainActivity.kt 

package com.itinsidenews.splashscreenkotlinexample

import android.animation.Animator
import android.animation.Animator.AnimatorListener
import android.content.Intent
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.airbnb.lottie.LottieAnimationView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var lottieAnimationView: LottieAnimationView =  findViewById(R.id.lootie)
        var backgroundimage:LottieAnimationView = findViewById(R.id.backgroundimg)

        backgroundimage.animate().translationY(-3500f).setDuration(1000).startDelay = 5000
        lottieAnimationView.animate().translationY(3500f).setDuration(1000).setStartDelay(5000)
            .setListener(object : AnimatorListener {
                override fun onAnimationStart(animation: Animator) {}
                override fun onAnimationEnd(animation: Animator) {
                    val intent = Intent(this@MainActivity, HomeActivity::class.java)
                    startActivity(intent)
                }

                override fun onAnimationCancel(animation: Animator) {}
                override fun onAnimationRepeat(animation: Animator) {}
            })

    }
}

Now it's time to run the app. if you have followed everything that I discussed above you will see the same result as I share the demo image. if you still have a query you can ask me in the comment section. i have explained very well in the video tutorial watch that for better understanding. I also have shared both java & kotlin project source code. source code download link is given at the end of this post.