Android Splash Screen Animation Animated Attractive Landing Screen Example

 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 the splash screen in the 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 define 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.

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);

            }

        });

    }

}