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.
- Create a new project in Android Studio
- Remove the action bar.
- Remove the top status bar by using the code below
- Design the .xml file of first Activity for Splash Screen
- Write code in .java file of first Activity
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
To learn in detail just follow our Youtube tutorial..
Android Related Videos
- Design a Modern Dashboard
- Material Design Login Screen with Shared Animations
- Create a Navigation Drawer Material Design in 2020
- Design Responsive Android App to fit all screen sizes
Related Articles that you might want to check out.
- Create a new project in android studio for beginners?
- How to create an Account on Fiverr and start earning?
- Create a Gig ob Fiverr and start selling specific services.
- How To Start Blogging and Make Money?
Our Projects Make Us Proud
- Building and Construction Company
- Chakwal.CO | Group Of Companies
- Online Buying and Selling Of Properties
My Latest Work
