To create a modern splash screen in android studio with animations you can either watch a video or go through the article below. You can also get the code below in this article.
What is a Splash Screen?
Splash screen is a first screen appears in android applications when we open an app for the first time. Splash screen is also called Welcome Screen or the First Screen and it is becoming more common then ever because they not just screens but playing a vital role in creating a brand. On the splash screen’s we usually display company’s logo, slogan or their tagline so, every time when a user opens the app. He/she first saw the company and after that go inside the app. So, with the passage of time users start remembering their name and logo’s.
Steps we need to Create a splash screen in Android Studio
To create a splash screen in android studio with animations we need to create some Java classes and some xml layout classes. So we need
- Create a new Project in Android Studio
- Change the style of an app to NoActionBar to remove Action Bar
- Remove the title bar.
- Design the .xml file of first Activity for Splash Screen
- Write code in .java file of first Activity
Animations in Android Studio
- Create a new folder inside res and name it anim
- Add a new resource (.xml) file inside anim folder
- Write the animation code in that new resource file
- Call that animation inside Activity’s Java class
<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>No# 3: Remove Title Bar in Splash Screen in Android Studio
To remove a title bar in android studio. Paste the code just above the setContentVIew() in onCreate() method in .java
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);No# 4: Design Splash Screen (.xml) in Android Studio
To design a Splash Screen in Android Studio you just need to copy the code below inside your Activity’s .xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1f1f1d"
android:orientation="vertical"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="@+id/first_line"
android:layout_width="20dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:background="@drawable/white_line" />
<View
android:id="@+id/second_line"
android:layout_width="20dp"
android:layout_height="100dp"
android:layout_marginLeft="8dp"
android:layout_toRightOf="@+id/first_line"
android:background="@drawable/red_line" />
<View
android:id="@+id/third_line"
android:layout_width="20dp"
android:layout_height="250dp"
android:layout_marginLeft="8dp"
android:layout_toRightOf="@+id/second_line"
android:background="@drawable/white_line" />
<View
android:id="@+id/fourth_line"
android:layout_width="20dp"
android:layout_height="200dp"
android:layout_marginLeft="8dp"
android:layout_toRightOf="@+id/third_line"
android:background="@drawable/red_line" />
<View
android:id="@+id/fifth_line"
android:layout_width="20dp"
android:layout_height="220dp"
android:layout_marginLeft="8dp"
android:layout_toRightOf="@+id/fourth_line"
android:background="@drawable/green_line" />
<View
android:id="@+id/sixth_line"
android:layout_width="20dp"
android:layout_height="150dp"
android:layout_marginLeft="8dp"
android:layout_toRightOf="@+id/fifth_line"
android:background="@drawable/white_line" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="A"
android:textColor="#fff"
android:textSize="150sp"
app:fontFamily="@font/baloo" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<TextView
android:id="@+id/tagLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50dp"
android:text="Android Developer"
android:textColor="#8A8585"
android:textSize="24sp"
app:fontFamily="cursive" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>No# 5: Code in Java file of MainActivity
we will call new activity after some specific seconds and for that we first need to create hooks and then write code inside onCreate() method to call next Activity.
No# 6: Create a new animation resource file for animations in android
- Go to res folder and create a new folder in it with a name anim
- Create 3 new Resource files with names top_animation, bottom_animation, middle_animation inside anim folder
a: Top Animation 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="-500%" />
<alpha
android:duration="1500"
android:fromAlpha="0.1"
android:toAlpha="1.0" />
</set>b: Middle Animation Code
.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1500"
android:fromXDelta="-200%"
android:fromYDelta="0%" />
<alpha
android:duration="1500"
android:fromAlpha="0.1"
android:toAlpha="1.0" />
</set>c: Bottom Animation 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>No# 7: Call animations in (MainActivity.java) and Assign to Elements
package com.taimoor.splashscreen;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private static int SPLASH_TIME_OUT = 5000;
//Hooks
Viewfirst,second,third,fourth,fifth,sixth;
TextView a, slogan;
//Animations
Animation topAnimantion,bottomAnimation,middleAnimation;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main);
//Hooks
first = findViewById(R.id.first_line);
second = findViewById(R.id.second_line);
third = findViewById(R.id.third_line);
fourth = findViewById(R.id.fourth_line);
fifth = findViewById(R.id.fifth_line);
sixth = findViewById(R.id.sixth_line);
a = findViewById(R.id.a);
slogan = findViewById(R.id.tagLine);
//Animation Calls
topAnimantion = AnimationUtils.loadAnimation(this, R.anim.top_animantion);
bottomAnimation = AnimationUtils.loadAnimation(this, R.anim.bottom_animantion);
middleAnimation = AnimationUtils.loadAnimation(this, R.anim.middle_animation);
//-----------Setting Animations to the elements of Splash
Screen-------- - first.setAnimation(topAnimantion);
second.setAnimation(topAnimantion);
third.setAnimation(topAnimantion);
fourth.setAnimation(topAnimantion);
fifth.setAnimation(topAnimantion);
sixth.setAnimation(topAnimantion);
a.setAnimation(middleAnimation);
slogan.setAnimation(bottomAnimation);
//Splash Screen Code to call new Activity after some time
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Calling new Activity
Intent intent = new Intent(MainActivity.this, secondActivity.class);
startActivity(intent);
finish();
}
}, SPLASH_TIME_OUT);
}
}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
