Learn how to customize your app icon and splash page in Ionic, then add an animation to it. Grab the source code here https://angularfirebase.com/lessons/generate-a-custom-spash-screen-and-icons-in-ionic/

Ionic 3 - https://ionicframework.com/
SpinKit - http://tobiasahlin.com/spinkit/
2024-02-04T07:45:06.582Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
dfc37c1e-1d4b-42a2-974d-dd03fdec3545
b86cdf6902aea73dbdf78dce8a409e97c705614701227e065c93e28f8eeb7030
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Almost all good native mobile apps have one thing in common, and that's a high quality loading page when you enter the app for the first time.
In this episode, I'm going to show you how to build your own high quality splash graphics with Ionic.
We're going to make sure the graphics and the animation look good on both iOS and Android and I'm going to take a different approach than other tutorials out there have taken.
Most importantly, I want to show you how to avoid this ugly white page if you're using animations in your splash page.
Hit subscribe if you're new and follow along with the source code at angularfirebase.com.
I'm Starting out from a brand new Ionic app and using the side menu starter template.
Before we do anything with animation, I first wanna show you how to generate app icon and static splash page from the command line.
Start by going into the resources directory and delete the icon and splash PNG files.
Then you'll need to generate your own graphics in something like Photoshop or Sketch.
The app icon needs to be at least a 1024 pixels, and the splash page needs to be at least 2,732 pixels.
Once you have those created, you can just go ahead and save them back in the resources directory with the same name, splash and icon.
From there, we can generate all of the icons we need for every single device on a given platform.
All you need to do is run Ioniccordovaresources from the command line, and it's going to do everything else for you.
This takes your source images and resizes them so they look good on the iPad, iPhone, and other mobile devices.
You You can see the results by going under the platform directory under resources and looking at all the generated graphics.
If you open your app on a native emulator, You should see the custom graphic as well as the custom splash screen.
That looks pretty cool and is probably enough for most apps, But I still wanna show you how to take things a step further by adding your own custom animation.
The easiest strategy, in my opinion, is to use a CSS animation, but you could also use JavaScript here as well.
To keep things simple, I'm going to use a pre built open source animation, but you could customize this in any way that you want.
1st.
You can control the behavior of the splash screen in your config dot XML file.
Apache Cordova has a number of different preferences or options that you can configure to control the way the splash screen behaves on different platforms.
I recommend checking out the Cordova documentation just to get an idea of what Each one of these preferences will do.
One strategy that I've seen used is to set the show splash screen option to false.
That will completely prevent the static image we created earlier from being displayed.
That might seem like what we want and it does kind of work, but it does have one major problem.
It causes this white screen to appear briefly when the app is launched which might last for a second or 2 and kind of ruins the intro animation.
I think a better approach is to fade in from your static graphic in a way that looks seamless for the end user.
You can do that by simply matching the background from your static image to the actual CSS that you use for the animation.
But we still wanna close that static graphic as soon as possible, so we're going to make a few changes to our config.
I'm going to set the splash screen delay to 10 seconds, which is way longer than we actually need, but we're going to close it as soon as we can once the platform is ready.
So So make sure to set a screen delay, make sure that the auto hide is set to false, and that the show splash screen is set to true.
Then we can hide it when the app is initialized, which Ionic's already going to do by default.
But just in case, go into the app component and make sure you're hiding the splash screen when the app is initialized.
Now from the same component, we'll go ahead and import timer from RXJS.
Then we'll define a property on this component called show splash, which is set to true by default.
That will control the visibility of the animation.
And then back down in the initialize app method, we'll set the timer and set it to false after 3000 milliseconds.
All we have to do to start the timer is subscribe to it, and it will execute this code when the time runs out.
Now let's open the HTML for the app component.
Basically, all we're creating here is an overlay that's going to cover the screen and tell this show splash variable is set to false.
I'm just showing a basic loading spinner here, but you could add your own custom complex SVG animation inside this element.
At this point, we just need to round it out with some CSS.
I'm just going to copy and paste this animation from SpinKit.
Then I'm going to write my own class to make it behave like an overlay.
It has a position of absolute with a width and height of a 100%, then a z index with a large number just so it's displayed on top of other elements.
Then we can use Flexbox to ensure that it's responsive and displays the loading spinner directly in the enter the screen on any device.
And lastly, I'll give it a background color to match our static graphic that we created in the first part.
Then we can just paste in our spin kit code, and we should be good to go.
If we pull the app up on iPhone X, we should get the initial static image and then, uh, loading spinner right after that.
I'm going to go ahead and wrap up there.
If this video helped you, please like and subscribe.
And if you're serious about building native apps with Ionic, I have a full course specifically for native development that should be out in the next couple weeks.
If you're a pro member, you'll get access for free in addition to a whole bunch of other exclusive resources.
1st.
Thanks for watching, and I'll see you soon.
1st.

