Exercise (Video): Customizing the SplashScreen

Loading...

From the course by The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

158 ratings

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

158 ratings

Course 3 of 5 in the Specialization Full Stack Web and Multiplatform Mobile App Development

This course focuses on developing multiplatform mobile applications using the Web technologies (HTML5, CSS and Javascript). In particular we make use of the Cordova hybrid application framework to develop and target multiple mobile platforms with a single codebase. We make use of the Ionic framework (Ionic Ver 3.x), one of the most popular mobile application frameworks, that is built with mobile-optimized HTML5 and CSS based components and Angular. You will learn about UI development with Ionic and then using Cordova's modules to access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your HTML5, CSS, Javascript and Angular skills, and (c) Use various features of the Ionic framework to build hybrid mobile applications

From the lesson

Accessing Native Capabilities of Devices: Cordova and Ionic Native

In this module you will explore Cordova and the Ionic Native wrappers that enable you to access the native capabilities of the mobile devices. You will use a few plugins in order to understand the general concepts and the patterns for using these plugins within your Ionic application

Introduction to Ionic Native7:51

Exercise (Video): Customizing the SplashScreen16:34

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

[MUSIC]

Now that you have had a quick introduction to Cordova and how Cordova explores

the JavaScript API, which can be used by your Ionic applications.

And the Cordova plugins that enable you to access the native

functionality on your mobile devices.

And also the Ionic Native, which packages the Cordova plugins and then makes

them available to your Ionic application supporting either the promise or

the observable based API for us to use within our Ionic application.

Let's take a first look at one of our very first Ionic plugins,

customizing the splash screen.

So this is where we will make use of the splash screen plugin that we will use

to customize and control the splash screen that we use within our application.

When we scaffolded out our Ionic application,

the default Ionic application was already scaffolded out.

Including the splash screen support for the application.

So the Ionic Native plugin for the splash screen and

also the status bar are already included into our Ionic application.

And the starter code for

controlling the splash screen is already there in our app.component.ts file.

So let's pay a visit to the app.module.ts file and

the app.component.ts file to understand how the splash screen

has been set up and being controlled from our application.

So taking a look at the app.module.ts file,

you'll see that within the app.module.ts file, you see that the StatusBar

plugin has been already imported from the ionic-native/status-bar.

And the SplashScreen plugin has already been imported

from the ionic-native/splash-screen here.

And both of these are already included into the providers section here.

And so in the NGModule decorator in the providers section,

you see the StatusBar and the SplashScreen already included into the providers.

So our application is already set up to use the SplashScreen Ionic Native plugin.

And the corresponding NPM modules have already been downloaded and installed.

So we don't need to do anything additional in order to make use of the splash screen

within our application.

Now as you saw, when we deployed our application to the emulator and

also to the Android device, you saw the SplashScreen already in action.

So in this exercise,

we're going to customize the SplashScreen by including our own SplashScreen image.

And our own icon for our Ionic application.

Now that we have seen how the SplashScreen is already configured in

the app.module.ts, let's go and take a look at the app.component.ts file.

In the app.component.ts file also, you see at the top the StatusBar and

the SplashScreen have already been imported into the app.component.ts file.

And going down into the file, you see that in the constructor,

the platform, which is an Ionic service, has already been injected.

I'll talk about the platform in a little bit detail a few seconds later.

Then we also see that the StatusBar and

also the SplashScreen have been injected into the constructor.

Now, going down into the code, we see this method called the initializeApp method.

And inside the initializeApp method, you see a call to this

function called the ready from the platform.

So what exactly is the platform?

The platform is a service that enables you to

obtain information about the current device.

The platform service supports many different functions there.

You can make use of that to obtain lot of information about

the current platform on which you are running your Ionic application.

And could be used within your application for customizing various things.

In particular, I'm looking at how the ready function is being used here.

The ready function here will return a promise to us.

And the promise will resolve at the point when my underlying platform is ready.

And the plugins that we have included within our Ionic

application have all been loaded in.

And so we can then start using those plugins.

So until the platform.ready is fired and the promise is resolved, we

won't have access to the various plugins that we include within our application.

So you would see that whenever we are making use of the plugins,

we will always surround it with this platform.ready call there.

So that those functions will be called only at the point

when your platform is already in the ready state.

And everything is set up for

you to be able to use the plugins that you have included in your application.

So that is the reason why inside the then method of the ready function,

we are calling the various plugins here.

The two plugins that we have already included here.

So inside this arrow function, as you can see,

we are saying this.statusBar.styleDefault.

So we are not trying to further customize the status bar.

We are just using it as a default.

If you want to customize the status bar further,

then you can look up the documentation about the StatusBar plugin.

And then make use of its functions to customize the status bar.

The second call is to the splashScreen.hide function here.

So when you call the splashScreen.hide function at this point, the splash screen,

which is being displayed on your device's screen, will then be hidden.

And thereby revealing the view of your Ionic application.

Now, one of the reasons why we would use a splash screen is that before

your application gets set up, you may wish to access a server and

then obtain data from the server.

And until the data is available,

you don't want to be able to reveal your view to the user.

