How do I keep my Cordova app full-screen when opening the Android keyboard?

Question

I've created a Cordova app and I'm testing it on a Nexus 4. I've used the basic steps listed in the Cordova CLI workflow to get up and running. I've also modified my config.xml with this:

<preference name="Fullscreen" value="true" />

My app runs full-screen as expected. As soon as I click on an input field the keyboard slides up as expected, BUT android's black top and bottom bars appear too, which remain even after the keyboard is closed.

To make matters worse, they actually hide portions of the app. At that point, the only way to get rid of them and return to full-screen is to quit the app and restart it. UPDATE: I've discovered that the user can remove them by swiping down and back up again on the status bar or tapping the recent apps button, but this is not obvious.

Is there a way that I can prevent the top and bottom bars appearing?

Ideally I'd like to avoid changing anything in the platforms/android directory, as I'm new to mobile development. Perhaps a there's a config option, hook, or even a plugin that I can just drop in that would solve this?

Answer 1

For me it started to reproduce after I updated to cli-5.2.0. I found 2 solutions so far:

1. Switch back to cli-5.1.1
2. Add cordova-plugin-fullscreen and put AndroidFullScreen.immersiveMode() in the DeviceReady event handler.

I preferred the second solution. I hope that the problem will be fixed in future cordova releases and I will be able to remove my workaround. I believe that the relevant ticket is this: https://issues.apache.org/jira/browse/CB-8902

Answer 2

As a solution before a fix is released, I use jQuery .focusout() and simply start immersive mode again.

$('#page_textinput').focusout(function (event) {
    AndroidFullScreen.immersiveMode();
});

It is probably in the category "quick & dirty" but it works for me.