How to create Android Splash Screen Animated

  • by

Hi Developers,

In this post let’s see how we can create an animated splash screen in Android. The splash screen will have an imageview and four Android LinearLayout which will have Android Fadeout animations.

How to create Android Splash Screen?
Download this icon from Iconfinder.com

Copy this icon into your Android Project’s res>drawable folder as
res >drawable>logo.png


Edit your activity_main.xml file as below:

res>layout>activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:src="@drawable/logo" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:orientation="vertical"
android:weightSum="2">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="0dp"
android:layout_weight="1"
android:background="@android:color/transparent"
android:orientation="horizontal"
android:weightSum="2">

<LinearLayout
android:id="@+id/linear1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#fff"
android:orientation="vertical" />

<LinearLayout
android:id="@+id/linear2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#fff"
android:orientation="vertical" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="0dp"
android:layout_weight="1"
android:background="@android:color/transparent"
android:orientation="horizontal"
android:weightSum="2">

<LinearLayout
android:id="@+id/linear3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#fff"
android:orientation="vertical" />

<LinearLayout
android:id="@+id/linear4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#fff"
android:orientation="vertical" />

</LinearLayout>

</LinearLayout>

</RelativeLayout>

The four LinearLayout with Id properties will fadeout in a sequential pattern and it will create an animated feel.

Create another android layout file with name welcome.xml. This will get called like a start page after Android Splash activity.

res >layout >welcome.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#fff">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="WELCOME"
android:textStyle="bold"
android:textColor="#000"
android:textSize="40sp" />
</RelativeLayout>

This will only contain Android TextView with Welcome text in the center of the screen.

Create anim folder inside res folder and animation file with name fade_out.xml
res>anim>fade_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<alpha
android:duration="500"
android:fromAlpha="1.0"
android:toAlpha="0.0" >
</alpha>
</set>

Now edit your MainActivity.java file as below:

MainActivity.java:

package com.my.mysplash;

import android.content.Intent;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

LinearLayout linear1, linear2, linear3, linear4;
int i = 1;
Animation fadeOut;

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

linear1 = findViewById(R.id.linear1);
linear2 = findViewById(R.id.linear2);
linear3 = findViewById(R.id.linear3);
linear4 = findViewById(R.id.linear4);

fadeOut = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_out);
linear1.startAnimation(fadeOut);

fadeOut.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {

}

@Override
public void onAnimationEnd(Animation animation) {
Log.e("Value of i", String.valueOf(i));
if (i == 1) {
i++;
linear1.setBackgroundColor(Color.TRANSPARENT);
linear2.startAnimation(fadeOut);

} else if (i == 2) {
i++;
linear2.setBackgroundColor(Color.TRANSPARENT);
linear3.startAnimation(fadeOut);

} else if (i == 3) {
i++;
linear3.setBackgroundColor(Color.TRANSPARENT);
linear4.startAnimation(fadeOut);

} else if (i == 4) {
i++;
linear4.setBackgroundColor(Color.TRANSPARENT);
linear1.startAnimation(fadeOut);

} else {
startActivity(new Intent(MainActivity.this, Welcome.class));
}
}

@Override
public void onAnimationRepeat(Animation animation) {

}
});
}
}

From the code you can see I’m animating each Android LinearLayout after its first one animation ends. This way Logo revealing effect is created but part by part.

Add another java file with name Welcome.java. This will be called once all the layout has animated sequentially and close the splash screen.

Welcome.java:

package com.my.mysplash;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;

public class Welcome extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.welcome);

}
}

And here is my Android Manifest file, in case you need it. 🙂

AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.my.mysplash">

<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/Theme.AppCompat.Light.NoActionBar.FullScreen">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".Welcome"
android:theme="@style/Theme.AppCompat" />
</application>

</manifest>

And my Styles.xml
res>values>styles.xml:

<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="Theme.AppCompat.Light.NoActionBar.FullScreen" parent="@style/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>

Download Source Code

Thank You for Reading :).

Hope you found this helpful.

 


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.