Create a Splash Screen in Android Studio with animations

by taimoor | Nov 28, 2019 | Android, Android for Beginners, Android UI/UX Tutorials, Basics, UI UX | 0 comments

how-to-create-a-splash-screen-in-android-studio-1

To create a modern splash screen in android studio with animations you can either watch a video or go through the article below. You can also get the code below in this article.

What is a Splash Screen?

Splash screen is a first screen appears in android applications when we open an app for the first time. Splash screen is also called Welcome Screen or the First Screen and it is becoming more common then ever because they not just screens but playing a vital role in creating a brand. On the splash screen’s we usually display company’s logo, slogan or their tagline so, every time when a user opens the app. He/she first saw the company and after that go inside the app. So, with the passage of time users start remembering their name and logo’s.

Steps we need to Create a splash screen in Android Studio

To create a splash screen in android studio with animations we need to create some Java classes and some xml layout classes. So we need

Create a new Project in Android Studio
Change the style of an app to NoActionBar to remove Action Bar
Remove the title bar.
Design the .xml file of first Activity for Splash Screen
Write code in .java file of first Activity

Animations in Android Studio

Create a new folder inside res and name it anim
Add a new resource (.xml) file inside anim folder
Write the animation code in that new resource file
Call that animation inside Activity’s Java class

No# 1: Create a new Android Studio Project

Check out how to create a new Android Studio project and make edits.

No# 2: Remove Action Bar from Android App in Android Studio

To remove a action bar in android studio.

Go to res folder
Open values folder
Inside values Open styles file and paste the code below or simply change at theend of first line of <style> to NoActionBar

<resources> <!-- Base application theme. -->
    <style
        name="AppTheme"
        parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

No# 3: Remove Title Bar in Splash Screen in Android Studio

To remove a title bar in android studio. Paste the code just above the setContentVIew() in onCreate() method in .java

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

No# 4: Design Splash Screen (.xml) in Android Studio

To design a Splash Screen in Android Studio you just need to copy the code below inside your Activity’s .xml file.

<?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"
    android:background="#1f1f1d"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <View
            android:id="@+id/first_line"
            android:layout_width="20dp"
            android:layout_height="50dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/white_line" />

        <View
            android:id="@+id/second_line"
            android:layout_width="20dp"
            android:layout_height="100dp"
            android:layout_marginLeft="8dp"
            android:layout_toRightOf="@+id/first_line"
            android:background="@drawable/red_line" />

        <View
            android:id="@+id/third_line"
            android:layout_width="20dp"
            android:layout_height="250dp"
            android:layout_marginLeft="8dp"
            android:layout_toRightOf="@+id/second_line"
            android:background="@drawable/white_line" />

        <View
            android:id="@+id/fourth_line"
            android:layout_width="20dp"
            android:layout_height="200dp"
            android:layout_marginLeft="8dp"
            android:layout_toRightOf="@+id/third_line"
            android:background="@drawable/red_line" />

        <View
            android:id="@+id/fifth_line"
            android:layout_width="20dp"
            android:layout_height="220dp"
            android:layout_marginLeft="8dp"
            android:layout_toRightOf="@+id/fourth_line"
            android:background="@drawable/green_line" />

        <View
            android:id="@+id/sixth_line"
            android:layout_width="20dp"
            android:layout_height="150dp"
            android:layout_marginLeft="8dp"
            android:layout_toRightOf="@+id/fifth_line"
            android:background="@drawable/white_line" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="A"
            android:textColor="#fff"
            android:textSize="150sp"
            app:fontFamily="@font/baloo" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom">

            <TextView
                android:id="@+id/tagLine"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="50dp"
                android:text="Android Developer"
                android:textColor="#8A8585"
                android:textSize="24sp"
                app:fontFamily="cursive" />
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

No# 5: Code in Java file of MainActivity

we will call new activity after some specific seconds and for that we first need to create hooks and then write code inside onCreate() method to call next Activity.

No# 6: Create a new animation resource file for animations in android

Go to res folder and create a new folder in it with a name anim
Create 3 new Resource files with names top_animation, bottom_animation, middle_animation inside anim folder

a: Top Animation Code

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1500"
        android:fromXDelta="0%"
        android:fromYDelta="-500%" />
    <alpha
        android:duration="1500"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
</set>

b: Middle Animation Code

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1500"
        android:fromXDelta="-200%"
        android:fromYDelta="0%" />
    <alpha
        android:duration="1500"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
</set>

c: Bottom Animation Code

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1500"
        android:fromXDelta="0%"
        android:fromYDelta="100%" />
    <alpha
        android:duration="1500"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
</set>

No# 7: Call animations in (MainActivity.java) and Assign to Elements

package com.taimoor.splashscreen;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private static int SPLASH_TIME_OUT = 5000;
    //Hooks
    Viewfirst,second,third,fourth,fifth,sixth;
    TextView a, slogan;
    //Animations
    Animation topAnimantion,bottomAnimation,middleAnimation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);
        //Hooks
        first = findViewById(R.id.first_line);
        second = findViewById(R.id.second_line);
        third = findViewById(R.id.third_line);
        fourth = findViewById(R.id.fourth_line);
        fifth = findViewById(R.id.fifth_line);
        sixth = findViewById(R.id.sixth_line);
        a = findViewById(R.id.a);
        slogan = findViewById(R.id.tagLine);

        //Animation Calls
        topAnimantion = AnimationUtils.loadAnimation(this, R.anim.top_animantion);
        bottomAnimation = AnimationUtils.loadAnimation(this, R.anim.bottom_animantion);
        middleAnimation = AnimationUtils.loadAnimation(this, R.anim.middle_animation);

        //-----------Setting Animations to the elements of Splash
        Screen-------- - first.setAnimation(topAnimantion);
        second.setAnimation(topAnimantion);
        third.setAnimation(topAnimantion);
        fourth.setAnimation(topAnimantion);
        fifth.setAnimation(topAnimantion);
        sixth.setAnimation(topAnimantion);
        a.setAnimation(middleAnimation);
        slogan.setAnimation(bottomAnimation);

        //Splash Screen Code to call new Activity after some time
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                Calling new Activity
                Intent intent = new Intent(MainActivity.this, secondActivity.class);
                startActivity(intent);
                finish();
            }
        }, SPLASH_TIME_OUT);
    }
}

To learn in detail just follow our Youtube tutorial..

Android Related Videos

Related Articles that you might want to check out.

Our Projects Make Us Proud

My Latest Work

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

Download City Guide

Download Bulls Rent