Android keyboard overlay - TNS 4.1.3

nativescriptcore
android

#1

Keyboard overlays the inputs on Android.

The issue can be reproduced easily.

  1. I created the project using “Angular Drawer Navigation Template” from:
    https://github.com/NativeScript/template-drawer-navigation-ng

  2. Then I updated “settings.components.html” as per below:

<TextField id=“customer-lastname” [(ngModel)]=“customer.lastname” class=“input”> <TextField [(ngModel)]=“customer.firstname” class=“input”> <TextField [(ngModel)]=“customer.phone” keyboardType=“phone” class=“input”> <TextField [(ngModel)]=“customer.email” keyboardType=“email” autocorrect=“false” autocapitalizationType=“none” class=“input”> <TextField id=“customer-lastname” [(ngModel)]=“customer.lastname” class=“input”> <TextField [(ngModel)]=“customer.firstname” class=“input”> <TextView [(ngModel)]=“customer.notes” maxLength=“130” borderWidth=“1” returnKeyType=“send” class=“input input-border”>

I tried to update “AndroidManifest.xml” with "android:windowSoftInputMode=“adjustResize”, but nothing changed!!!

This seems to be a nativescript bug:

Any suggestion or work-aroud?


#2

You will have to set fitsSystemWindows to true for adjustResize to work.

eg: sideDrawer.nativeView.setFitsSystemWindows(true);

But doing so may affect appearance of your drawer. There are few more flags / options to be set depending on the Android version in order to fix that. An easy alternative could be using adjustPan.


#3

You can do that application-wide by changing the windowSoftInputMode in your AndroidManifest

<activity android:name="com.tns.NativeScriptActivity"
                  android:label="@string/title_activity_kimera"
   THIS LINE  >>> android:windowSoftInputMode="adjustResize" <<<<
                  android:configChanges="keyboardHidden|orientation|screenSize"
                  android:theme="@style/LaunchScreenTheme"
                  android:screenOrientation="sensorPortrait">

#4

android:windowSoftInputMode=“adjustResize” >>> doesn’t work :frowning:

sideDrawer.nativeView.setFitsSystemWindows(true); >>> works, but it affects appareance of the drawer (the toolbar is pushed down and a little rectangle appears on top - see below screen)


#5


#6

That’s exactly what I mentioned earlier.


#7

Any way to remove that rectangle or limit this effect? … I cannot use adjustPan, as this causes another side effect :frowning:


#8

adjustResize seems to work well in Playground app, I will try to find some time to debug and let you know.


#9

adjustResize seems to work if set as soon activity is created, can you try adding this to your main.ts (before the bootstrapModule statement) and see if that makes any difference.

import * as app from 'application';
import { isAndroid } from 'platform';

declare var android;

if (isAndroid) {
    app.android.on(app.AndroidApplication.activityCreatedEvent, (event: app.AndroidActivityEventData) => {
        event.activity.getWindow().setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
    });
}

#10

I tried but it doesn’t work :frowning:


#11

Would you try to set the following value of ‘windowSoftInputMode’ property in your AndroidManifest.xml ?
android:windowSoftInputMode=“adjustPan”
Then remove your ‘platforms’ folder and rebuild. This should keep the input item on focus visible.


#12

android:windowSoftInputMode=“adjustPan” >>> I have already tried this solution - it works, but I cannot use for my APP, since there is a button (-> SAVE) on toolbar that is pushed out from screen and not anymore visible to the user