Hello I'm building an app with Ionic, and I want to remove the loading spinner on splash screen when the app starts, any solution for this?
Add this to your config.xml-file:
<preference name="ShowSplashScreenSpinner" value="false" />
Here are som more preferences you can make use of.
Related
I have created an Ionic app but the load time is too much and sometime white screen appears before loading.
How can i reduce the load time?
Issue i am facing as below:
If i keep value as 6000, i am getting the below error:
<preference name="loadUrlTimeoutValue" value="6000" />
Error:
Application Error - The connection to the server was unsuccessful. (file:///android_asset/www/index.html)
If i increase the value as 60000, i am getting white screen after splash and the white screen is visible for around 10 to 15 seconds, then it disappears and the app loads.
Below is the config.xml details.
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreenDuration" value="1000"/>
<preference name="SplashScreenDelay" value="6000"/>
<preference name="ShowSplashScreenSpinner" value="true"/>
<preference name="AutoHideSplashScreen" value="true"/>
<preference name="FadeSplashScreen" value="true"/>
<preference name="ShowSplashScreen" value="true"/>
<preference name="SplashScreenBackgroundColor" value="0x1d1c1e" />
<preference name="loadUrlTimeoutValue" value="6000" />
A couple things to note here. First, you've got SplashScreenDelay set to 60 seconds (60000 miliseconds). That's a very long time. According to docs: "Amount of time in milliseconds to wait before automatically hide splash screen." Secondly, you have AutoHideSplashScreen set to false.
What's your end goal here? I'd recommend setting AutoHideSplashScreen to 'true'. Then decrease SplashScreenDelay.
If you want to control exactly when the splash screen disappears, you can.
Install the plugin if you don't have it (https://ionicframework.com/docs/native/splash-screen).
Add to your constructor in your parent component (likely app.component.ts):
private splashScreen: SplashScreen
Inside your component, you can choose when you want to hide the splash screen. For me I typically use it in ngOnInit(). Just use this.splashScreen.hide(); to close the splash screen. Granted, you can use later lifecycle hooks depending on when you want the app to hide the splash screen.
At this point you can remove AutoHideSplashScreen from your config.xml.
Now to stop the white flash before, you'll need to add this to your config.xml:
<preference name="SplashScreenBackgroundColor" value="0x1d1c1e" />
This color is for a dark grey, but you can adjust it to whatever color you want.
I already used
cordova-plugin-splashscreen
and in config.xml
<preference name="SplashStatusBarBackgroundColor" value="#b83500" />
<preference name="SplashNavigationBarBackgroundColor" value="#b83500" />
<platform name="android">
...
</platform>
it is not work
and in component.ts
this.statusBar.backgroundColorByHexString('#b83500');
but it change after splash screen.
so, how can i change status bar color during splash screen.
Remove the splash screen plugin and install this version of the plugin from
ionic cordova plugin rm cordova-plugin-splashscreen
ionic cordova plugin add https://github.com/goinnn/cordova-plugin-splashscreen.git#4.0.0#colors
Following this you can then add the preferences in you configx.xml file as you have already mentioned. However, do place them in the android section
<platform name="android">
<preference name="SplashStatusBarBackgroundColor" value="#b83500" />
<preference name="SplashNavigationBarBackgroundColor" value="#b83500" />
...
</platform>
This will solve you issue.
Do keep in mind this will cause issues with the ios version as this is an older version of the plugin itself. It however works perfectly on android.
This will only change color of status bar on splash screen. To keep the color changed you need to keep the following code in your app.component.ts file.
this.statusBar.backgroundColorByHexString('#b83500');
For Android, add following in styles.xml (I'm showing status bar with white background)
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
<item name="android:statusBarColor">#android:color/white</item>
</style>
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
<item name="android:statusBarColor">#android:color/white</item>
</style>
I have a "problem" with my app. When it's running, after the splash screen and before the app is ready, a white screen appears for about 5/6 seconds and it's so annoying.
How is it possible to avoid this white screen?
I didn't see a lot of questions about this (without working answers) and I would like to have an updated answer. I don't post code because I don't know which code could be useful.
Ionic version 3.13.2
Thank you.
This may be due to the fact that your application takes longer to load than the duration of the splahscreen.
In your config.xml file you may have something like:
<preference name="SplashScreenDelay" value="3000" />
That means that the splashscreen will automatically fade out after 3 seconds. However, if your app is not ready after that time, you will see a white screen while your app finishes loading.
The solution is to set a longer time for your splashscreen and to also turn off AutohideSplashScreen. In the config.xml file:
<preference name="AutohideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="30000" />
Then you need to make sure that you turn the splashscreen off from inside your app, as soon as your app is ready.
Typically in the app.component.ts class constructor:
this.platform.ready().then(() => {
this.splashScreen.hide();
});
I am working on a project which is in ionic framework.When I start the app there is a splash screen of login. When I logged in , for some time there is a white Blank screen appears and then next view is get rendered. I want to remove that white blank screen. any help will be appreciated.
I tried many versions of cordova-plugin-splashscreen, and I found that version 2.0.0 works perfect. Please try it, regards:
cordova plugin add cordova-plugin-splashscreen#2.0.0
Install splashscreen
cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git
And set the following preferences in the config.xml
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="2000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="ShowSplashScreenSpinner" value="true"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreenDuration" value="1000"/>
You can also use a setTimeout function to programatically hide the splash screen:
Previously you need set:
<preference name="AutoHideSplashScreen" value="false"/>
Then:
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
setTimeout(() => {
this.splashScreen.hide();
}, 3000);
});
}
I have an Apache Cordova project using VS2015 and am using the Ionic framework.
My config.xml includes the following:
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
However I only see the splash screen for a very brief duration (maybe 1/2 a second) when deploying to an iOS device.
Is there some other implementation that is required for splash screens to appear for the time specified by 'SplashScreenDelay'?
Have u tried in in an emulator it might me a one off issue with the device.I would recoment using the GennyMotion emulator.
If you are setting up the splash screen using the cli i would recommend this tutorial and video here
http://pointdeveloper.com/how-to-add-splash-screen-for-ionic-framework-apps/