Improving Your Ionic Splash Screen with Animations
HTML-код
- Опубликовано: 8 сен 2024
- Ever wanted a more animated and dynamic splash screen for your Ionic app? Learn about some options including Lottie animations to spice up your app!
🔥Learn Ionic faster with the Ionic Academy: ionicacademy.com/
💎 Get the Built with Ionic Book: builtwithionic...
🎉 Get my Practical Ionic Book: devdactic.com/...
#############################
👨💻Want to read instead of watch?
Here's the full Ionic tutorial: ionicacademy.c...
🤷♂️Want more Ionic tutorials?
There you go: devdactic.com/
⚡️Take my 7 Day Ionic 4 Crash Course
ionicacademy.c...
#############################
❤️You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
#############################
would love to see this with capacitor 😉
Interesting, you seem to be the first to say that! Oh wait........ :D
@@galaxies_dev we still waiting )
@@galaxies_dev Just waiting to receive a notification of a new video of this for capacitor...
for real, we need this for capacitor!
I agree, altough I don't have any animated splash screen, I use SVG as image background in native Android apps, so I'd like to know how to make it without to modify the generated native project.
Lottie sounds definitely interesting. Worth to have a deeper look into that.
You should!
I would love to see how much more you can do with lottie. As far as I know you can/have to create lottie animations with adobe after effects.
Great video Simon!
But It seems Google has changed the way splashscreens work in Android 11 and 12.
Please advise....
again learnt something new with splash screen thanks simon...
Great to hear!
u are a genius, estuve matandome con el lottie, y solo daba errores, la verdad esta es la forma mas practica que he visto y me encanta!
Brother... once again... you save my life...
for who's having android.support.v4.... problem when building run these commands :
ionic cordova plugin add cordova-plugin-androidx
ionic cordova plugin add cordova-plugin-androidx-adapter
Thank you so much
even when i run these commands the app keep crashing
the same project using capacitor would have been nice since ionic always complains about using cap over cordova..!!
"complains" is not correct, it's just their recommendation by now ;)
Still, a lot of people out there have Cordova apps and it's important too. But I'll also work more with Capacitor in the future, since you can always use Cordova plugins with Capacitor as well.
@@galaxies_dev thanks for your very helpful videos! just one thing, the cordova splash screen doesn't work with capacitor.. i'm using the capacitor plugin but i'm having a white screen because of the fade i guess even though i put the fade animation duration to 0 to try to show the page immediately after the splash but still.. can you help ? thanks :)
@@Marshall86MT I'm stuck in the same issue.
Very helpful tutorial, can we implement it using capacitor
if the lottie has capacitor port then u can
I tired but didn’t find proper plugin, if anyone implemented lottie with capacitor please share with us thanks 🙏
Hi Simon,
Can you please make video guide on splashscreen api for Android 12+ devices for cordova-android >= 11?
Thanks
Thanks a lot Simon,I learn from you.could you give tutorial about capacitor login with Facebook and google plus
Great suggestion!
nice job Simon
would also love to see a tutorial on getting a cordova plugin working in capacitor project, following the documentation on ionic doesn't work.
Nice video Simon, always with amazing content thanks!!
My pleasure!
You saved my day 👍
Glad to hear it!
Rocking as always!! I saw this vdo screen while you are recording your week activities 😉 and I was waiting for it desperately
Simon, can you please show, how I can use lottie with capacitor, I tried before couple of week but no luck
Kindly look into, when time permits 🤞
Thank you so much 😀 Yeah more Capacitor, will try my best!
Thanks, when splash screen with capacitor?
great tutorial. thanks.
Glad you enjoyed it!
awesome tutorial
Glad you liked it :)
How you know , i was searching this topic today!!
Same project using capacitor?
Excellent great work, the Best master of Ionic.
Thanks a lot Jorge!!
Thank you for cordova's tutorial, but I'm looking for capacitor !
Can you help with setup the Lottie animation on Vue Js, Capacitor app.
I see a few have already asked the "Capacitor" question. Just had a look at the Capacitor Ref Doc on SplashScreen. I think I will try that one, although the "ionic cordova resources" command looks good - would it work by itself?
You can create the splash inside a Capacitor project like inside Cordova with that command since they updated it! But about Lottie I'm not yet sure, will check it out!
hi, Very helpful tutorial.
but there is an problem on android a grey screen before splash screen for one to 2 seconds and splash screen show navigation bar and status bar on bottom and top please give solution for that
Did you get?
Great video, Simon! I had a play around with lottie splash screens but found a dependency problem for my ionic 4 project. Lottie requires kotlin and android X (added in config.xml). But if I were to upgrade to android X, some of my other Cordova plugins would no longer work... There are some SO posts that suggest installing 2 further plugins : cordova-plugin-androidx and cordova-plugin-androidx-adapter in order to make it all coexist. At that point, it's getting a bit OTT for a simple splash screen update. I feel like I'm living in a house of cards.
I think you'll need AndroidX support anyway at some point :/
Very nice! Beware only android 9 is supported otherwise the app will crash on start!
me too, i try with android 6.0 is crashed too, do you have solution?
@@megepertv You can't use these plugin. Only Works on Android 9 and above. Sorry!
sir getting a multidex error while using it with firebase.... please help.. thanks in advance
Please update your Angular version to 9, it's needed for the latest AF version.
Hello good explanation.
But I got a problem after adding splash screen to my project after I built it an apk and tried to see the output means the app automatically closes soon after a black screen reply me soon..
Nice video Simon! but I've have a question, why aren't you using capacitor? I had the idea that ios won't be accepting cordova because of the deprecated UIWebview or maybe I'm wrong. I'm a little confused with that topic and I really hope you can help me to clarify this. Thanks in advance and I love your videos, keep it up!
Cordova works perfectly fine, and Cordova is not the reason your apps won't be accepted. There were issues with old WebView implementations, but this is not related to Cordova!
So it's still fine, but ofc I will also create more content around Capacitor in the future!
@@galaxies_dev thank you very much! I'll do more research on that topic, but your answer help me a lot. I'll be looking forward for those capacitor videos tho (:
How can i remove or add image in gray screen before splash
How can I have two images one after another in splash screen? Please reply..
Hi Simon, i am having an error while running this on the emulator and the device:
Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value: file /ios/capacitor-cordova-ios-plugins/sourcesstatic/CordovaPluginLottieSplashscreen/LottieSplashScreen.swift, line 223
I am pretty sure that the completionHandler should not be "nil", couldn't get a fix online. Any advise?
Hi Simon, I am very bad at Css. Make some tutorials on Designing
Noted!
@@galaxies_dev same here and i can learn alot of stuff about css but its really alot of stuff, it willl be helpful if you can share some libraries or any thing just like bootstrap to design apps quickly and nicely. and do you prefer global designing for ionic app or its better to design each page seperatly.
Perfect, how to do this with react js?
Sorry but I haven't worked with React yet Nelson :/
In ionic 5 with Vue dosn't exist Platform class
But sir for me, in android, while I click on the app, the app first launches with a grey screen, and then only it shows the splash image, don't know why so can u please help me with this. I am really stuck with this.
Hello did you get the solution
yes tried looking good 👍
Hope you enjoy!
@@galaxies_dev Yes as always...,,,
Thanks Simon,, but its not work with capacitor..
I hope you made video for capacitor.
I think they added support to this plugin to make it work with Capacitor as well?
thanks for the video Simon. I just have a question. Can i implement a background image behind the animation?. Thanks
Hmm I think you can do this directly in the animation, but you can also set a background color for the launch screen in your config.xml afaik!
How installing Lottie in After Effects ?
How to add Animated Splash Screen in Ionic 3 Apps?
Hello, can't I get app.component.html, please
How to change splash screen programmatically in ionic ... Is it possible to change splash screen dynamically in ionic.
No I don't think so, only app icon.
@@galaxies_dev do you have an example to show?
On Android before splash screen i have gray screen. How can i remove this. When i went search i see that it is backgriund of splash screen. i modified splash screen configurantions numbers but i cant remove this
Hello solution?
good afternoon simon
explain to us why the capacitor
took the resources folder from the ionic project
since it was the simplest way to generate the application's icon and splash
now you have to run this command
npm install -g cordova-res to generate the folder
but where is it in the project
if it is possible to make a videos
taught to put splash in the project I'll be grateful
because there isn't this video on youtube
You can simply create that folder once, and run the command with an icon and splash file in there like before. Check out this: capacitorjs.com/docs/guides/splash-screens-and-icons
@@galaxies_dev good afternoon Simon thanks for your attention I had a bit of difficulty but getting to create the Splash screen getting to understand the documentation I'm dedicating myself here because I want to master this framework just like you thank you I'm your fan
Hi Simon - Would it be possible to use a small video as the splash screen? Would it be the same as the SVG example but using
You can always come up with a custom solution, like presenting a page full screen that shows a video and dismiss the page after like 2 seconds to fake a splash screen!
Hello Simon! thanks for the tutorial, can you give a little tutorial for ionic 5? is different code and there is different things than the video, thank you ;)
No v4 and v5 are mostly the same and this was also more about the Cordova plugin than Ionic itself, so should work fine with the latest version!
@@galaxies_dev Thank you, at the end i had to revert it because couldnt fix it, looks it crashes and cannot see the problem
@@galaxies_dev Would you mind please to bring us a piece of code about how it should be? i cannot understand what im doing wrong because i doesnt work at all
Hi Simon, Nice tutorial i tried the same but the iOS build fails for some reason after adding lottie plugin. Is there any thing need to check. I'm on ionic v5 and xcode 11.5
I'm not aware of any issues, you should check the build log for a detailed log of the actual error!
Hello buddy. It's possible to use lottie animations with capacitor project? or only works with cordova project?
I guess it will work but I haven't tried so far :/
I think in 2021 there is no config.xml file anymore, its a tsconfig.json file now i think
If you use Cordova in 2021 there will be a config.xml ;)
Super useful, but how many mb lottie has?
I haven't checked!
Please update this tutorial
This is quite up to date, not sure what you mean?
Can I use this in my Capacitor project ?
I think this setup won't work as it requires changes inside the config.xml, but perhaps there'll be a Capacitor plugin for this in the future!
its works great with cordova but wht if i want to use it with capacitor ??
I think there is no Capacitor plugin for this yet :/
@@galaxies_dev Hi Simon! I've been working during the entire day to make it work with capacitor, but I couldn't. Everything you did in your tutorial was using only cordova to build the apk?? thank you!
looking at video uploaded date, i thought you are using capacitor.
Yeah I mostly use Capacitor these days but for Lottie there wasn't a package yet :/
Dont work in my project, lottie no work!!! =(
What happened captain ionic!!!..... I dont work this tutorial with Lottie Splash Screen, No load the splash screen, Its Ok if I want call .json from url of lottie files?
I'm not a Lottie expert yet, but the setup of the video should definitely work!
I am having this weird error with Lottie "'Lottie/Lottie.h' file not found" any possible solutions ??
I have already tried to add Lottie.framework in Xcode but I could not find it!.
Thank you.
Normally Cordova should add everything that you need, so not sure what went wrong :/
with capacitor????
Haven't found a way yet!
@@galaxies_dev okok thanks
Lottie animations crash in android.
Please, make some content in Ionic and React
Hi Simon, nice tutorial video, well done.
I am wondering if Lottie Splash Screen plugin only serves Cordova and its not available for capacitor right now why at ionic documentation (ionicframework.com/docs/native/lottie-splash-screen#installation) there is installation section for capacitor!
It would be really great if you provide us with any solution that let using Lottie Splash Screen or gif for capacitor splash screen. Thanks
Good question indeed.. But from what we've seen in here we need to add settings to the config.xml which you don't have with Capacitor. But perhaps it works for Capacitor even without it?