Cordova hide statusbar during show splashscreen

Question

Splashscreen shows by plugin cordova-plugin-splashscreen. But when the application starts up and displays the splashscreen, status bar is not hidden. How can I hide statusbar when splashscreen is displayed? I found this solution:

How to completely hide the status bar in iOS using Cordova?

But it's work on iOS. My platform is Android.

score 4 · Answer 1 · edited Dec 25 '18 at 10:54

in ionic 3 app, if <preference name="Fullscreen" value="true" /> does not work, do the following:

Install the fullscreen plugin:

ionic cordova plugin add cordova-plugin-fullscreen
npm install --save @ionic-native/android-full-screen

add this in the config.xml file to customize theme:

<widget ... xmlns:android="http://schemas.android.com/apk/res/android">   // note this xmlns:android line
    <platform name="android">
    ...
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
      <activity android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/>
    </edit-config>
  </platform>
</widget>

add full screen provider in src/app/app.module.ts:

....
// add this line at the top of the file, import it
import {AndroidFullScreen} from "@ionic-native/android-full-screen";
...
providers: [
  StatusBar,
  SplashScreen,    
  {provide: ErrorHandler, useClass: IonicErrorHandler},
  AndroidFullScreen,   // here add this line
  ...
]

use it in src/app/app.components.ts:

// add this line at the top of the file, import it
import {AndroidFullScreen} from "@ionic-native/android-full-screen";
...
constructor(public platform: Platform,
            public statusBar: StatusBar,
            public splashScreen: SplashScreen,
            public androidFullScreen: AndroidFullScreen) {

  // show statusbar
  this.androidFullScreen.isSupported()
    .then(() => this.androidFullScreen.showSystemUI());

  // style statusbar and hide splash
  this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
  });
}
...

But I needed to change de package version to: `npm install --save @ionic-native/android-full-screen@4` — Andrews Duarte, Apr 24 '19 at 18:14

score 0 · Answer 2 · answered Jun 10 '20 at 07:14

For Android, If you have a splash with single colored background change status bar to same color.

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>

Cordova hide statusbar during show splashscreen

2 Answers2