How to Create an Animated Splash Screen in Android?
Last Updated :
01 Aug, 2024
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 Kotlin. A sample GIF is given below to get an idea about what we are going to do in this article.
splash
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.
Then name the directory name as anim and resource type anim (then it will show into your directory). And then click on OK.
Go to the anim > right-click > New > Animation Resource File
And name the file name as side_slide and click on OK.
Now add this code to the animated XML file. Below is the code for the side_slide.xml file.
XML
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android">
<!--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>
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
<?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="#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>
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
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.
}
}
Step 4: Working with the AndroidManifest.xml file
Go to the AndroidManifest.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 AndroidManifest.xml file.
XML
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
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>
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
<?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="#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>
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
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)
}
}
Output
Similar Reads
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 compan
3 min read
Android | Creating a Splash Screen A splash screen is mostly the first screen of the app when it is opened. It is a constant screen which appears for a specific amount of time, generally shows for the first time when the app is launched. The Splash screen is used to display some basic introductory information such as the company logo
2 min read
How to Create Star Animation in Android? In this article, we are going to create star animation using an animated star library. Here we will be creating a background drawable file and will specify the color for the animation. The star animation we have created is easy to create since we are using a library. A sample GIF is given below to g
3 min read
How to Create a Splash Screen With Layer-List in Android? Splash Screen is an initial screen that gets displayed on the app's launch. So to either display your logo or to display your app's name on the startup of the screen. Similar to what WhatsApp or Instagram apps do on their launch. They display a simple logo of their app. Now, here comes the problem,
3 min read
Correct Way to Add a Splash Screen in Android Google previously advised against utilizing a Splash Screen for Android Applications. It was pointless. Then, when they released the Material Design Specifications, several of us noticed that the Splash Screen had been renamed Launch Screen. Ideal for displaying your brand. So, what is the distincti
3 min read
How to create AnimatedGradient in Android? In this article, we are going to learn how to create AnimatedGradient in android. It can be used in the background of our app. In this, we add different color gradients and animate them. Even in the older versions of Instagram, the developers used AnimatedGradient for the background of the login scr
2 min read