Go fullscreen on Android in NativeScript + Angular

Forcing your Android app to go full-screen is super simple when using NativeScript.

In your controller, just do this:

import { android as androidApp } from 'tns-core-modules/application';
import { device } from 'tns-core-modules/platform';
declare var android: any;

...

  private goFullscreen() {
    if (androidApp && device.sdkVersion >= '21') {
      const View = android.view.View;
      const window = androidApp.startActivity.getWindow();
      const decorView = window.getDecorView();
      decorView.setSystemUiVisibility(
        View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
          View.SYSTEM_UI_FLAG_FULLSCREEN |
          View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
      );
    }
  }

  private hideFullscreen() {
    if (androidApp && device.sdkVersion >= '21') {
      const View = android.view.View;
      const window = androidApp.startActivity.getWindow();
      const decorView = window.getDecorView();
      decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    }
  }

I’m using something called Sticky immersive here. There are 3 full-screen options for Android, and they are all laid out clearly here.

If you want to go fullscreen on iOS, simply tell the app to go into landscape mode. For this I highly recommend the nativescript-orientation plugin.

import * as orientation from 'nativescript-orientation';
...
  ngAfterViewInit() {
    orientation.setOrientation('landscape', false);
    orientation.disableRotation();
  }

I do this in ngAfterViewInit()as a workaround to this outstanding bug.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s