Keyboard height is not correct on some of the Android devices

[viplavsoni]

Ionic: 3 npm version: 6.9.0 Cordova version: 8.1.0 OS: Android 9, OxygenOsVersion ( 9.0.5 )

We are using the onKeyboardWillShow method to move up the ion-app element. This works fine on all the Android & iOS devices (across different OS versions) but the keyboard height is a bit different on above mentioned Android OS.

Here is the code that we are using to set a bottom height on the ion-app element:

private registerKeyboardEvents() {
     this.rootElement = document.querySelector('ion-app');
     this.keyboard.onKeyboardWillShow().subscribe((data: any) => {
         this.renderer.setStyle(this.rootElement, 'height', 'auto');
         this.renderer.setStyle(this.rootElement, 'bottom', `${data.keyboardHeight}px`);
     });
     this.keyboard.onKeyboardWillHide().subscribe(() => {
         this.renderer.removeStyle(this.rootElement, 'height');
         this.renderer.removeStyle(this.rootElement, 'bottom');
     });
}

Just to mention, that have turned off the default resizing of the view with this setting:

<preference name="KeyboardResize" value="false" />

[ankit18singh]

+1

[rhanesoghlyan]

+1

[Mapiac]

+1

[rhanesoghlyan]

+1 The Same issue

[alexarvanitidisalpha]

+1

[rehiy]

+1 the same issue

[jcesarmobile]

Please people, don't comment with +1, instead of that, provide the information of the devices where the height is not correct so it can be investigated. And kudos if somebody can provide a sample app where it can be easily reproduced.

[vertazzar]

This happens on MI9 XIAOMI as well

It seems that these phones with weird displays have some quirks

[vertazzar]

The problem is the

                            if (Build.VERSION.SDK_INT >= 21) {
                                Display display = cordova.getActivity().getWindowManager().getDefaultDisplay();
                                Point size = new Point();
                                display.getSize(size);
                                screenHeight = size.y;

For this case with Mi9 the correct screenHeight variable is rootViewHeight when you do the math. I'm not sure why the window manager has to be invoked here

EDIT:

While on the emulator I edited the code to use rootViewHeight, the problem appears to be very clear:

We can now conclude that the problem with newer android phones is that they introduced an option which allows turning off the "Back, Home, Apps" bottom navigation

When you turn the navigation off the calculation is completely wrong.

When navigation is turned on, if you have google keyboard this happens however:

NOTE: All works fine on normal emulator configuration with arrow navigation Android 8 though.

[JiDW]

Hello,

We have the same issue here with every Android that use this kind of buttons, like on Google Pixel 3.

Any idea on how to fix that?

Thanks :)

[vertazzar]

I gave up on this

[TombolaShepless]

Is there any word on a fix for this?

[waptaxi]

Same problem with Xiaomi Redmi Note 7. Keyboard size reported by the plugin is less than actual size both in bottom buttons mode and in buttonless mode.

[olivermuc]

Also seeing issues with receiving the correct keyboard height on a Pixel2. It appears to be exactly 50px too short in height.

[jaco-fq]

This seems to be caused by the keyboard height calculation not considering display cutouts. I've made a fork which fixes this issue, which I verified works on a Samsung Galaxy S10. It would be great if anyone could verify this on other affected phones:

https://github.com/jaco-fq/cordova-plugin-ionic-keyboard

[olivermuc]

Will give it a try asap, thx for looking into this. Also, I did find out what caused this in the first place: I recently added a cordova plugin to hide the Navigationbar (on some Android devices). Apparently that delta in height is/was not considered in the calculation. Would this be covered by your added logic?

[waptaxi]

https://github.com/jaco-fq/cordova-plugin-ionic-keyboard

This fork fixed the problem on Redmi Note 7 (Android 9) but only when bottom navigation buttons is visible (in my case keyboard height is 278px) In full screen gestures mode (without navigation panel) keyboard height is wrong (251px in my case)

[jaco-fq]

Unfortunately it's difficult for me to fix it if I don't have access to the actual phone which shows the bug. Feel free to fork my repo and expand on it.

[jaco-fq]

Will give it a try asap, thx for looking into this. Also, I did find out what caused this in the first place: I recently added a cordova plugin to hide the Navigationbar (on some Android devices). Apparently that delta in height is/was not considered in the calculation. Would this be covered by your added logic?

The issue that my fork fixes is with display cutouts. Apparently Android considers the screen section with the cutout to be part of the visible area, but not part of the 'full screen height'. So KeyboardHeight = (FullScreenHeight - VisibleHeight) returns a number that is too small.

I'm not sure what happens with the navigation bar being visible or not. On my Galaxy S8 and S10 this solution both works fine, with or without the navigation bar.

[waptaxi]

After doing some debug on my Redmi phone I have this result: screenHeight is the same with navigation bar visible and hidden. Sounds illogically. So with navigation bar we need to add navigation bar height to get correct keyboard height.

[waptaxi]