Speaker 0: Almost all good native mobile apps have one thing in common, and that's a high quality loading page when you enter the app for the first time. In this episode, I'm going to show you how to build your own high quality splash graphics with Ionic. We're going to make sure the graphics and the animation look good on both iOS and Android and I'm going to take a different approach than other tutorials out there have taken. Most importantly, I want to show you how to avoid this ugly white page if you're using animations in your splash page. Hit subscribe if you're new and follow along with the source code at angularfirebase.com.

I'm Starting out from a brand new Ionic app and using the side menu starter template. Before we do anything with animation, I first wanna show you how to generate app icon and static splash page from the command line. Start by going into the resources directory and delete the icon and splash PNG files. Then you'll need to generate your own graphics in something like Photoshop or Sketch. The app icon needs to be at least a 1024 pixels, and the splash page needs to be at least 2,732 pixels.

Once you have those created, you can just go ahead and save them back in the resources directory with the same name, splash and icon. From there, we can generate all of the icons we need for every single device on a given platform. All you need to do is run Ioniccordovaresources from the command line, and it's going to do everything else for you. This takes your source images and resizes them so they look good on the iPad, iPhone, and other mobile devices. You You can see the results by going under the platform directory under resources and looking at all the generated graphics.

If you open your app on a native emulator, You should see the custom graphic as well as the custom splash screen. That looks pretty cool and is probably enough for most apps, But I still wanna show you how to take things a step further by adding your own custom animation. The easiest strategy, in my opinion, is to use a CSS animation, but you could also use JavaScript here as well. To keep things simple, I'm going to use a pre built open source animation, but you could customize this in any way that you want. 1st.

You can control the behavior of the splash screen in your config dot XML file. Apache Cordova has a number of different preferences or options that you can configure to control the way the splash screen behaves on different platforms. I recommend checking out the Cordova documentation just to get an idea of what Each one of these preferences will do. One strategy that I've seen used is to set the show splash screen option to false. That will completely prevent the static image we created earlier from being displayed.

That might seem like what we want and it does kind of work, but it does have one major problem. It causes this white screen to appear briefly when the app is launched which might last for a second or 2 and kind of ruins the intro animation. I think a better approach is to fade in from your static graphic in a way that looks seamless for the end user. You can do that by simply matching the background from your static image to the actual CSS that you use for the animation. But we still wanna close that static graphic as soon as possible, so we're going to make a few changes to our config.

I'm going to set the splash screen delay to 10 seconds, which is way longer than we actually need, but we're going to close it as soon as we can once the platform is ready. So So make sure to set a screen delay, make sure that the auto hide is set to false, and that the show splash screen is set to true. Then we can hide it when the app is initialized, which Ionic's already going to do by default. But just in case, go into the app component and make sure you're hiding the splash screen when the app is initialized. Now from the same component, we'll go ahead and import timer from RXJS.

Then we'll define a property on this component called show splash, which is set to true by default. That will control the visibility of the animation. And then back down in the initialize app method, we'll set the timer and set it to false after 3000 milliseconds. All we have to do to start the timer is subscribe to it, and it will execute this code when the time runs out. Now let's open the HTML for the app component.

Basically, all we're creating here is an overlay that's going to cover the screen and tell this show splash variable is set to false. I'm just showing a basic loading spinner here, but you could add your own custom complex SVG animation inside this element. At this point, we just need to round it out with some CSS. I'm just going to copy and paste this animation from SpinKit. Then I'm going to write my own class to make it behave like an overlay.

It has a position of absolute with a width and height of a 100%, then a z index with a large number just so it's displayed on top of other elements. Then we can use Flexbox to ensure that it's responsive and displays the loading spinner directly in the enter the screen on any device. And lastly, I'll give it a background color to match our static graphic that we created in the first part. Then we can just paste in our spin kit code, and we should be good to go. If we pull the app up on iPhone X, we should get the initial static image and then, uh, loading spinner right after that.

I'm going to go ahead and wrap up there. If this video helped you, please like and subscribe. And if you're serious about building native apps with Ionic, I have a full course specifically for native development that should be out in the next couple weeks. If you're a pro member, you'll get access for free in addition to a whole bunch of other exclusive resources. 1st.

