Android Splash Screen Tutorial

Android splash screen is normally used to show a logo while the application is loading. It could be implemented in two ways, one method has a layout and the other doesn’t has a layout. Android Splash Screen according to Google should not contain any layout and its true a splash screen is supposed to show something to the user while the application opens, using a layout will not allow you to set it during the loading but after loading just like an activity. The time a mobile phone takes to load an applications is meant to be used as splash screen. But some people needs a layout to make some attractive designs on the splash screen therefore we are going to discuss both the methods of implementing splash screen.

Android Splash Screen with a Layout

Let’s see how to implement an android splash screen with a layout file. But remember this is not the right way to implement splash screen, still if you need a layout then this is the only way. Watch the video and follow the steps, all the programs are available below so that you can copy and paste them.

Main Steps for implementing Android Splash Screen:

1. Create a new activity named SplashScreen.
2. Go to Android – app – New – Activity – Empty Activity.
3. Design the XML part, see the video.
4. Set the timer in the java file.
5. Set the activity as launcher on the AndroidManifest.xml file.

XML Part:

XML part is used to design the Splash Screen part. We are using an image view on an empty activity. XML is really simple and anyone could easily understand it. You could design it according to your needs.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f1f1f1" >
 
<ImageView
android:id="@+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/logo" />
 
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:textSize="12dp"
android:textColor="#454545"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:text="www.codeseasy.com" />
 
</RelativeLayout>

Java Part:

Java part is used for setting the timer for Splash Screen. We just need a very few line of codes for setting the timer. You could adjust the timer accordingly.

new Handler().postDelayed(new Runnable() { 
@Override public void run() { 
Intent i = new Intent(SplashScreen.this, MainActivity.class); startActivity(i);
finish(); } }, 3000); 
}

Manifest File

Setting the splash screen as the launcher in manifest file.

<activity
    android:name=".SplashScreen">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>
<activity android:name=".MainActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
</activity>

Download Source Code and Demo Application

All the exported source code files from android studio for Android Splash Screen is provided, you could download and check it.

If you like to see the demo of the splash screen, you could easily download the APK file and check.

Now that you have seen how to implement splash screen with a layout, lets take a look at the way to implement splash screen the right way it is supposed to be.

Android Splash Screen in the right way

Splash screens are supposed to be simple and should not use a timer as well. Why should you make your users wait even after your application has loaded completely. Setting a timer for splash screen is like that, you are making your users wait even after you application has completely loaded and that’s a waste of time for no use. The right way to implement splash screen does not contain a layout or a timer. So lets take a look at the way to implement android splash screen in the right way.

Main Steps for implementing Android Splash Screen in right way

1. Create a drawable file for the splash screen window background.
2. Add the missing colors and files.
3. Set

Drawable Files background_splash.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <item android:drawable="@color/white" />
    <item
        android:width="500dp"
        android:height="500dp"
        android:gravity="center">
        <bitmap
            android:gravity="fill_horizontal|fill_vertical"
            android:src="@drawable/codeseasysplashscreen" />
    </item>
</layer-list>

The image codeseasysplashscreen and the color white will show error, replace the logo with your logo. Just paste the logo file in drawable folder and change the logo in the background_splash.xml file also. Also add the color white to the color.xml file. For that go to res – values – colors.xml then add the below line of code.

Splash Screen the Right way Drawable Files

1 file(s) 35.87 KB

Download

Colors.xml File

Adding the color white to he colors.xml file

<color name="white">#fff</color>

Style.xml File

Setting the theme that the splash screen will be having also setting the background image.

<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/background_splash</item>
</style>

Java File

Here you could decide whether to set a timer or to do it in the right way. Lets see how to do it in the right way with out a timer.

Intent intent = new Intent(getApplicationContext(), MainActivity.class);
startActivity(intent);
finish();

Now lets add a timer. You could adjust the time according to your wish (3000 means 3 seconds).

new Handler().postDelayed(new Runnable() {
    @Override
    public void run() {
        Intent intent = new Intent(getApplicationContext(), MainActivity.class);
        startActivity(intent);
        finish();
    }
}, 3000);

Manifest File

Setting the splash screen as the launcher in manifest file and also setting the theme for the splash screen.

<activity
    android:name=".SplashScreen"
    android:theme="@style/SplashTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>
<activity android:name=".MainActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
</activity>

Download Source Code and Demo Application

Download the full source code for reference.

Hope you understand the two methods for implementing android splash screen. If you have any doubts feel free to comment it, I would respond to every comments. Now let’s see the flutter implementation.

Splash Screen implementation in Flutter

In Flutter you can implement splash screen in two ways, you could either use the splash screen plugin in the flutter and also you could implement the splash screen separately for android and iOS. Now this the way google recommend you to do it too. Now lets take a look at both the ways you could implement the splash screen in flutter.

Splash Screen Plugin in Flutter

Flutter has a plugin that allows you to implement splash screen faster and easy. Now lets take a look at how to implement it.

First add the dependency splashcreen to the pubspec.yaml file. After adding the dependency you have to import the package.

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';

Now you have to define the main() function.

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Splash Screen",
    home: FirstActivity(),
  ));
}

We have to create the FirstActivity class and this will be our splash screen. You can change the time according to your need, i have set it to 3 seconds here.

class FirstActivity extends StatelessWidget {
  Widget build(BuildContext context) {
    return new SplashScreen(
        seconds: 3,
        navigateAfterSeconds: new SecondActivity(),
        title: new Text(
          "Splash Screen Test",
          style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
        ),
        backgroundColor: Colors.white,
        styleTextUnderTheLoader: new TextStyle(),
        loaderColor: Colors.green);
  }
}

Now you have to define the activity that launched after the splash screen.

class SecondActivity extends StatelessWidget {
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
          title: new Text("Home Screen"), automaticallyImplyLeading: false),
      body: new Center(
        child: new Text(
          "Done",
          style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),
        ),
      ),
    );
  }
}

Now that’s all that you need to do to add the splash screen to a project. You could add images or any thing like that. The video above has the methods on how to add an image or logo to the splash screen in flutter.

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Splash Screen",
    home: FirstActivity(),
  ));
}

class FirstActivity extends StatelessWidget {
  Widget build(BuildContext context) {
    return new SplashScreen(
        seconds: 3,
        navigateAfterSeconds: new SecondActivity(),
        title: new Text(
          "Splash Screen Test",
          style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
        ),
        backgroundColor: Colors.white,
        styleTextUnderTheLoader: new TextStyle(),
        loaderColor: Colors.green);
  }
}

class SecondActivity extends StatelessWidget {
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
          title: new Text("Home Screen"), automaticallyImplyLeading: false),
      body: new Center(
        child: new Text(
          "Done",
          style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),
        ),
      ),
    );
  }
}

This article covers everything related to splash screen. We have seen 2 methods in native android and 1 method using flutter. Hope this article helped you and provided you with the information that you where looking for. You could find more programming videos on the YouTube Channel.