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.
- Create a new project in Android Studio
- 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: 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);
}
}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