Thanks for watching, and I'll see you soon. 1st.
Almost all good native mobile apps have one thing in common, and that's a high quality loading page when you enter the app for the first time. In this episode, I'm going to show you how to build your own high quality splash graphics with Ionic. We're going to make sure the graphics and the animation look good on both iOS and Android and I'm going to take a different approach than other tutorials out there have taken. Most importantly, I want to show you how to avoid this ugly white page if you're using animations in your splash page. Hit subscribe if you're new and follow along with the source code at angularfirebase.com. I'm Starting out from a brand new Ionic app and using the side menu starter template. Before we do anything with animation, I first wanna show you how to generate app icon and static splash page from the command line. Start by going into the resources directory and delete the icon and splash PNG files. Then you'll need to generate your own graphics in something like Photoshop or Sketch. The app icon needs to be at least a 1024 pixels, and the splash page needs to be at least 2,732 pixels.
animation
graphic design
visualization
film
Once you have those created, you can just go ahead and save them back in the resources directory with the same name, splash and icon. From there, we can generate all of the icons we need for every single device on a given platform. All you need to do is run Ioniccordovaresources from the command line, and it's going to do everything else for you.
This takes your source images and resizes them so they look good on the iPad, iPhone, and other mobile devices. You You can see the results by going under the platform directory under resources and looking at all the generated graphics. If you open your app on a native emulator, You should see the custom graphic as well as the custom splash screen. That looks pretty cool and is probably enough for most apps, But I still wanna show you how to take things a step further by adding your own custom animation. The easiest strategy, in my opinion, is to use a CSS animation, but you could also use JavaScript here as well. To keep things simple, I'm going to use a pre built open source animation, but you could customize this in any way that you want. 1st. You can control the behavior of the splash screen in your config dot XML file.
animation
graphic design
streaming
multimedia
Apache Cordova has a number of different preferences or options that you can configure to control the way the splash screen behaves on different platforms. I recommend checking out the Cordova documentation just to get an idea of what Each one of these preferences will do. One strategy that I've seen used is to set the show splash screen option to false.
That will completely prevent the static image we created earlier from being displayed. That might seem like what we want and it does kind of work, but it does have one major problem. It causes this white screen to appear briefly when the app is launched which might last for a second or 2 and kind of ruins the intro animation. I think a better approach is to fade in from your static graphic in a way that looks seamless for the end user. You can do that by simply matching the background from your static image to the actual CSS that you use for the animation. But we still wanna close that static graphic as soon as possible, so we're going to make a few changes to our config.
animation
I'm going to set the splash screen delay to 10 seconds, which is way longer than we actually need, but we're going to close it as soon as we can once the platform is ready. So So make sure to set a screen delay, make sure that the auto hide is set to false, and that the show splash screen is set to true. Then we can hide it when the app is initialized, which Ionic's already going to do by default. But just in case, go into the app component and make sure you're hiding the splash screen when the app is initialized.
Now from the same component, we'll go ahead and import timer from RXJS. Then we'll define a property on this component called show splash, which is set to true by default. That will control the visibility of the animation. And then back down in the initialize app method, we'll set the timer and set it to false after 3000 milliseconds. All we have to do to start the timer is subscribe to it, and it will execute this code when the time runs out.
animation
Now let's open the HTML for the app component.
Basically, all we're creating here is an overlay that's going to cover the screen and tell this show splash variable is set to false. I'm just showing a basic loading spinner here, but you could add your own custom complex SVG animation inside this element. At this point, we just need to round it out with some CSS. I'm just going to copy and paste this animation from SpinKit. Then I'm going to write my own class to make it behave like an overlay. It has a position of absolute with a width and height of a 100%, then a z index with a large number just so it's displayed on top of other elements.
animation
geometry
Then we can use Flexbox to ensure that it's responsive and displays the loading spinner directly in the enter the screen on any device. And lastly, I'll give it a background color to match our static graphic that we created in the first part. Then we can just paste in our spin kit code, and we should be good to go. If we pull the app up on iPhone X, we should get the initial static image and then, uh, loading spinner right after that. I'm going to go ahead and wrap up there.
animation
If this video helped you, please like and subscribe. And if you're serious about building native apps with Ionic, I have a full course specifically for native development that should be out in the next couple weeks. If you're a pro member, you'll get access for free in addition to a whole bunch of other exclusive resources. 1st. Thanks for watching, and I'll see you soon.
1st.
Almost all good native mobile apps have one thing in common, and that's a high quality loading page when you enter the app for the first time. In this episode, I'm going to show you how to build your own high quality splash graphics with Ionic. We're going to make sure the graphics and the animation look good on both iOS and Android and I'm going to take a different approach than other tutorials out there have taken. Most importantly, I want to show you how to avoid this ugly white page if you're using animations in your splash page. Hit subscribe if you're new and follow along with the source code at angularfirebase.com. I'm Starting out from a brand new Ionic app and using the side menu starter template. Before we do anything with animation, I first wanna show you how to generate app icon and static splash page from the command line. Start by going into the resources directory and delete the icon and splash PNG files. Then you'll need to generate your own graphics in something like Photoshop or Sketch. The app icon needs to be at least a 1024 pixels, and the splash page needs to be at least 2,732 pixels. Once you have those created, you can just go ahead and save them back in the resources directory with the same name, splash and icon. From there, we can generate all of the icons we need for every single device on a given platform. All you need to do is run Ioniccordovaresources from the command line, and it's going to do everything else for you. This takes your source images and resizes them so they look good on the iPad, iPhone, and other mobile devices. You You can see the results by going under the platform directory under resources and looking at all the generated graphics. If you open your app on a native emulator, You should see the custom graphic as well as the custom splash screen. That looks pretty cool and is probably enough for most apps, But I still wanna show you how to take things a step further by adding your own custom animation. The easiest strategy, in my opinion, is to use a CSS animation, but you could also use JavaScript here as well. To keep things simple, I'm going to use a pre built open source animation, but you could customize this in any way that you want. 1st. You can control the behavior of the splash screen in your config dot XML file. Apache Cordova has a number of different preferences or options that you can configure to control the way the splash screen behaves on different platforms. I recommend checking out the Cordova documentation just to get an idea of what Each one of these preferences will do. One strategy that I've seen used is to set the show splash screen option to false. That will completely prevent the static image we created earlier from being displayed. That might seem like what we want and it does kind of work, but it does have one major problem. It causes this white screen to appear briefly when the app is launched which might last for a second or 2 and kind of ruins the intro animation. I think a better approach is to fade in from your static graphic in a way that looks seamless for the end user. You can do that by simply matching the background from your static image to the actual CSS that you use for the animation. But we still wanna close that static graphic as soon as possible, so we're going to make a few changes to our config. I'm going to set the splash screen delay to 10 seconds, which is way longer than we actually need, but we're going to close it as soon as we can once the platform is ready. So So make sure to set a screen delay, make sure that the auto hide is set to false, and that the show splash screen is set to true. Then we can hide it when the app is initialized, which Ionic's already going to do by default. But just in case, go into the app component and make sure you're hiding the splash screen when the app is initialized. Now from the same component, we'll go ahead and import timer from RXJS. Then we'll define a property on this component called show splash, which is set to true by default. That will control the visibility of the animation. And then back down in the initialize app method, we'll set the timer and set it to false after 3000 milliseconds. All we have to do to start the timer is subscribe to it, and it will execute this code when the time runs out. Now let's open the HTML for the app component. Basically, all we're creating here is an overlay that's going to cover the screen and tell this show splash variable is set to false. I'm just showing a basic loading spinner here, but you could add your own custom complex SVG animation inside this element. At this point, we just need to round it out with some CSS. I'm just going to copy and paste this animation from SpinKit. Then I'm going to write my own class to make it behave like an overlay. It has a position of absolute with a width and height of a 100%, then a z index with a large number just so it's displayed on top of other elements. Then we can use Flexbox to ensure that it's responsive and displays the loading spinner directly in the enter the screen on any device. And lastly, I'll give it a background color to match our static graphic that we created in the first part. Then we can just paste in our spin kit code, and we should be good to go. If we pull the app up on iPhone X, we should get the initial static image and then, uh, loading spinner right after that. I'm going to go ahead and wrap up there. If this video helped you, please like and subscribe. And if you're serious about building native apps with Ionic, I have a full course specifically for native development that should be out in the next couple weeks. If you're a pro member, you'll get access for free in addition to a whole bunch of other exclusive resources. 1st. Thanks for watching, and I'll see you soon. 1st.
Almost
almost
all
all
good
good
native
native
mobile
mobile
apps
apps
have
have
one
one
thing
thing
in
in
common,
common
and
and
that's
that's
a
a
high
high
quality
quality
loading
loading
page
page
when
when
you
you
enter
enter
the
the
app
app
for
for
the
the
first
first
time.
time
In
in
this
this
episode,
episode
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
build
build
your
your
own
own
high
high
quality
quality
splash
splash
graphics
graphics
with
with
Ionic.
ionic
We're
we're
going
going
to
to
make
make
sure
sure
the
the
graphics
graphics
and
and
the
the
animation
animation
look
look
good
good
on
on
both
both
iOS
ios
and
and
Android
android
and
and
I'm
i'm
going
going
to
to
take
take
a
a
different
different
approach
approach
than
than
other
other
tutorials
tutorials
out
out
there
there
have
have
taken.
taken
Most
most
importantly,
importantly
I
i
want
want
to
to
show
show
you
you
how
how
to
to
avoid
avoid
this
this
ugly
ugly
white
white
page
page
if
if
you're
you're
using
using
animations
animations
in
in
your
your
splash
splash
page.
page
Hit
hit
subscribe
subscribe
if
if
you're
you're
new
new
and
and
follow
follow
along
along
with
with
the
the
source
source
code
code
at
at
angularfirebase.com.
angularfirebase.com
I'm
i'm
Starting
starting
out
out
from
from
a
a
brand
brand
new
new
Ionic
ionic
app
app
and
and
using
using
the
the
side
side
menu
menu
starter
starter
template.
template
Before
before
we
we
do
do
anything
anything
with
with
animation,
animation
I
i
first
first
wanna
wanna
show
show
you
you
how
how
to
to
generate
generate
app
app
icon
icon
and
and
static
static
splash
splash
page
page
from
from
the
the
command
command
line.
line
Start
start
by
by
going
going
into
into
the
the
resources
resources
directory
directory
and
and
delete
delete
the
the
icon
icon
and
and
splash
splash
PNG
png
files.
files
Then
then
you'll
you'll
need
need
to
to
generate
generate
your
your
own
own
graphics
graphics
in
in
something
something
like
like
Photoshop
photoshop
or
or
Sketch.
sketch
The
the
app
app
icon
icon
needs
needs
to
to
be
be
at
at
least
least
a
a
1024
1024
pixels,
pixels
and
and
the
the
splash
splash
page
page
needs
needs
to
to
be
be
at
at
least
least
2,732
2,732
pixels.
pixels
Once
once
you
you
have
have
those
those
created,
created
you
you
can
can
just
just
go
go
ahead
ahead
and
and
save
save
them
them
back
back
in
in
the
the
resources
resources
directory
directory
with
with
the
the
same
same
name,
name
splash
splash
and
and
icon.
icon
From
from
there,
there
we
we
can
can
generate
generate
all
all
of
of
the
the
icons
icons
we
we
need
need
for
for
every
every
single
single
device
device
on
on
a
a
given
given
platform.
platform
All
all
you
you
need
need
to
to
do
do
is
is
run
run
Ioniccordovaresources
ioniccordovaresources
from
from
the
the
command
command
line,
line
and
and
it's
it's
going
going
to
to
do
do
everything
everything
else
else
for
for
you.
you
This
this
takes
takes
your
your
source
source
images
images
and
and
resizes
resizes
them
them
so
so
they
they
look
look
good
good
on
on
the
the
iPad,
ipad
iPhone,
iphone
and
and
other
other
mobile
mobile
devices.
devices
You
you
You
you
can
can
see
see
the
the
results
results
by
by
going
going
under
under
the
the
platform
platform
directory
directory
under
under
resources
resources
and
and
looking
looking
at
at
all
all
the
the
generated
generated
graphics.
graphics
If
if
you
you
open
open
your
your
app
app
on
on
a
a
native
native
emulator,
emulator
You
you
should
should
see
see
the
the
custom
custom
graphic
graphic
as
as
well
well
as
as
the
the
custom
custom
splash
splash
screen.
screen
That
that
looks
looks
pretty
pretty
cool
cool
and
and
is
is
probably
probably
enough
enough
for
for
most
most
apps,
apps
But
but
I
i
still
still
wanna
wanna
show
show
you
you
how
how
to
to
take
take
things
things
a
a
step
step
further
further
by
by
adding
adding
your
your
own
own
custom
custom
animation.
animation
The
the
easiest
easiest
strategy,
strategy
in
in
my
my
opinion,
opinion
is
is
to
to
use
use
a
a
CSS
css
animation,
animation
but
but
you
you
could
could
also
also
use
use
JavaScript
javascript
here
here
as
as
well.
well
To
to
keep
keep
things
things
simple,
simple
I'm
i'm
going
going
to
to
use
use
a
a
pre
pre
built
built
open
open
source
source
animation,
animation
but
but
you
you
could
could
customize
customize
this
this
in
in
any
any
way
way
that
that
you
you
want.
want
1st.
1st
You
you
can
can
control
control
the
the
behavior
behavior
of
of
the
the
splash
splash
screen
screen
in
in
your
your
config
config
dot
dot
XML
xml
file.
file
Apache
apache
Cordova
cordova
has
has
a
a
number
number
of
of
different
different
preferences
preferences
or
or
options
options
that
that
you
you
can
can
configure
configure
to
to
control
control
the
the
way
way
the
the
splash
splash
screen
screen
behaves
behaves
on
on
different
different
platforms.
platforms
I
i
recommend
recommend
checking
checking
out
out
the
the
Cordova
cordova
documentation
documentation
just
just
to
to
get
get
an
an
idea
idea
of
of
what
what
Each
each
one
one
of
of
these
these
preferences
preferences
will
will
do.
do
One
one
strategy
strategy
that
that
I've
i've
seen
seen
used
used
is
is
to
to
set
set
the
the
show
show
splash
splash
screen
screen
option
option
to
to
false.
false
That
that
will
will
completely
completely
prevent
prevent
the
the
static
static
image
image
we
we
created
created
earlier
earlier
from
from
being
being
displayed.
displayed
That
that
might
might
seem
seem
like
like
what
what
we
we
want
want
and
and
it
it
does
does
kind
kind
of
of
work,
work
but
but
it
it
does
does
have
have
one
one
major
major
problem.
problem
It
it
causes
causes
this
this
white
white
screen
screen
to
to
appear
appear
briefly
briefly
when
when
the
the
app
app
is
is
launched
launched
which
which
might
might
last
last
for
for
a
a
second
second
or
or
2
2
and
and
kind
kind
of
of
ruins
ruins
the
the
intro
intro
animation.
animation
I
i
think
think
a
a
better
better
approach
approach
is
is
to
to
fade
fade
in
in
from
from
your
your
static
static
graphic
graphic
in
in
a
a
way
way
that
that
looks
looks
seamless
seamless
for
for
the
the
end
end
user.
user
You
you
can
can
do
do
that
that
by
by
simply
simply
matching
matching
the
the
background
background
from
from
your
your
static
static
image
image
to
to
the
the
actual
actual
CSS
css
that
that
you
you
use
use
for
for
the
the
animation.
animation
But
but
we
we
still
still
wanna
wanna
close
close
that
that
static
static
graphic
graphic
as
as
soon
soon
as
as
possible,
possible
so
so
we're
we're
going
going
to
to
make
make
a
a
few
few
changes
changes
to
to
our
our
config.
config
I'm
i'm
going
going
to
to
set
set
the
the
splash
splash
screen
screen
delay
delay
to
to
10
10
seconds,
seconds
which
which
is
is
way
way
longer
longer
than
than
we
we
actually
actually
need,
need
but
but
we're
we're
going
going
to
to
close
close
it
it
as
as
soon
soon
as
as
we
we
can
can
once
once
the
the
platform
platform
is
is
ready.
ready
So
so
So
so
make
make
sure
sure
to
to
set
set
a
a
screen
screen
delay,
delay
make
make
sure
sure
that
that
the
the
auto
auto
hide
hide
is
is
set
set
to
to
false,
false
and
and
that
that
the
the
show
show
splash
splash
screen
screen
is
is
set
set
to
to
true.
true
Then
then
we
we
can
can
hide
hide
it
it
when
when
the
the
app
app
is
is
initialized,
initialized
which
which
Ionic's
ionic's
already
already
going
going
to
to
do
do
by
by
default.
default
But
but
just
just
in
in
case,
case
go
go
into
into
the
the
app
app
component
component
and
and
make
make
sure
sure
you're
you're
hiding
hiding
the
the
splash
splash
screen
screen
when
when
the
the
app
app
is
is
initialized.
initialized
Now
now
from
from
the
the
same
same
component,
component
we'll
we'll
go
go
ahead
ahead
and
and
import
import
timer
timer
from
from
RXJS.
rxjs
Then
then
we'll
we'll
define
define
a
a
property
property
on
on
this
this
component
component
called
called
show
show
splash,
splash
which
which
is
is
set
set
to
to
true
true
by
by
default.
default
That
that
will
will
control
control
the
the
visibility
visibility
of
of
the
the
animation.
animation
And
and
then
then
back
back
down
down
in
in
the
the
initialize
initialize
app
app
method,
method
we'll
we'll
set
set
the
the
timer
timer
and
and
set
set
it
it
to
to
false
false
after
after
3000
3000
milliseconds.
milliseconds
All
all
we
we
have
have
to
to
do
do
to
to
start
start
the
the
timer
timer
is
is
subscribe
subscribe
to
to
it,
it
and
and
it
it
will
will
execute
execute
this
this
code
code
when
when
the
the
time
time
runs
runs
out.
out
Now
now
let's
let's
open
open
the
the
HTML
html
for
for
the
the
app
app
component.
component
Basically,
basically
all
all
we're
we're
creating
creating
here
here
is
is
an
an
overlay
overlay
that's
that's
going
going
to
to
cover
cover
the
the
screen
screen
and
and
tell
tell
this
this
show
show
splash
splash
variable
variable
is
is
set
set
to
to
false.
false
I'm
i'm
just
just
showing
showing
a
a
basic
basic
loading
loading
spinner
spinner
here,
here
but
but
you
you
could
could
add
add
your
your
own
own
custom
custom
complex
complex
SVG
svg
animation
animation
inside
inside
this
this
element.
element
At
at
this
this
point,
point
we
we
just
just
need
need
to
to
round
round
it
it
out
out
with
with
some
some
CSS.
css
I'm
i'm
just
just
going
going
to
to
copy
copy
and
and
paste
paste
this
this
animation
animation
from
from
SpinKit.
spinkit
Then
then
I'm
i'm
going
going
to
to
write
write
my
my
own
own
class
class
to
to
make
make
it
it
behave
behave
like
like
an
an
overlay.
overlay
It
it
has
has
a
a
position
position
of
of
absolute
absolute
with
with
a
a
width
width
and
and
height
height
of
of
a
a
100%,
100%
then
then
a
a
z
z
index
index
with
with
a
a
large
large
number
number
just
just
so
so
it's
it's
displayed
displayed
on
on
top
top
of
of
other
other
elements.
elements
Then
then
we
we
can
can
use
use
Flexbox
flexbox
to
to
ensure
ensure
that
that
it's
it's
responsive
responsive
and
and
displays
displays
the
the
loading
loading
spinner
spinner
directly
directly
in
in
the
the
enter
enter
the
the
screen
screen
on
on
any
any
device.
device
And
and
lastly,
lastly
I'll
i'll
give
give
it
it
a
a
background
background
color
color
to
to
match
match
our
our
static
static
graphic
graphic
that
that
we
we
created
created
in
in
the
the
first
first
part.
part
Then
then
we
we
can
can
just
just
paste
paste
in
in
our
our
spin
spin
kit
kit
code,
code
and
and
we
we
should
should
be
be
good
good
to
to
go.
go
If
if
we
we
pull
pull
the
the
app
app
up
up
on
on
iPhone
iphone
X,
x
we
we
should
should
get
get
the
the
initial
initial
static
static
image
image
and
and
then,
then
uh,
uh
loading
loading
spinner
spinner
right
right
after
after
that.
that
I'm
i'm
going
going
to
to
go
go
ahead
ahead
and
and
wrap
wrap
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
serious
serious
about
about
building
building
native
native
apps
apps
with
with
Ionic,
ionic
I
i
have
have
a
a
full
full
course
course
specifically
specifically
for
for
native
native
development
development
that
that
should
should
be
be
out
out
in
in
the
the
next
next
couple
couple
weeks.
weeks
If
if
you're
you're
a
a
pro
pro
member,
member
you'll
you'll
get
get
access
access
for
for
free
free
in
in
addition
addition
to
to
a
a
whole
whole
bunch
bunch
of
of
other
other
exclusive
exclusive
resources.
resources
1st.
1st
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
1st.
1st
success
The speaker explains how to build a high quality splash graphics for mobile apps using the Ionic app, including creating a loading page and creating a static graphics file. They also demonstrate how to use a CSS animation and use the open source auto hide option. The speaker provides tips on how to create a custom overlay for the mobile app and explains how to use the timer and Flexbox options for responsive web applications. They also mention a course for developers on building native apps with Ionic.
Custom Ionic Splash + Animation
Almost all good native mobile apps have one thing in common, and that's a high quality loading page when you enter the app for the first time. In this episode, I'm going to show you how to build your own high quality splash graphics with Ionic. We're going to make sure the graphics and the animation look good on both iOS and Android and I'm going to take a different approach than other tutorials out there have taken. Most importantly, I want to show you how to avoid this ugly white page if you're using animations in your splash page. Hit subscribe if you're new and follow along with the source code at angularfirebase.com. I'm Starting out from a brand new Ionic app and using the side menu starter template. Before we do anything with animation, I first wanna show you how to generate app icon and static splash page from the command line. Start by going into the resources directory and delete the icon and splash PNG files. Then you'll need to generate your own graphics in something like Photoshop or Sketch. The app icon needs to be at least a 1024 pixels, and the splash page needs to be at least 2,732 pixels. Once you have those created, you can just go ahead and save them back in the resources directory with the same name, splash and icon. From there, we can generate all of the icons we need for every single device on a given platform. All you need to do is run Ioniccordovaresources from the command line, and it's going to do everything else for you. This takes your source images and resizes them so they look good on the iPad, iPhone, and other mobile devices. You You can see the results by going under the platform directory under resources and looking at all the generated graphics. If you open your app on a native emulator, You should see the custom graphic as well as the custom splash screen. That looks pretty cool and is probably enough for most apps, But I still wanna show you how to take things a step further by adding your own custom animation. The easiest strategy, in my opinion, is to use a CSS animation, but you could also use JavaScript here as well. To keep things simple, I'm going to use a pre built open source animation, but you could customize this in any way that you want. 1st. You can control the behavior of the splash screen in your config dot XML file. Apache Cordova has a number of different preferences or options that you can configure to control the way the splash screen behaves on different platforms. I recommend checking out the Cordova documentation just to get an idea of what Each one of these preferences will do. One strategy that I've seen used is to set the show splash screen option to false. That will completely prevent the static image we created earlier from being displayed. That might seem like what we want and it does kind of work, but it does have one major problem. It causes this white screen to appear briefly when the app is launched which might last for a second or 2 and kind of ruins the intro animation. I think a better approach is to fade in from your static graphic in a way that looks seamless for the end user. You can do that by simply matching the background from your static image to the actual CSS that you use for the animation. But we still wanna close that static graphic as soon as possible, so we're going to make a few changes to our config. I'm going to set the splash screen delay to 10 seconds, which is way longer than we actually need, but we're going to close it as soon as we can once the platform is ready. So So make sure to set a screen delay, make sure that the auto hide is set to false, and that the show splash screen is set to true. Then we can hide it when the app is initialized, which Ionic's already going to do by default. But just in case, go into the app component and make sure you're hiding the splash screen when the app is initialized. Now from the same component, we'll go ahead and import timer from RXJS. Then we'll define a property on this component called show splash, which is set to true by default. That will control the visibility of the animation. And then back down in the initialize app method, we'll set the timer and set it to false after 3000 milliseconds. All we have to do to start the timer is subscribe to it, and it will execute this code when the time runs out. Now let's open the HTML for the app component. Basically, all we're creating here is an overlay that's going to cover the screen and tell this show splash variable is set to false. I'm just showing a basic loading spinner here, but you could add your own custom complex SVG animation inside this element. At this point, we just need to round it out with some CSS. I'm just going to copy and paste this animation from SpinKit. Then I'm going to write my own class to make it behave like an overlay. It has a position of absolute with a width and height of a 100%, then a z index with a large number just so it's displayed on top of other elements. Then we can use Flexbox to ensure that it's responsive and displays the loading spinner directly in the enter the screen on any device. And lastly, I'll give it a background color to match our static graphic that we created in the first part. Then we can just paste in our spin kit code, and we should be good to go. If we pull the app up on iPhone X, we should get the initial static image and then, uh, loading spinner right after that. I'm going to go ahead and wrap up there. If this video helped you, please like and subscribe. And if you're serious about building native apps with Ionic, I have a full course specifically for native development that should be out in the next couple weeks. If you're a pro member, you'll get access for free in addition to a whole bunch of other exclusive resources. 1st. Thanks for watching, and I'll see you soon. 1st.
The speaker explains how to build a high quality splash graphics for mobile apps using the Ionic app, including creating a loading page and creating a static graphics file. They also demonstrate how to use a CSS animation and use the open source auto hide option. The speaker provides tips on how to create a custom overlay for the mobile app and explains how to use the timer and Flexbox options for responsive web applications. They also mention a course for developers on building native apps with Ionic.