CODEWITHSUNDEEP
androidcordovawebview
CoderCreative
CoderCreative

Reputation: 225

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

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?

Upvotes: 12

Views: 12695

Answers (3)

dmnkthfx
dmnkthfx

Reputation: 93

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.

Upvotes: 1

J. McNerney
J. McNerney

Reputation: 626

Another option is to use the Cordova Reference Plugin API "StatusBar".

Cordova 6.3.1 cli-5.3.7

cordova plugin add cordova-plugin-statusbar

The following code will hide the status bar. I use the "if (window.StatusBar)" since the same function is run on non-cordova platforms (e.g. stand alone browser).

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    if (window.StatusBar) window.StatusBar.hide();
}

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/index.html

Upvotes: 0

Stanislav
Stanislav

Reputation: 4549

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

Upvotes: 14

Related Questions