Maybe we can use windowInsets.getSystemWindowInsetBottom()? In my case correct keyboard height is rootViewHeight - resultBottom - SystemWindowInsetBottom in both cases. Also there is getSystemWindowInsetTop(), but I don't know is it correct to get display cutout height with this function or it's better to use getDisplayCutout()

[jaco-fq]

I did some more research into this problem, and after a lot of trial-and-error I managed to fix it. It appears to me now this problem is two-fold:

Problem 1

cordova-plugin-ionic-keyboard does not report the correct keyboard height when the phone has display cutouts. This plugin calculates the keyboard height using the following formula: keyboardHeight = screenHeight - visibleHeight. When the phone has display cutouts, the screenHeight (reported by Android) shrinks to only cover the area between the cutouts. However the visibleHeight does not shrink, causing the resulting keyboardHeight to be too small.

Fix

My fork of this repo fixes the problem by adding the cutout heights to the total screenHeight: https://github.com/jaco-fq/cordova-plugin-ionic-keyboard

Problem 2

ionic-v3 does not use the reported keyboard height from cordova-plugin-ionic-keyboard. Instead, it uses some default value from platform-registry.ts, which depends on the platform. On Android phones this is always 300 pixels, which is wrong most of the time. Especially when using custom keyboards.

Fix

I've fixed this problem in my fork of ionic-v3, published here: https://github.com/jaco-terbraak/ionic-v3/packages/25435

This package replaces ionic-angular in your package.json. Also you need to alias @jaco-terbraak/ionic-v3 to ionic-angular, which you can do using the link-module-alias package.

[waptaxi]

My fork of this repo fixes the problem by adding the cutout heights to the total screenHeight: https://github.com/jaco-fq/cordova-plugin-ionic-keyboard

As I said, your fork doesn't fix the problem on Redmi phones. Could you test https://github.com/waptaxi/cordova-plugin-ionic-keyboard with your phone? This fork uses WindowInsets to calculate the keyboard height.

[Cevantime]

@waptaxi the fork you mentionned doesn't seems to work. What worked best (for the largest number of phones) is the one posted by @jaco-fq

[waptaxi]

@waptaxi the fork you mentionned doesn't seems to work. What worked best (for the largest number of phones) is the one posted by @jaco-fq

I have no negative user reports about keyboard behavour in application with tens of thousands installations using this fork. What exactly doesn't work for you and on what device and android version?

[Cevantime]

On my huawei device with android 9 (cordova with ionic-webview app), the returned height is 0 ! Wonder if this has something to do with my preferences. Anyway with the exact same setup, the height returned by previous fork is correct.

[waptaxi]

On my huawei device with android 9 (cordova with ionic-webview app), the returned height is 0 ! Wonder if this has something to do with my preferences. Anyway with the exact same setup, the height returned by previous fork is correct.

Do you mean you use cordova-plugin-ionic-webview on Android? I don't use Ionic, but I don't think this would be an issue.

[geshub]

Will this fork be merged in the official plugin soon ? It's a very big problem on chat screens as the keyboard overlap the input field on devices with display cutouts like the Huawei Mate20 Pro

[laobento]

I modify the CDVIonicKeyboard.java in line 111, like this:

String msg = "S" + Integer.toString(pixelHeightDiff - previousHeightDiff);

I test it on my android phone and the emulator, It looks work.

[BrownShrike]

I modify the CDVIonicKeyboard.java in line 111, like this:

String msg = "S" + Integer.toString(pixelHeightDiff - previousHeightDiff);

I test it on my android phone and the emulator, It looks work.

Thanks, It works on [huawei nova 4e , android 10]

[geshub]

That would be great to have that correction in the official plugin

[Hanzofm]

@jaco-fq

Problem 2 ionic-v3 does not use the reported keyboard height from cordova-plugin-ionic-keyboard. Instead, it uses some default value from platform-registry.ts, which depends on the platform. On Android phones this is always 300 pixels, which is wrong most of the time. Especially when using custom keyboards.

This problem persist on ionic 5?

[peckz]

@BrownShrike Thanks, it's working! Note to everyone, the forked version is available on my profile, tested on Huawei and Xiaomi devices, tested on android 11

[bymagnum]

On my huawei device with android 9 (cordova with ionic-webview app), the returned height is 0 ! Wonder if this has something to do with my preferences. Anyway with the exact same setup, the height returned by previous fork is correct.

Do you mean you use cordova-plugin-ionic-webview on Android? I don't use Ionic, but I don't think this would be an issue.

Tell me, is your fork relevant for today? Tell me more - on which phones has your plug been tested (are all phone series?) ?

[bymagnum]

I modify the CDVIonicKeyboard.java in line 111, like this:

String msg = "S" + Integer.toString(pixelHeightDiff - previousHeightDiff);

I test it on my android phone and the emulator, It looks work.

Unfortunately, the effect of this installation is observed, you need to press the keyboard twice to establish the previous state of reviousHeightDiff, the first value shows 188, at the first appearance, the second appearance of the keyboard is - 250 (correct) (phone hauwei 8x). Why is this happening? - the fact is that pixelHeightDiff is installed - previousHeightDiff , 188 + 62 = 250 - which is not quite true (