So you can hide behind the splash screen, so to say,

until you have sufficient data available to render the first view to your user.

In this case, what we are doing is we are hiding the splash screen as soon as

the platform is ready.

You can call the splashScreen.hide function at any other location.

For example, you can wait until your data for

rendering your home screen is all available to you.

And then at that point call the splashScreen.hide.

And then the splash screen can be hidden at that particular point.

Now, in this case, I'm going to leave it as such.

So we will simply hide the splash screen as soon as the platform is ready at this

moment.

So I'm not going to further customize.

But should you choose to hide the splash screen at a later date,

you can always do that.

Now the more important question that might arise in your mind is,

how can I customize the splash screen?

So this is where we will look at the resources that are available for

your Ionic application.

And so in your Ionic application's root folder,

you will see this folder named resources here.

So if you open the resources folder, you will see two files here.

The icon.png and the splash.png.

Now looking at these two PNG files, you immediately recognize

that this is what has been used as the splash screen for

the Ionic application when the Ionic application started.

And so if we replace these two files with our own custom files.

And then make use of Cordova support to customize this splash screen.

So what the Cordova resources command will do is to take

this default splash screen image that we provide for it.

And then prepare images at different sizes.

So you can see that if you go into the resources > android > icon,

you would see that you have images at different resolutions available there.

And similarly, the splash screens at different resolutions.

So this is the landscape one, the portrait one for

the low density screens, for high density screens, and so on.

So all these PNG files are automatically prepared for

us by Cordova once you supply the default icon.png and splash.png files.

Now, fortunately, in the instructions for this particular exercise,

I have provided you with the customized icon.png and the splash.png files.

In the next step, you will simply download those icon.png and splash.png files.

And then move them into the resources folder to replace this icon.png and

splash.png files here.

And then after that, we will use the Cordova resources to recompile our

splash screen and icon for different resolutions.

Now here, when you supply the icon.png and

splash.png, you need to supply it at a very high resolution.

So something in the range of close to 3,000 pixels by 3,000 pixels in size.

And then when you invoke Cordova resources, it will automatically

construct the various PNG files at different screen resolutions for you.

Taking the main file that we provide first,

the main PNG files that we provide first.

So let's move on to the next step.

We will download the customized icon.png and splash.png files.

And then substitute them into this resources folder.

So in the next step, go to the Exercise(Instructions).

And then here you'll see that I have provided the icon.png and splash.png.

Just right-click and then download these files into your computer.

And then save them as icon.png and splash.png.

And then once you get hold of these two files, then you just copy

those files into the resources folder of your Ionic application.

So here in my finder window, or

if you're using a Windows machine, you can use the Windows Explorer.

You navigate down to where your Ionic application is stored.

So here, I have my Ionic application in the Ionic conFusion folder here.

And then when you move into the Ionic conFusion folder,

then move into the resources folder there.

And you immediately notice the icon.png and splash.png files.

Now replace these two with the two files that you have downloaded.

The two customized files that I've provided for you that you have downloaded.

Move them into this folder.

So that is what I'm going to do in the next step here.

So I'm going to replace both of these with that custom icon.png and splash.png files.

So once I complete that, then I'm going to invoke

the Cordova resources command to prepare the new icons and

the splash screens at different screen resolutions on my behalf.

So going to the terminal or the command window.

And in your project folder, in the conFusion folder,

type ionic cordova resources.

And wait for the command to take the two files that you have provided.

The high resolution files that you have provided to it.

And that automatically prepare the resources

of the files at different screen resolutions on your behalf.

And you may need to sign in for an Ionic account.

If you don't happen to have an Ionic account, just sign up for

an Ionic account as stated here.

And let me type in my Ionic account.

So once you do that, the custom resources that you have

included there will be uploaded to the Ionic cloud.

And then the corresponding files will be prepared and

then brought back to your application.

Now, let's pay a visit to our folder one more time.

If you now go to your project folder, and then let's browse into the android > icon.

And then you see that you have the icons prepared at different resolutions here.

Same thing with the splash screen.

You have the splash screens at different resolutions prepared here for you.

Same thing in ios, too.

So in ios, you have the icons at different resolutions.

And the splash screen also at different resolutions.

So now your Ionic application has been customized with a custom splash screen.

Now the next step is, of course, to build and

deploy your Ionic application to either the emulator or the real device.

So just as we learned in the previous exercise,

I'm going to go to the terminal and

then type ionic cordova platform add android.

I'm going to use Android to demonstrate this.

Then I will say ionic cordova run android.

And wait for it to deploy to my Android device.

Once my application deploys to the Android device, you can see that

the new customized splash screen is being used by my Ionic application.

Not only that, if we go to the Apps folder here,

you would see that in the Apps folder,

we have the customized icon being used for

my application here.

So you can see that the customized icon is being used for my application here.

And one more time.

When I click on my Ionic application,

you can see the splash screen before the application is shown to us.

So with this, we complete this exercise.

Where we have seen how we can customize the splash screen and the icon for

our Ionic application.

This is a good time for you to do a Git commit with the message splash screen.

[MUSIC]

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play