We will make gif splash screen in android studio in today’s example.
You can make really great animated and attractive splash screen with GIF.
GIF provides seamless animation to the first impression of any android application.
Traditionally, we were making splash screen with static image.
Static Image may contain company name, logo, slogan etc. information.
There are some third party libraries available on the Github to make some cool animations with splash screen.
We were using those libraries before the concept of GIF was introduced.
View of GIF in Splash Screen
Following are the necessary steps to create gif splash screen in android studio.
Step 1. Library
This project requires third party library to show the gif file in xml layout file.
We will use this github library : android-gif-drawable
Write below line in the build.gradle(Module: app) file
implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.15'
It will fetch all the necessary classes from our github library.
Step 2. Full Screen Activity
It looks great if your splash screen have full screen mode.
To make an android studio activity as a full screen, we have to change the style of our activity.
Add below source code in styles.xml file
<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>
Here we have created our own style which will hide the actionbar to enable the full screen.
Full source code for styles.xml file is as 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 add the following line in the AndroidManifest.xml file under <activity> tag
android:theme="@style/AppFullScreenTheme"
Above line is setting our custom theme which we have just written in the styles.xml file.
So the final source code for AndroidManifest.xml file is as below
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.parsaniahardik.splashgifanimated">
<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"
android:theme="@style/AppFullScreenTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".WelcomActivity"></activity>
</application>
</manifest>
Step 3. WelcomActivity
First of all, we will create a new activity from now.
Keep the name of the new activity as Welcom Activity. It will be our first activity after splash screen has finished it’s loading.
Add the below code in activity_welcom.xml
<?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=".WelcomActivity">
<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>
Write down below line in WelcomActivity.java file
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class WelcomActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_welcom);
}
}
- This activity is the main activity or the first activity of your android app.
Step 3. Saving GIF file
Obviously we need to have one gif file to load it on the android display screen.
Download the gif file by clicking the below link
[sociallocker]Download GIF File[/sociallocker]
After downloading the gif file, save it in the res->drawable directory.
Step 4. Main Activity Changes
Now it is time to play with GIF file.
- Android have different layouts for different display factors. For example, imageview for image or picture, Textview for string, Button for clickable button, Edittext for input box etc.
- But it has not any in built widget for GIF. Hence, we have to create it on our own.
- This is where, that github library will help us.
Add following code to make a gif widget in activity_main.xml
<pl.droidsonroids.gif.GifImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/androidgif"
android:scaleType="fitXY"/>
Final code for activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context=".MainActivity">
<pl.droidsonroids.gif.GifImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/androidgif"
android:scaleType="fitXY"/>
</android.support.constraint.ConstraintLayout>
- Now it is time to set the time duration for the splash screen.
We will do this task from the MainActivity.java file
Following is the source code for the MainActivity.java file
import android.content.Intent;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
/** Duration of wait **/
private final int SPLASH_DISPLAY_LENGTH = 5000; //splash screen will be shown for 2 seconds
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.activity_main);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Intent mainIntent = new Intent(MainActivity.this, WelcomActivity.class);
startActivity(mainIntent);
finish();
}
}, SPLASH_DISPLAY_LENGTH);
}
}
Understanding the Above Code
Let us take a tour about main logic.
Give your attention to the following line
/** Duration of wait **/
private final int SPLASH_DISPLAY_LENGTH = 5000; //splash screen will be shown for 2 seconds
- This line defines the time for which you want to show the splash screen to the user.
- Here I have set it as the 5000 milli seconds which means that splash screen will be shown for the 5 seconds.
- You can change time interval from this line as per your requirements.
Read the below coding lines
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Intent mainIntent = new Intent(MainActivity.this, WelcomActivity.class);
startActivity(mainIntent);
finish();
}
}, SPLASH_DISPLAY_LENGTH);
- Above code will run the splash activity for specific time and then it will open the Welcom Activity.
- I have used Handler class to accomplish our goal.
- Inside the implementation of the Handler class, there is a method called run().
- This method will be on hold for the time given by the variable SPLASH_DISPLAY_LENGTH
- SPLASH_DISPLAY_LENGTH is an integer variable and will store the time in milli seconds.
After the time interval specified by the SPLASH_DISPLAY_LENGTH , Welcom Activity will be opened.
Splash Screen Tutorials
You can also visit below tutorial regarding android splash screen.
It was the details about making the animated splash screen with gif animation.
Do share our tutorials with other beginners and also mediators.
Thank you and nice day ahead!
Download the source code for GIF Splash Screen
Click on below link to download the android studio source code
[sociallocker]Download Source Code For Splash GIF Animated Tutorial[/sociallocker]