I would like to know how to remove the status bar under ios please.
On android I do not have this problem, but on iOS the status bar is still visible.
Thank you in advance for your answers
ionic.Platform.fullScreen();
Or
//add the following code in config.xml file
<platform name="android">
<preference name="Fullscreen" value="true" />
</platform>
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 am developing native ionic application for Android platform. When I open my app, there is a white screen showing for long time and entered into the page. I don't want to show the white screen or is there any way to reduce the white screen showing time. I am new to Ionic. Please suggest me on this point.
Try adding this to the config.xml:
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="10000" /> // You can control how many seconds the splash screen will be displayed
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashScreen" value="screen" />
<preference name="ShowSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="true" />
and then on the platform.ready() call Splashscreen.hide();
In config.xml file please increase follow preference value.
<preference name="SplashScreenDelay" value="30000" />
Please share your code. It might be related to not using lazy loading correctly.
If you are importing your pages into your app module, or while navigating you're doing it wrong.
Change your main.ts file from
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
To
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import {enableProdMode} from "#angular/core";
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
If you are running your app with production flag(--prod).
You can use lazy loading to minimize white screen time.
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 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/