Android Splash Screen Tutorial (Native and Flutter)

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.

Android Splash Screen With Android Studio
Click here and Subscribe now: 


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.

Splash Screen in The Right Way (Android Studio Tutorial)
Click here and Subscribe now: 


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.

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.

15 thoughts on “Android Splash Screen Tutorial (Native and Flutter)”

  1. Heya, I am for the primary time here. I came across this board and me in finding It really helpful & it helped me out a lot.

    Reply
  2. It’s actually a cool and helpful piece of information.
    I am satisfied that you shared this useful info with us.
    Please stay us informed like this. Thanks for sharing.

    Reply
  3. Howdy! This blog post could not be written any better! Going through
    this post reminds me of my previous roommate! He constantly kept preaching about this.
    I am going to send this article to him. Pretty sure he will
    have a great read. Thank you for sharing!

    Reply
  4. I followed your instructions to create a Splash Screen for my WebView app and was very helpful ! I managed to create the Splash Screen or at least I thought so.

    The problem is that the Splash Screen is appearing only after I install the app.
    After closing and reopening or even opening the app after reboot, SplashScreen is not appearing,
    Am I doing something wrong or forgetting something ?

    Reply
    • Splash screen will be visible every time you open the app, but if you are using the 2nd method it wont be visible for a long time. Read the article and you will understand. If you phone is faster then splash screen wont be visible for long. If you want to set a timer like for 3 seconds, then use the method which has the timer.

      Reply
      • I used the first method. When I install the app and run it , splash screen appears and its perfect in time. I can use various time delays and all work fine.
        However, if I close the installed app and open again no SplashScreen or a very quick SplashScreen the eye cant catch (I read in Google who had the same problem, the splash screen just opened and closed in a flash).

        I rebooted the phone and started the app, no splash screen.

        To sum it up, splash screen for me works ONLY on first run after install.

        Reply

Leave a Comment