How to add an animated splash screen to your android app

on

What is Android Splash Screen

This is generally used to show some kind of loading before opening an App. Also some companies use it to showcase their logo or services. This is a separate feature on Android.

How to create Animation in Android

A tween animation can perform a series of simple transformations (position, size, rotation, and transparency) on the contents of a View object. So, if you have a TextView object, you can move, rotate, grow, or shrink the text. If it has a background image, the background image will be transformed along with the text. The animation package provides all the classes used in a tween animation. You can read more about animation.
Here we will create an animated image that will rotate before opening App. So a user will see first a rotating image which will be referred as animated splash screen and then Hello World print will come (which is part of MainActitvity). Now let’s start making our Android Splash Screen.

Creating a New Project – Android Splash Screen

  1. Open Android Studio and create a new project AndroidSplashScreen and company domain application.example.com (We have used our own company domain i.e androidtutorialpoint.com. Similarly you can use yours).
  2. Click Next and choose Min SDK, we have kept the default value. Again Click Next and Choose Blank Activity .
  3. Choose the Activity as MainActivity and click next.
  4. Leave all other things as default and Click Finish.
A new project will be created and gradle will resolve all the dependencies.
We will create a separate Activity for splash screen named SplashScreenActivity. This activity will be responsible for making rotatory animated image and after sometime MainActivity will open. In MainActivity, “Android Splash Screen” will be shown on screen. You can see demo of this project in video given at start of tutorial.

Video demo 




Layout of Android Splash Screen Maker

Make a new layout file named splashscreenmaker.xml at path …/AndroidSplashScreen/app/src/main/res/layout/ and add following code:

splashscreenmaker.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
                xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent"
                android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".SplashScreenActivity">
    <TextView android:text="Splash Screen" android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textSize="45sp"
              android:layout_alignParentBottom="true"
              android:layout_centerHorizontal="true"
              android:id="@+id/txt" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/splashscreen" />
</RelativeLayout>
In the above code there is a ImageView which is for animated view and a TextView that appears at the bottom. Also add an image in drawable folder with the name splashscreen. This image will be rotated. Also to animate we have to create a new directory named anim at in the resource directory (at path …/AndroidSplashScreen/app/src/main/res/anim) and add two animation resource file named rotate.xml and antirotate.xml. These two files will be responsible for rotation of image.

rotate.xml

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android">
    <rotate
        android:duration="4000"
        android:fromDegrees="0"
        android:toDegrees="720"
        android:pivotX="50%"
        android:pivotY="50%"
        ></rotate>
</set>

antirotate.xml

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="360"
        android:toDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        ></rotate>
</set>
Finally file structure will look as follows:
Android Splash Screen Tutorial

Android Splash Screen Activity

Create a new java file named SplashScreenActivity.java at the same path as that of MainActivity.java (…/AndroidSplashScreen/app/src/main/java/com/androidtutorialpoint/androidsplashscreen) and add following code:

SplashScreenActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
package com.androidtutorialpoint.androidsplashscreen;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
/**
 * Created by navneet on 12/11/16.
 */
public class SplashScreenActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splashscreenmaker);
        final ImageView imageView = (ImageView) findViewById(R.id.imageView);
        final Animation animation_1 = AnimationUtils.loadAnimation(getBaseContext(),R.anim.rotate);
        final Animation animation_2 = AnimationUtils.loadAnimation(getBaseContext(),R.anim.antirotate);
        final Animation animation_3 = AnimationUtils.loadAnimation(getBaseContext(),R.anim.abc_fade_out);
        imageView.startAnimation(animation_2);
        animation_2.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }
            @Override
            public void onAnimationEnd(Animation animation) {
                imageView.startAnimation(animation_1);
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
            }
        });
        animation_1.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }
            @Override
            public void onAnimationEnd(Animation animation) {
                imageView.startAnimation(animation_3);
                finish();
                Intent i = new Intent(getBaseContext(),MainActivity.class);
                startActivity(i);
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
            }
        });
    }
}
In the above code we have created three object of animation i.e. animation_1,animation_2 and animation_3. First of all animation_2 is started using imageView.startAnimation(animation_2) which will constitute rotation of image in anticlockwise direction. After this next animation (animation_1) is started at onAnimationEnd of animation_2. animation_1 will is clockwise rotation of image. Finally MainActivity is initiated using Intent on onAnimationEnd of animation_1. animation_3 is responsible for fading off Image View.
Now only one thing is remaining that is to make SplashScreenActivity as launching activity and MainActivity as default. Make following changes in AndroidManifest.xml:

AndroidManifest.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.androidtutorialpoint.androidsplashscreen"
          xmlns:android="https://schemas.android.com/apk/res/android">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.DEFAULT"/>
            </intent-filter>
        </activity>
        <activity android:name=".SplashScreenActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
</manifest>
So our code of Android Splash Screen is complete. Run this code. Following screen will appear:
Android Splash Screen Tutorial
You can see demo of this tutorial in video given at start of tutorial to get better understanding of output.

Comments

Post a Comment