Kotlin GIF Animated Splash Screen Android Example is today’s topic.
You will learn how to create animated splash screen with GIF in android kotlin language.
Generally, developers use static image in splash screen and this image contains company name, company logo, company slogan etc. information.
If you want more attention from the user in splash screen than animation in splash screen can help you a lot.
We can use GIF to show animation in splash screen in kotlin with android studio.
First of all, watch the below youtube output video to see final animated splash screen with GIF.
Now you can use the following steps to make splash screen like above video.
Step 1. Getting Library
Make a new project in android studio with Kotlin as the primary source language.
In android system, there is not any built in widget which can allow you to insert GIF directly.
For example, for previewing the image, android system have Image view, for displaying text there is Text View but no such widget for GIF.
Now as the solution of this problem, we need to use the external library.
We will use this github library : android-gif-drawable
For integrating above library, add the following line inside your build.gradle(Module: app) file
implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.15'
Above line will integrate it’s classes in our android studio project so that we can use them easily.
Step 2. Making Splash In Full Screen
Generally, we show the splash screen in the full screen mode. It looks much in full screen than in the ordinary screen.
So for this purpose, we need to update our style for activity. To do this, go to app->res->values folder and open styles.xml file.
Inside this styles.xml file, add the below coding lines
<style name="AppFullScreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>
Above lines will remove the Action bar and thus it will create the full screen.
So final code lines for styles.xml file should look like the below
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppFullScreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>
</resources>
Now to use the above style in our activity, we need to update the AndroidMAnifest.xml file.
Navigate to the app->manifests directory and open AndroidMAnifest.xml file.
Now add the below code inside <activity> tag for Main Activity.
android:theme="@style/AppFullScreenTheme"
So final code for AndroidMAnifest.xml file should look like the below after adding the above line.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.gifsplashkotlin">
<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=".WelcomeActivity">
</activity>
<activity android:name=".MainActivity"
android:theme="@style/AppFullScreenTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
Step 3. Putting GIF file in Drawable
Now to load the GIF file, we need to have one GIF file in our project.
So, first download the GIF file by clicking the below link.
Click Here to download sample GIF.
After downloading the GIF file, save it inside app->res->drawable folder.
Step 4. Making Welcome Activity
After showing the GIF Splash screen in first or main activity, we need to open the second activity.
We will name this second activity as the welcome activity.
So create a new Empty activity and add the below source lines in activity_welcome.xml file.
You need to add the following coding lines inside activity_welcome.xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context=".WelcomeActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Your First Activity After Splash Screen"
android:layout_marginTop="30dp"
android:layout_marginLeft="20dp"
android:textSize="30sp"/>
</LinearLayout>
There is just one Text view in the above file.
Now in the WelcomeActivity.kt file, you should add the below lines
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
class WelcomeActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_welcome)
}
}
So, you can see that welcome activity is blank. You can start your actual app features from this welcome activity.
Step 5. Last Lines For GIF
Now you should have two auto generated files inside your new android studio project.
These two files are : activity_main.xml and MainActivity.kt
In your activity_main.xml file, add the following
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<pl.droidsonroids.gif.GifImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/androidgif"/>
</android.support.constraint.ConstraintLayout>
Here in the above code, we have used external library.
Using this library, we have created a new UI widget which is capable of showing GIF file.
We can set height, width and other setting attributes to this GIF widget similar to the ImageView.
Now in your MainActivity.kt file, write down the below source code snippet.
import android.content.Intent
import android.os.Handler
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
class MainActivity : AppCompatActivity() {
/** Duration of wait */
private val SPLASH_DISPLAY_LENGTH = 5000 //splash screen will be shown for 2 seconds
/** Called when the activity is first created. */
public override fun onCreate(icicle: Bundle?) {
super.onCreate(icicle)
setContentView(R.layout.activity_main)
Handler().postDelayed({
val mainIntent = Intent(this, WelcomeActivity::class.java)
startActivity(mainIntent)
finish()
}, SPLASH_DISPLAY_LENGTH.toLong())
}
}
Now let us see what above lines are doing.
First of all, read the below line
private val SPLASH_DISPLAY_LENGTH = 5000 //splash screen will be shown for 2 seconds
Compiler will create one variable whose name is “SPLASH_DISPLAY_LENGTH”
This SPLASH_DISPLAY_LENGTH variable holds the integer value as “5000” milli seconds which means approximately 2 seconds.
Thus, compiler will show the splash screen for 2 seconds.
Now attend the below code snippet
Handler().postDelayed({
val mainIntent = Intent(this, WelcomeActivity::class.java)
startActivity(mainIntent)
finish()
}, SPLASH_DISPLAY_LENGTH.toLong())
Above code will open the Welcome activity. But we have used Handler class here.
Handler class will help us to hold the opening of the new activity for 2 seconds.
If you wish you increase or decrease this time then change the value of the SPLASH_DISPLAY_LENGTH variable.
No need to change anything in the above coding lines.
Download Code of Kotlin GIF Animated Splash Screen From Github
https://github.com/demonuts/Kotlin-GIF-Animated-Splash-Screen-Android-Example