Android fullscreen not working with ionic 4 (Notch + toolbar)

Ionic Framework
1

Hey,
we are in the middle of developing and testing our app on various devices and encounter an issue with android:

The ionic app doesnt expand to the areas next to a “notch” or a non present toolbar at the bottom.

f577396c-5744-4a68-b34f-cd759d65943f

ios handles it quite well:

23
Screenshot 2019-05-02 at 19.29.23.jpg842×1716 96.3 KB

The upper area besides the notch stays black (iOS iphone x handles it quite well and styles the area)
The lower black bar is where the deactivated toolbar would be i guess.

How can i make my android app behave like on the iPhone X where all these areas are covered properly?

Thanks for any hints/advice!

1 Like
2

still facing this issue. i’m not really at home in the android universe but this seems to be a problem at the native/cordova level. Any hints where to set the app behaviour in an android projects concerning the toolbar/notch behaviour?

3

I resolved it by manually calling this.statusBar.overlaysWebView(true); in the initializeApp() even though the docs say this is default.

Additionally i had to fix the missing top inset on android when a notch is present via https://github.com/ionic-team/ionic/issues/17927#issuecomment-492198561

1 Like
4

it did not work for me

5

If you give some more detail i might be able to help you.
Like the contents of your initializeApp()

6

a quick solution, without relying on external plugins, nor set overlaysWebView true.
It is to set the background in backgroundColorByHexString of the same color as the toolbar.

7

This plugin is obviously completely bugged because using timer inside plateforme change a lot a things in my case, but finally getting work by using overlays too …

      setTimeout(() => {
        this.statusBar.overlaysWebView(true);
      }, 500);