Create a Splash Screen in Android Studio with animations

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

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

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

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!

COURSES

Android firebase app - android app 2022 - firebase android app - bulls rent app - coding with t app - android app
android complete login signup product by taimoor sikander free for any type of android app
Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design