Create a Splash Screen in Android Studio with animations

Android, Android for Beginners, Android UI/UX Tutorials, Basics, UI UX

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

Let's Connect

Videos are always a better source for in-depth knowledge. So, connect with me at YouTube.

Download Project

Flutter Login App UI Source Code- How to Create a complete Flutter app - Flutter education app - Flutter app UI Design - Flutter Course - Flutter Complete App 2022
Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage

Latest Courses

Flutter Login App UI Source Code- How to Create a complete Flutter app - Flutter education app - Flutter app UI Design - Flutter Course - Flutter Complete App 2022
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorials

Flutter Profile page UI Design - Flutter app design 2023 - Profile Screen Flutter UI - Flutter 2023
Flutter Firebase phone authentication - Firebase Phone auth tutorial in flutter - Flutter Firebase phone number authentication 2022
Firebase Authentication in flutter - Flutter firebase authentication 2022 - firebase auth tutorial 2022 - firebase flutter auth
How to setup firebase in flutter 2022 - Flutter firebase setup
Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage

Join Our Mailing List

Join our mailing list to receive the latest, Free Courses, Video Tutorials, free codes and updates regarding Tutorials and services. You will also start getting coupons on the related services.

You have Successfully Subscribed!

FLUTTER APP

Learn Flutter App development from scratch. Create LOGIN APP that can be used with any application which requires Login Sign Up functionality.

You can watch it on YouTube or read and get source code from Blog Post.

You have Successfully Subscribed!