Splash Screen in Android Studio – City Guide App – Part 2

by | Mar 10, 2020 | Android, Android for Beginners, Android UI/UX Tutorials, Basics, City Guide App, UI UX | 0 comments

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

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