Android Splash Screen Animation Animated Attractive Landing Screen

Android Splash Screen Animation example tutorial is developed here.

Android Splash Screen Animation example guide you to make animated splash/landing screen in android.

You generally put a well designed image in splash screen in android app.

Try some awesome splash animations in this tutorial for your next android app.

Splash Screen is the first impression of android application, so having cool and attractive splash screen will give an extra advantage to the user for your app.

In this tutorial, I will implement two different types of animations.

Animations are customizable and you can change colors, directions etc. features of the animations.

First, check the output of this example, then we will develop it.

Step 1: Create a new project in Android Studio.

Choose Empty Activity as default activity when you create a new project in android studio.

Step 2: Updating build.gradle (Module:app) file

Copy following source code into dependencies{}

compile 'com.github.ViksaaSkool:AwesomeSplash:v1.0.0'

We will use this github library to achieve our goal.

This library will simply download the required classes to implement the animation.

Step 3: Updating colors.xml file

Go to res->values->colors.xml file

Update colors.xml as per below source code.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="Wheat">#5dff40</color>
    <color name="back">#c10f97</color>
    <color name="Wheat2">#ffcc40</color>
    <color name="back2">#075056</color>
</resources>

You have to defined colors you want to use in this colors.xml file.

At the time of the execution, we will use these colors by giving the reference like R.color.back

Step 4 : Making assets directory.

Look closely at the below image.

android splash screen animation — directory structure

We need to create a directory named assets.

Green border is drawn in the above image where the assets folder is located.

Make assets inside the app folder as shown in the image.

Inside assets folder, make a new folder named fonts. Copy two ttf files inside fonts as shown in the image.

These two ttf files are used to change the fonts on the splash screen. Pacifico and Roboto are the two different types of the fonts.

You can use any type of ttf file which you like. Just add the ttf file in fonts folder.

Download ttf files

[sociallocker] Download ttf fonts [/sociallocker]

Step 5: Making First Animation Activity.

Create a new activity named “FirstAnimation.”

Copy below code into FirstAnimation.java

import android.widget.Toast;
import com.daimajia.androidanimations.library.Techniques;
import com.viksaa.sssplash.lib.activity.AwesomeSplash;
import com.viksaa.sssplash.lib.cnst.Flags;
import com.viksaa.sssplash.lib.model.ConfigSplash;

public class FirstAnimation extends AwesomeSplash {

    //DO NOT OVERRIDE onCreate()!
    //if you need to start some services do it in initSplash()!

    @Override
    public void initSplash(ConfigSplash configSplash) {

			/* you don't have to override every property */

        //Customize Circular Reveal
        configSplash.setBackgroundColor(R.color.back); //any color you want form colors.xml
        configSplash.setAnimCircularRevealDuration(2000); //int ms
        configSplash.setRevealFlagX(Flags.REVEAL_RIGHT);  //or Flags.REVEAL_LEFT
        configSplash.setRevealFlagY(Flags.REVEAL_BOTTOM); //or Flags.REVEAL_TOP

        //Choose LOGO OR PATH; if you don't provide String value for path it's logo by default

        //Customize Logo
        configSplash.setLogoSplash(R.mipmap.ic_launcher); //or any other drawable
        configSplash.setAnimLogoSplashDuration(2000); //int ms
        configSplash.setAnimLogoSplashTechnique(Techniques.Bounce); //choose one form Techniques (ref: https://github.com/daimajia/AndroidViewAnimations)


        //Customize Path
       // configSplash.setPathSplash(SyncStateContract.Constants.DROID_LOGO); //set path String
        configSplash.setOriginalHeight(400); //in relation to your svg (path) resource
        configSplash.setOriginalWidth(400); //in relation to your svg (path) resource
        configSplash.setAnimPathStrokeDrawingDuration(3000);
        configSplash.setPathSplashStrokeSize(3); //I advise value be <5
        configSplash.setPathSplashStrokeColor(R.color.colorAccent); //any color you want form colors.xml
        configSplash.setAnimPathFillingDuration(3000);
        configSplash.setPathSplashFillColor(R.color.Wheat); //path object filling color


        //Customize Title
        configSplash.setTitleSplash("DemoNuts"); //change your app name here
        configSplash.setTitleTextColor(R.color.Wheat);
        configSplash.setTitleTextSize(30f); //float value
        configSplash.setAnimTitleDuration(3000);
        configSplash.setAnimTitleTechnique(Techniques.FlipInX);
        configSplash.setTitleFont("fonts/Pacifico.ttf"); //provide string to your font located in assets/fonts/

    }

    @Override
    public void animationsFinished() {
        Toast.makeText(FirstAnimation.this, "Go to MainActivity now!!", Toast.LENGTH_SHORT).show();
        //transit to another activity here
        //or do whatever you want
    }
}

