Splash Screen with Animation in Android

Splash screen with Animation in Android

Splash Screen is the first screen of an app. The splash screen is used to display some basic information about the app, like the brand logo, name, slogan, etc. It’s like an introduction to the app.

So, now you are going to create a splash screen, it includes a logo, name, and slogan.

  • Before going to start, copy your logo or image, and paste it in the res/drawable directory.
Paste the image in drawable directory
Paste the image in drawable directory
Paste the image in drawable directory
  • In the splash screen, you don’t need Action Bar. So go to the res/values/style.xml file and change the DarkActionBar theme to the NoActionBar theme.
Change DarkActionBar to NoActionBar
Change DarkActionBar to NoActionBar
Change DarkActionBar to NoActionBar
  • Now open the activity_splash.xml file. In Android Tutorial, Layout in Android blog, we have already discussed how to write XML and what is the need for XML. CLICK HERE to know more.

Create activity_splash.xml file:

activity_splash.xml

<?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"
tools:context=".SplashActivity"
android:orientation="vertical"
android:background="@color/colorPrimary">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
android:id="@+id/logo"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/gbandroidblogs_logo"
android:layout_centerInParent="true"
android:layout_marginTop="50dp"/>

</RelativeLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GBAndroidBlogs"
android:textSize="35sp"
android:textStyle="bold"
android:textColor="@android:color/white"
android:layout_centerHorizontal="true"/>

</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/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="| Android Tutorial | UI design | \n | Mini projects |"
android:layout_centerHorizontal="true"
android:textSize="20sp"
android:gravity="center"
android:textColor="@android:color/white"
android:layout_marginBottom="50dp"/>
</RelativeLayout>

</LinearLayout>

</LinearLayout>

Create Animation File:

  • You are going to use three animations. Top, Bottom, and Middle Animations.
  • To add animation files, first create the anim directory inside the res folder.
Create anim directory
Create anim directory
Create anim directory
  • Create three Drawable Resource File inside anim directory. Right click on anim > New > Drawable Resource File, like this create three files.

top_animation:

Top-animation
Top-animation
Top-animation

bottom_animation:

Bottom-animation
Bottom-animation
Bottom-animation

middle_animation:

middle_animation
middle_animation
middle_animation

For more visit https://www.gbandroidblogs.com/2020/07/splash-screen-with-animation-in-android.html

Thank you!

Hi everyone, myself Golap an Android app developer with UI/UX designer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store