How to make a splash screen in android

Splash screens are normally used as loading screen in apps but sometime we need to display our brand name/logo on startup of an app for a fixed amount of time. Well this can be done using a simple function in onCreateView(). So, let’s start.

Things we’ll need:

  • Android Studio (Or your any favorite Android IDE)
  • Android Virtual Device (For testing the app) OR You can use your own real android phone.
  • Your 10 minutes of time.

Here I’ve assumed that you are using Android Studio and you’ve successfully created your project and build it already (Android Studio).

After creating your project create a new activity by right clicking on the auto generated MainActivity.java, in popup select New > Activity > Empty Activity.

Now in new android activity window that appears write your activity name as “Splash” and layout name as “activity_splash” (Here I’m getting an error because I’ve already created the activity) after that click on Finish.

popup

Make sure that your activity name (here “Splash”) extends AppCompatActivity instead of Activity. Now write down the following code in the very first line of blocks i.e., after AppCompatActivity {

 

private final int SPLASH_DISPLAY_LENGTH = 1500;

The SPLASH_DISPLAY_LENGTH is the duration of the splash screen to be displayed here I’ve set the duration for 1500 milliseconds (1.5 sec) but you can set it to as much time you want but don’t allow it to take too much of time as it is very bad user experience.

Now, in the onCreate() method of your activity write down the following code after setContentView method

new Handler().postDelayed(new Runnable(){
@Override
public void run() {
/* Intent to launch MainActivity.java*/
Intent mainIntent = new Intent(Splash.this,MainActivity.class);
Splash.this.startActivity(mainIntent);
Splash.this.finish();
}
}, SPLASH_DISPLAY_LENGTH);

Here postDelayed method is used to freeze the screen for some time as we stopped it for 1.5 seconds. The

Intent mainIntent = new Intent(Splash.this,MainActivity.class);
Splash.this.startActivity(mainIntent);

Is used to start the main or any activity you want after successful display of your splash screen, here we launch our MainActivity.java.

We are done with the coding part now let’s start my favorite part “the layout”.

In activity_splash.xml file we created I’ve added a simple drawable (android icon) with an ImageView and a text named “Music” with a TextView inside a RelativeLayout type Layout. I’ve aligned them to center to look more beautiful and applied a font style to my TextView. Note that, for now I haven’t set the ID’s for the views. Now our layout should look like this.

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
xmlns:app=”http://schemas.android.com/apk/res-auto&#8221;
android:orientation=”vertical” android:layout_width=”match_parent”
android:layout_height=”match_parent”>

<RelativeLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

<ImageView
android:id=”@+id/imageView”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_above=”@+id/textView2″
android:layout_centerHorizontal=”true”
app:srcCompat=”@mipmap/ic_launcher” />

<TextView
android:id=”@+id/textView2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_centerHorizontal=”true”
android:layout_centerVertical=”true”
android:fontFamily=”sans-serif-smallcaps”
android:text=”Music”
android:textSize=”70dp” />
</RelativeLayout>
</LinearLayout>

lay
The result layout

That’s good enough right. Now, run the project by clicking on the  run   button. If there’s no error in your project it’ll be look like this.

not
Running Splash Screen

Well! That’s it for a simple splash screen however we can see the system navigation bar on the top which is not good. So, to remove it we have to add this custom function.

private void hideSystemUI() {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
|   View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar

|   View.SYSTEM_UI_FLAG_FULLSCREEN// hide status bar
// remove the following flag for version < API 19
|   View.SYSTEM_UI_FLAG_IMMERSIVE
);
}

Now, call this function in onCreateView() after the above postDelayed() function and that’s it. The result of doing so is

final
No Notification Bar(Full Screen)

Yes! T his is our splash screen looking clean, beautiful and professional. If you liked this post please let me know in comments or if you’ve any problem feel free to ask.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s