In this tutorial, we are going to create a splash screen android tutorial with animations in android studio.

In short, this is the first tutorial of our complete application in which we will be creating a City Guide App  android app with source code. Hence follow us to get the latest news about our android studio tutorials. Now getting to the point. In the first place, we have to know what is splash screen.

What is a Splash Screen?

Splash Screen is a welcome screen that contains, images, logos or the slogan with app version code.

As a rule splash screen appears as a first screen on apps and used for Branding Purpose or used to load the main content of the application.

Steps to Create a splash screen android with animations

To create a splash screen in an android with animations. We need to create some Java classes, some XML layout classes and write the code about how to animate that splash screen.

 

1- Creation of Splash screen.

2- Animations in Android Studio

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

Step #1: Create a new Android Studio Project

Step #2: Design XML Activity splash screen android

Firstly, we will start our splash screen android by creating XML activity. So, create a “splash_screen.xml” activity. As we have created and set up our whole project in the previous video. We build it professionally, so better check it.

To design the splash screen, get into the “splash_screen.xml” activity.

Further, use the split view for a better design. First of all, we need to add a background color before designing. So the color we were using for splash screen android is  “color primary”.

Likewise, if you want another design then check the Splash screen design with 3 types of animations.

 Get code below

<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fece2f"

Then we have to add an image view with match parent width and height for constraint layout and add image on the screen.

<ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="10dp"
        android:layout_marginBottom="32dp"
        android:src="@drawable/bulls_rent_logo_white"
        android:transitionName="logo_image"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

 Also, we have to assign “id” for animations and text views for the slogan.

<TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:fontFamily="@font/bungee"
        android:text="Bull's Rent"
        android:textAlignment="center"
        android:textSize="70sp"
        android:transitionName="logo_text"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:fontFamily="@font/antic"
        android:text="Nation wide Car rental app"
        android:textAlignment="center"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

Below is the splash screen in the picture that we created.

Step #3: Add data in strings

Open up the projects. Then go to app and inside it click on values and click on “string.xml” file. Like picture given below

Step #4:Design Animations splash screen android

To add animations to splash screen android, go to the resouce located at left side of android. Then right click on “res” , click on new and then click on “directory”. A new window pop up appear, name it “anim”, make sure it would be in small letters and click ok. As shown below in picture.

After, making directory with name “anim”. Then , inside “anim” folder, right click new and click on “Animation resource file”. A new window appear and named it “side anim”, just like below in picture

As we have created “side_anim.xml. Similarly, we have to make “bottom_anim.xml”.

Code in given below

Step #5:Call animations in (MainActivity.java) and Assign to Elements

In java file (splash_acreen.java) we will have to create variables to create hooks because, in the android studio, we have 2 things in 1 activity. The first one is design XML and the second one is the main java so, to get design things. We have to create hooks. For that, we have to make variables of text view and image view.

Create Hooks

These hooks basically, hooks aur design elements to java code.

Code is given below

image = findViewById(R.id.imageView);
logo = findViewById(R.id.textView);
slogan = findViewById(R.id.textView2);

Create Animations

To create animations, firstly we have to create two variables, sideanim and bottom anim beacuse we have to hook animation java with design.

Code is given below.

topAnim = AnimationUtils.loadAnimation(this, R.anim.top_animation);
bottomAnim = AnimationUtils.loadAnimation(this, R.anim.bottom_animation);

Set Animations on elements

To set animation on element, we have to write animation name and set anim which we want to use. For background image,we use sideanim and for poweredline, we use bottom anim.

As given in code below.

image.setAnimation(topAnim);
logo.setAnimation(bottomAnim);
slogan.setAnimation(bottomAnim);

Step#6: Hold time splash screen

For holding time of splash screen android, we have to create a variable of “splash_timer” and it will be 5sec. Inside this, we will create a function or handler, which will call post delayed function. Pass “new runnable inside post delayed function.

Create intent inside this function to jump to another activity of “user dashboard”

By running application splash screen android appear and after 5 sec, dashboard appear

As given code below.

//Calling New Activity after SPLASH_SCREEN seconds 1s = 1000 
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                Intent intent = new Intent(MainActivity.this, Login.class);
                startActivity(intent);
                finish();
            }
            }, //Pass time here
                SPLASH_SCREEN);
    }
}