How to make ionic 4 android app fullscreen ( hide statusBar ), the way i solved it

Ionic Native
1

I have tried every thing but for some reason following code fails to hide the status bar on the android device.

the ionic vue beep app, joule app are able to do it in a way but my code fails on the same device. what is wrong then here ?

import { Component } from "@angular/core";

import { Platform } from "@ionic/angular";
import { SplashScreen } from "@ionic-native/splash-screen/ngx";
import { StatusBar } from "@ionic-native/status-bar/ngx";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html"
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.overlaysWebView(true);
      if (window.statusbar) {
        this.statusBar.hide();
      }
      this.statusBar.backgroundColorByHexString("#ffffff");
      // this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
}

i am building the app with capacitor.

i get the following error in browser inspect,

Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:16829

Native: tried calling StatusBar.overlaysWebView, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator common.js:290

Native: tried calling StatusBar.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator common.js:290

Native: tried calling StatusBar.backgroundColorByHexString, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator common.js:290

Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator common.js:290

in android studio i add this line in style.xml

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:background">@null</item>

        <item name="android:windowFullscreen">true</item>
    </style>

this works … so what was the actual issue here ? or is it compulsory to add this line in style.xml in android studio before compiling ?

i hope people searching for a solution can now not waste more time on this …

2

How are you compiling your app into a native app? Often settings like this are defined in the config.xml file that Cordova uses. Capacitor is a different story.

3

I am using capacitor. recently i did a cordova one and found it their but for capacitor i have to go to the AndroidManifest.xml file and add the below code to the theme.

 <item name="android:windowFullscreen">true</item>

any alternative you know of ???

4

https://capacitor.ionicframework.com/docs/apis/status-bar#method-hide-0

Capacitor offers this api to hide the statusbar which will make the app run fullscreen. But as far as I know there is an issue with android implementation. You can follow this issue link to get updated https://github.com/ionic-team/capacitor/issues/1887