Android Splash Screen With Animations in Android Studio | Material Design – 2020

by | Jan 11, 2020 | Android, Android for Beginners, Android Material Design Tutorials, Android UI/UX Tutorials, Basics, Bull's Rent, 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 traveling android app with source code.

We will also create Login, Signup, profile screen, phone authentication and many other screens in our tutorial.

So, subscribe to our mailing list to get the code straight into your inbox.

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 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: How to Remove the Action Bar in the activity?

Usually, we don’t want an action bar to be shown in the activity.

So, to remove or hide the action bar in android you have to follow the steps below:

  • Go to the res folder
  • Open values folder
  • Inside values Open styles file and change the text saying DarkActionBar to NoActionBar inside <style> tags

As shown in the picture below

as we see in this code

<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>

Step #3: Hide Status Bar in android activity?

To hide the status bar in an android studio from the specific activity. Open the Java file of that activity and add the single line provided below, above the setContentVIew() in onCreate() method in .java of code

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

on above of the line saying:

setContentView(R.layout.activity_main);

Your code will be look alike.

Step #4: Design the XML file of splash screen

In the first place, we have to design our splash screen inside the first or main activity of the android studio application.

As a rule of the android studio, it is named as MainActivity and its XML file is named as “activity_main.xml”

Hence You can create any type of design you like for the splash screen using your skills.

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

In this “acitivity_main.xml”, firstly we have to design a splash screen. So for that, we have to set background color  like this below code

 android:background="#fece2f"

Then, we have to set an image, which we will use on aur splash screen like below code

<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" />

In the end, we have to set the text named “BULL’S RENT” and set a slogan like code given

<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" />

Step #5: Code in MainActivity.java to call next screen after few seconds.

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

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

Step #6: Create animation resource file for animations in android

To create a new animation resource file in android studio.

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

Top animation source code.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="0%"
        android:fromYDelta="-50%" />
    <alpha
        android:duration="1500"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
</set>

Bottom Animation Source 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>

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

Make animations and set animations on elements

 //Animations 
topAnim = AnimationUtils.loadAnimation(this, R.anim.top_animation);
bottomAnim = AnimationUtils.loadAnimation(this, R.anim.bottom_animation);
//Set animation to elements 
image.setAnimation(topAnim);
logo.setAnimation(bottomAnim);
slogan.setAnimation(bottomAnim);

Get Complete Source code for Bull’s Rent App

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