Ionic 3: Splash Screen plugins integration with Example

When you start any app firstly you get a splash screen to display app name or logo. In Ionic 3 it's very easy to develop this splash screen. Ionic 3 provides plugins to perform this type of operation in the app.

So, In this post, I will explain to you how to work with splash screen plugins step by step guide.

So follow the following step to create splash screen app using Ionic 3:

Step 1: Create ionic app using blank templet or any other as you wish using the following command

$ionic start SelfieTest blank 

It will take some time to create an app.  In this command, SelfieTest is my app name and the blank is a template.

Note: Make sure that your internet connection is on at a time of ionic plugins and any package installation installations

Step 2: Change directory of your command prompt using this:

$cd SelfieTest

Step 3: Run your app in the browser using the following command.

$ionic serve

Output In Browser:

If any error please check your installation of node.js and ionic is ok or not.

Step 4: Now add Splash Screen Cordova plugins in your app using the following command

$ionic cordova plugin add cordova-plugin-splashscreen

Here cordova-plugin-splashscreen is an actual plugin to add in our App using add attribute

 Step 5: Now we need to install this plugin on our app NgModule so run following npm command in your command prompt

$npm install --save @ionic-native/splash-screen

This command installs the splash screen plugins inside the NgModule in our app.

Step 6: Now open your app directory in your Code Editor. and open config.xml file in this file add following two lines to stop auto hide splashscreen and fading of splash screen.

    <preference name="FadeSplashScreen" value="false" />
    <preference name="AutoHideSplashScreen" value="false" />

Also, Remove SplashScreen.hide() in app.component.ts file

Step 7: Now create new welcome page for splash screen using the following command

This command will create new page in Pages directory. Now add this page in NgModule placed in app.module.ts file

File Name: app.module.ts
Code:
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { WelcomePage } from '../pages/welcome/welcome';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    WelcomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    WelcomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Step 8: Now Design splash Screen welcome page. welcome.html


<ion-content class="background" scroll="false">
<div class="layer">
<ion-grid> 
<ion-row class="vertical-align-content" text-center>
<ion-col>
<img src="assets/imgs/logo.gif" style="height:120px;width: 80px">
<h1>Answerdone</h1>
<h5>Tagline Here</h5>
</ion-col>
</ion-row>
</ion-grid>
</div>

</ion-content>

Edit welcome.scss file for style your splashscreen

page-welcome {

    ion-content.background{

    background: no-repeat fixed center;

    background-image: url('/assets/imgs/bgimg.jpg');

    -webkit-background-size:100% 100%;

    -moz-background-size:100% 100%;

    background-size:100% 100%;

    }  

    .layer {

    background-color: rgba(50, 50, 50, 0.7);

    width: 100%;

    height: 100%;

}

.vertical-align-content

{

padding-top:auto;

      padding-bottom:auto;

  color:white;

}

}

Ok everything is done about designing page.

Step 9: Now open your welcome.ts file. and add following code in this file.

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';

@Component({
  selector: 'page-welcome',
  templateUrl: 'welcome.html',
})
export class WelcomePage {

  constructor(public viewCtrl: ViewController, public splashScreen: SplashScreen) {
  }

  ionViewDidLoad() {
  this.splashScreen.hide();
  setTimeout(()=>{
  this.viewCtrl.dismiss();
  },4000);
  }

}

This code will close flash screen automatically after 4 Sec and redirect to HomePage. 

Step 10: Run your application in browser or Ionic Lab using following command

For Browser: ionic serve

For Ionic Lab : ionic serve -l

So you will get following output in ionic lab:

Best Book for Entrepreneur ==> Strategies To Build Successful Web Agency