CODEWITHSUNDEEP
androidangularionic-frameworkkeyboardcapacitor
gtnikqi
gtnikqi

Reputation: 55

Fix Android keyboard resizing and input obscuring in Ionic (inputShims)

Hi everyone,

I'm not sure who needs to hear this, but I certainly wish I had known this earlier.

For a long time, I struggled with getting the keyboard to behave smoothly and predictable on Android devices when building an app with Ionic/Angular. The main issue was that the keyboard would often resize the layout abruptly and covering input field, overall creating a poor UX.

I spent a lot of time searching for solutions, tweaking different configurations and trying to find a way to prevent the keyboard from causing these issues.

I tried using android:windowSoftInputMode="adjustPan" in the Android manifest, but that didn't solve it. I also tried with different keyboardResize options in the Capacitor config (Ionic, Body, Native), but none of them gave me the smooth behavior I was looking for.

After some more searching around, I found a thread on Github about a niche that isn't well documented in Ionic's official documentation - at least not that I could find. This feature ended up being the solution to my problem.

I'll provide the solution in my answer below :)

Upvotes: 1

Views: 260

Answers (2)

Corxit Sun
Corxit Sun

Reputation: 766

post my answer for who's searching about ionic keyboard trigger resize webview...

Descrition:

Ionic Android will auto resizing webview while focusing input.

My need is prevent this default behavior 👇🏻

enter image description here

Steps:

  1. Add config options in ~/capacitor.config.ts:
CapacitorConfig = {
  ...
  plugins: {
    Keyboard: {
    
      //OptionA:
      resizeOnFullScreen: false,
      
      //or
      
      //OptionB:
      //resize: "none",
      
    },
  }
}

# then run command below
# to copy config options to Android project at `/MyIonicApp/android/app/src/main/assets/capacitor.config.json`

  ionic capacitor sync android
  1. Then set MainActivity configs in ~/android/app/src/main/AndroidManifest.xml:
<activity ... android:windowSoftInputMode="adjustPan" ...>
  1. run Android app...

Refs:

Upvotes: 0

gtnikqi
gtnikqi

Reputation: 55

I came across this GitHub thread, where they mention a config setting called InputShims, that helps fix some Android-specific behavior - like how the keyboard interacts with input fields.

One of the Ionic engineering leads pointed out that scroll assist isn't enabled by default on Android - only iOS. So in order to include the scroll assist on Android you'll have to add inputShims: true to the configuration, like this:

IonicModule.forRoot({ inputShims: true })

They also mentioned that the scroll assist will not work if webview resizing is enabled, which was supposed to be fixed later. But since this thread is 4-5 years old, I haven't really noticed a difference between setting resize to None or Ionic. That said.. this was the original suggestion:

In JSON

{
  "plugins": {
    "Keyboard": {
      "resize": "none"
    }
  }
}

Or if Typescript:

  plugins: {
    Keyboard: {
      resize: KeyboardResize.None,
    },
  },

Again, I'm not sure if this will help others dealing with Android keyboard, it definitely helped me. Maybe I'm just slow or maybe I missed something.. But now it's out here and maybe it could save someone else.

Have a great day :)

Upvotes: 2

Related Questions