Create A Beautiful Splash Activity In Android Studio

How To Create A Beautiful Splash Activity In Android Studio

Create an eye-catching, beautiful splash activity for your android app in Android Studio. This is a simple way to create a splash activity in Android Studio easily with a minimalistic view…

This article also includes examples of these tutorials:

  • Running activity in Full Screen
  • Adding Images for ImageView
  • Hide the Toolbar/Action Bar in a specific activity
  • Switching Activities after a specific time
  • Example of a simple “thread” code

Getting Started – Prerequisite

Before we get started, We will need to set up a few things. Make sure you have properly installed the latest version of Android Studio and Android SDK.

Then either create a new project or open an existing project in Android Studio. Create a new “Empty Activity” naming it ‘SplashActivity‘ and place your app logo or the icon you want to show in your splash screen in your “Drawable” Folder (you can simply copy the logo then click on Drawable Folder from Android Studio and press “Ctrl” + “V” to place it in that folder) and name it “applogo

Now we are all set and ready to start creating our splash activity.

Designing The Splash Activity

Go to “res > layout” and open “activity_splash.xml” (or open whatever activity layout that you decided to use as a splash activity).

Now Follow the Steps Below:

  1. Change the root layout to “Co-Ordinator Layout“/”Relative Layout” from “Constraint Layout
  2. Insert/Drag ‘n Drop a “Vertical Linear Layout” inside the root layout. Set both height and width of that Linear Layout to ‘match-parent‘ and gravity to ‘center
  3. Then add an “ImageView” inside the Linear Layout and set height and width to ‘120dp‘. Additionally, you can add a TextView or add a margin at bottom of the ImageView or linear view to set the image a little bit up from the Vertical center.

So this is our basic design, we can modify it later according to our needs and beautify it more. Now we will move on to the coding part to make it alive.

Hiding The ActionBar/ToolBar

To make it more professional we must remove the default ActionBar/ToolBar. This can be done both programmatically and by changing themes. You can follow any one of them:

By Changing Theme Styles

By following this you will also hide/disable the default ActionBar/ToolBar for all the activities you have in your project, if you don’t want this you may hide it programmatically instead of by changing themes.

To hide the ActionBar/ToolBar, Go to res -> values -> styles.xml and change the base application to ‘Theme.AppCompat.Light.NoActionBar‘. So, the styles.xml file will look something like this:

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

Programmatically

This is best used if you want to hide the default ActionBar/ToolBar for only your splash activity and keep it for other activities.

To hide the ActionBar/ToolBar, Open your splash activity java file (e.g. SplashActivity.java ) and add this inside your ‘OnCreate‘ event:

if (getSupportActionBar() != null) { 
            getSupportActionBar().hide(); 
}

so your activity java file will look something like this:

import androidx.appcompat.app.AppCompatActivity;
import android.view.View; 
import android.os.Bundle;
  
public class MainActivity extends AppCompatActivity { 
  
    @Override
    protected void onCreate(Bundle savedInstanceState) 
    { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
        if (getSupportActionBar() != null) { 
            getSupportActionBar().hide(); 
        } 
    } 
}

Hiding The StatusBar (Optional)

Hiding the StatusBar will make the splash activity run in fullscreen but it completely depends on you, this is not a necessary part.

To hide StatusBar, go to the activity java file (e.g. SplashActivity.java). then import these classes along with other imports:

import android.view.Window;
import android.view.WindowManager;

Now, inside the ‘OnCreate‘ event and before the ‘setContentView(R.Layout.activity_splash);‘,
We will use the window manager to flag the activity/ start the activity in fullscreen:

requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);

Switching Activity After Specific Time

We will use a thread to take the user from our splash activity to another/main activity after 5 seconds/more (up to you). So, Before we Get started we need to import another class as we are going to use intent:

import android.content.Intent;

Now, to use a thread we will use these lines inside the ‘OnCreate‘ event and we will name the thread ‘th‘ :

Thread th = new Thread() {
  @Override
  public void run() {
    try {
  
    } catch (InterruptedException e) {
      e.printStackTrace();
    }
  }
};

Inside the try code ‘try{' 'codes here' '}‘ we will use the intent and sleep code to trigger the intent after a specific time.

Then We need to run the thread using its name (e.g. th). So, our final Thread Code will look like this:

Thread th = new Thread() {
  @Override
  public void run() {
    try {
      sleep(5000);
      Intent intent = new Intent(MainActivity.this, HomeActivity.class);
      startActivity(intent);
    } catch (InterruptedException e) {
      e.printStackTrace();
    }
  }
};
th.start();

Change ‘5000’ to any time you want. (1000ms = 1s)[Remember, Time must be in milliseconds ]

Adding Responsive Animation (Optional)

Additionally, you can add responsive animation to your splash activity. We won’t be writing about this here as this is completely your own choice. You can read our other article to do so:

How To Add Responsive Animation In Splash Activity In Android Studio – ZealTyro

Final Activity Layout Codes

So, Our Final Layout File Code Will Look Something Like This:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<ImageView
android:id="@+id/applogo"
android:layout_width="120dp"
android:layout_height="120dp"
app:srcCompat="@drawable/applogo" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Disclaimer: Indicate the location of the image logo you want to show in ImageView using ‘app:srcCompat’. Simply change the “applogo” with your image file name located in the Drawable folder.

Final Activity Java Codes

So, our Final Activity Java Code will look something like this:

package com.zealtyro.example;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
      WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(R.layout.activity_main);
      
    Thread th = new Thread() {
      @Override
      public void run() {
        try {
          sleep(5000);
          Intent intent = new Intent(MainActivity.this, HomeActivity.class);
          startActivity(intent);
        } catch (InterruptedException e) {
          e.printStackTrace();
        }
      }
    };
    th.start();
  }
}

We are all set, now try running the app. You have successfully completed the tutorial and now can create and design any type of Splash activity! Hoorah! Don’t forget to react, comment, and share this post…

Did you like it?