How to Create an Animated Splash Screen in Android?

Prerequisites: How to Create a Splash Screen in Android using Kotlin?

Android Splash Screen is the first screen visible to the user when the application’s launched. Splash Screen is the user’s first experience with the application that’s why it is considered to be one of the most vital screens in the application. It is used to display some information about the company logo, company name, etc. We can also add some animations to the Splash screen as well. In this article, we will be making an animated Splash Screen Using KotlinA sample GIF is given below to get an idea about what we are going to do in this article. 

Animated Splash Screen in Android

Steps to Create an Animated Splash Screen

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.



Step 2: Create an animation file

To create an animation file in android studio please follow the given instructions carefully. Go to the app > res > right-click > New > Android Resource Directory.

Animated Splash Screen in Android

Then name the directory name as anim. And then click on OK.

Animated Splash Screen in Android

Go to the anim > right-click > New > Animation Resource File  

Animated Splash Screen in Android

And name the file name as side_slide and click on OK.



Animated Splash Screen in Android

Now add this code to the animated XML file. Below is the code for the side_slide.xml file.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<set 
  
    <!--THIS CODE IS FOR SIDE ANIMATION-->
    <translate
        android:duration="1500"
        android:fromXDelta="-50%"
        android:fromYDelta="0%" />
  
    <alpha
        android:duration="1500"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
</set>

chevron_right


Step 3: Create another activity

Go to app > java > first package name > right-click > New > Activity > Empty Activity and create another activity and named it as SplashScreen. Edit the activity_splash_screen.xml file and add image, text in the splash screen as per the requirement. Here we are adding an image to the splash screen. Below is the code for the activity_splash_screen.xml file.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    tools:context=".SplashScreen">
  
    <!--THIS IS IMAGEVIEW FOR OUR IMAGE IN SPLASH SCREEN-->
    <!--YOU CAN ADD YOUR IMAGE TO DRAWABLES. 
        HERE geeksforgeeks IS THE NAME OF IMAGE-->
    <ImageView
        android:id="@+id/SplashScreenImage"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/geeksforgeeks"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
      
</androidx.constraintlayout.widget.ConstraintLayout>

chevron_right


Go to the SplashScreen.kt file, and refer to the following code. Below is the code for the SplashScreen.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

filter_none

edit
close

play_arrow

link
brightness_4
code

import android.content.Intent
import android.os.Bundle
import android.os.Handler
import android.view.WindowManager
import android.view.animation.AnimationUtils
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
  
@Suppress("DEPRECATION")
class SplashScreen : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash_screen)
  
        // This is used to hide the status bar and make 
        // the splash screen as a full screen activity.
        window.setFlags(
            WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN
        )
          
        // HERE WE ARE TAKING THE REFERENCE OF OUR IMAGE 
        // SO THAT WE CAN PERFORM ANIMATION USING THAT IMAGE
        val backgroundImage: ImageView = findViewById(R.id.SplashScreenImage)
        val slideAnimation = AnimationUtils.loadAnimation(this, R.anim.side_slide)
        backgroundImage.startAnimation(slideAnimation)
          
        // we used the postDelayed(Runnable, time) method 
        // to send a message with a delayed time.
        Handler().postDelayed({
            val intent = Intent(this, MainActivity::class.java)
            startActivity(intent)
            finish()
        }, 3000) // 3000 is the delayed time in milliseconds.
    }
}

chevron_right


Step 4: Working with the AndroidMenifest.xml file

Go to the AndroidMenifest.xml file and add the following code in the Splash Screen Activity. This is used to hide the status bar or action bar.



android:theme=”@style/Theme.AppCompat.Light.NoActionBar”

Also, add <intent-filter> inside the Splash Screen Activity to make this activity as the starting activity. So whenever the app will execute the user can see the splash screen at the beginning. Below is the complete code for the AndroidMenifest.xml file.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
    package="com.example.animatedsplashscreen">
  
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"></activity>
        <activity
            android:name=".SplashScreen"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
  
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
  
</manifest>

chevron_right


Step 5: Working with the activity_main.xml file

Go to the activity_main.xml file and add a text which will show “Welcome to GeeksforGeeks” when the user will enter into the MainActivity. Below is the code for the activity_main.xml file.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    tools:context=".MainActivity">
  
    <!-- THIS IS SIMPLE TEXTVIEW-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome To GeeksforGeeks"
        android:textColor="@color/colorAccent"
        android:textSize="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

chevron_right


Step 6: Working with the MainActivity.kt file

Do nothing in the MainActivity.kt file as we already created a new activity for the Splash Screen. Below is the code for the MainActivity.kt file

Kotlin

filter_none

edit
close

play_arrow

link
brightness_4
code

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

chevron_right


Output

Find this project on Github: https://github.com/Gauravverma245/AnimatedSplashScreen




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.