Edge to edge Android

Ionic Framework
22

This seems to almost fix things, however it says to disable

Keyboard: {
  resizeOnFullScreen: false
}

If I set the above to false, then the keyboard covers my input. With it true, the input jumps up too high, and there is an area a different color to app back ground, the area seems to be Android native window.

E.g. with the following in MainActivity.java..

int windowColor = ContextCompat.getColor(this, R.color.debug_window_bg);
getWindow().setBackgroundDrawable(new ColorDrawable(windowColor));

the color being magneta, this s what I see

image
image357×778 59.9 KB

If I set resizeOnFullScreen to false, then the Keyboard covers the input.

I have https://capacitorjs.com/docs/apis/status-bar plugin installed, not sure if I am meant to replace this with System Bars Capacitor Plugin API | Capacitor Documentation

Also, the https://capacitorjs.com/docs/apis/system-bars does not have installation instructions,

npm install ???

Perhaps I need a new post for this, as I think this one is closed?

23

Feel free to create a feature request on GitHub and provide a minimal, reproducible example for the problem. Maybe we can add support for it.

Regarding the System Bars plugin: You don’t need to install any plugins. The API is part of the Capacitor core.

24

@robingenz I was able to repo in a sample and done as you suggested. Also, I found I was wrong about the resizeOnFullScreen it does work with this false, but we still get the gap. I did do a separate post (perhaps not needed)

Issue is here bug: Edge to edge creates a small gap where we can see the main native Window between keyboard and HTML page · Issue #725 · capawesome-team/capacitor-plugins · GitHub

25

Nos has salvado!!
Buenisimo, me funcionó, solo lo instalé y agregué esto
plugins: {
SystemBars: {

  insetsHandling: 'disable'

}

}, en el CapacitorConfig

Gracias!