As you can see in the above image, there are plenty of properties to work with.

You can play around with different colors, animation styles, font styles, text colors, text size, title text color and size etc.

For example, you can change font size with the below line

configSplash.setTitleTextSize(30f); //float value

To change the color of the text, use the following line

 configSplash.setTitleTextColor(R.color.Wheat);

Change the animation duration by the following line

configSplash.setAnimTitleDuration(3000);

In the above line 3000 is the value in the mili seconds. You can change this value as per your requirements.

Set the animation technique with below line

configSplash.setAnimTitleTechnique(Techniques.FlipInX);

Write your app name in following

configSplash.setTitleSplash("DemoNuts"); //change your app name here

To set the icon of your app, use the below line

configSplash.setLogoSplash(R.mipmap.ic_launcher); //or any other drawable

Animation Style of the icon can be set in the following line

configSplash.setAnimLogoSplashTechnique(Techniques.Bounce); //choose one form Techniques

Step 6: Making Second Animation Activity.

Make a new activity named SecondAnimationActivity.

Copy following code into SecondAnimationActivity.java

import android.widget.Toast;
import com.daimajia.androidanimations.library.Techniques;
import com.viksaa.sssplash.lib.activity.AwesomeSplash;
import com.viksaa.sssplash.lib.cnst.Flags;
import com.viksaa.sssplash.lib.model.ConfigSplash;

public class SecondAnimationActivity extends AwesomeSplash {

    //DO NOT OVERRIDE onCreate()!
    //if you need to start some services do it in initSplash()!

    @Override
    public void initSplash(ConfigSplash configSplash) {

			/* you don't have to override every property */

        //Customize Circular Reveal
        configSplash.setBackgroundColor(R.color.back2); //any color you want form colors.xml
        configSplash.setAnimCircularRevealDuration(2000); //int ms
        configSplash.setRevealFlagX(Flags.REVEAL_LEFT);  //or Flags.REVEAL_LEFT
        configSplash.setRevealFlagY(Flags.REVEAL_TOP); //or Flags.REVEAL_TOP

        //Choose LOGO OR PATH; if you don't provide String value for path it's logo by default

        //Customize Logo
        configSplash.setLogoSplash(R.mipmap.ic_launcher); //or any other drawable
        configSplash.setAnimLogoSplashDuration(2000); //int ms
        configSplash.setAnimLogoSplashTechnique(Techniques.Bounce); //choose one form Techniques (ref: https://github.com/daimajia/AndroidViewAnimations)


        //Customize Path
        // configSplash.setPathSplash(SyncStateContract.Constants.DROID_LOGO); //set path String
        configSplash.setOriginalHeight(400); //in relation to your svg (path) resource
        configSplash.setOriginalWidth(400); //in relation to your svg (path) resource
        configSplash.setAnimPathStrokeDrawingDuration(3000);
        configSplash.setPathSplashStrokeSize(3); //I advise value be <5
        configSplash.setPathSplashStrokeColor(R.color.colorAccent); //any color you want form colors.xml
        configSplash.setAnimPathFillingDuration(3000);
        configSplash.setPathSplashFillColor(R.color.Wheat2); //path object filling color


        //Customize Title
        configSplash.setTitleSplash("DemoNuts"); //change your app name here
        configSplash.setTitleTextColor(R.color.Wheat2);
        configSplash.setTitleTextSize(30f); //float value
        configSplash.setAnimTitleDuration(3000);
        configSplash.setAnimTitleTechnique(Techniques.FlipInX);
        configSplash.setTitleFont("fonts/Pacifico.ttf"); //provide string to your font located in assets/fonts/

    }

    @Override
    public void animationsFinished() {
        Toast.makeText(SecondAnimationActivity.this, "Go to MainActivity now!!", Toast.LENGTH_SHORT).show();
        //transit to another activity here
        //or do whatever you want
    }
}

All the methods used in this class are similar to that of FirstAnimation.java class.

I have just changed some of animation techniques and color and font.

Step 7: Updating MainActivity

Update activity_main.xml as per below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="demonuts.splashanimateddemonuts.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fscreen"
        android:text="First Splash Screen" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:id="@+id/sscreen"
        android:text="Second Splash Screen" />

</LinearLayout>

Update MainActivity.java as per following

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private Button btnF, btnS;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnF = (Button) findViewById(R.id.fscreen);
        btnS = (Button) findViewById(R.id.sscreen);

        btnF.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this,FirstAnimation.class);
                startActivity(intent);
            }
        });

        btnS.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this,SecondAnimationActivity.class);
                startActivity(intent);
            }
        });

    }
}

We are just opening two different activities with button click in Main activity. Nothing much more.