Keyboard content overlap issue with crosswalk

Hi All,

After installing crosswalk for android the keyboard no longer pushes the content up, instead it simply overlaps the content. This problem persists in android alone and I am sure it’s because of crosswalk since it works fine when I remove crosswalk.

Could someone please help me out here, I just can’t figure out to why this might be happening.

Thanks!

1 Like

i have same issues, please help !

I managed to make this work with:

  1. <preference name="Fullscreen" value="false" />
  2. android:windowSoftInputMode="stateVisible|adjustResize"

The problem is that with this method the keyboard is visible when the app launches and the app is no longer fullscreen. How do I make this keyboard work without resorting to such hacks. Any inputs will be appreciated.

Thanks.

Hi Whitecat29,

I managed to fix this issue by borrowing code from this SO post: LINK

It is isn’t perfect, but much better than getting your inputs overlapped by the keyboard. Hope this helps :smile:

1 Like

Hi wtflux

Does it works on android 4.4.4 and android 5.0 ? have you test it?
Could you share small your code, and how to include it in project for solving this bug?

Thank you

Sure thing. I will try and list down the steps here:

  1. Copy the code from this SO LINK into a file called AndroidBug5497Workaround.java ( you can name it whatever you want, just make sure you rename the class as well )

  2. Update the Package line ( the first line ) to include your ionic project package

  3. Place this file into your project source dir ( refer THIS image for the folder structure )

  4. Open up MainActivity.java ( should be in the same folder )

  5. Update your onCreate function to contain the AndroidBug5497Workaround.assistActivity(this); line.

  6. Your final onCreate function should look something like this:

    public class MainActivity extends CordovaActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Set by <content src="index.html" /> in config.xml loadUrl(launchUrl); AndroidBug5497Workaround.assistActivity(this); } }

I have tested it on 4.4 and it works there.

Hope that helps!

perfect, i will try, thank you

now, i can fixed it. Thank again.

@wtflux, @whitecat29 , I am facing the same problem
for me I don’t know how to make step2

Update the Package line ( the first line ) to include your ionic project package
I don’t know where to find my package name as well
I don’t know so much about android development and java

here my fix :smile:
Find yourpakage name in widget tag of config.xml

content of MainActivity.java

package com.yourpackage....;

import android.os.Bundle;
import org.apache.cordova.*;

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();
        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);
        AndroidBug5497Workaround.assistActivity(this);
    }
}

Content of AndroidBug54497Workaround.java:

package com.yourpackage....;
import android.os.Bundle;
import org.apache.cordova.*;
import android.app.Activity;
import android.graphics.Rect;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.FrameLayout;

public class AndroidBug5497Workaround {

    // For more information, see https://code.google.com/p/android/issues/detail?id=5497
    // To use this class, simply invoke assistActivity() on an Activity that already has its content view set.

    public static void assistActivity (Activity activity) {
        new AndroidBug5497Workaround(activity);
    }

    private View mChildOfContent;
    private int usableHeightPrevious;
    private FrameLayout.LayoutParams frameLayoutParams;

    private AndroidBug5497Workaround(Activity activity) {
        FrameLayout content = (FrameLayout) activity.findViewById(android.R.id.content);
        mChildOfContent = content.getChildAt(0);
        mChildOfContent.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            public void onGlobalLayout() {
                possiblyResizeChildOfContent();
            }
        });
        frameLayoutParams = (FrameLayout.LayoutParams) mChildOfContent.getLayoutParams();
    }

    private void possiblyResizeChildOfContent() {
        int usableHeightNow = computeUsableHeight();
        if (usableHeightNow != usableHeightPrevious) {
            int usableHeightSansKeyboard = mChildOfContent.getRootView().getHeight();
            int heightDifference = usableHeightSansKeyboard - usableHeightNow;
            if (heightDifference > (usableHeightSansKeyboard/4)) {
                // keyboard probably just became visible
                frameLayoutParams.height = usableHeightSansKeyboard - heightDifference;
            } else {
                // keyboard probably just became hidden
                frameLayoutParams.height = usableHeightSansKeyboard;
            }
            mChildOfContent.requestLayout();
            usableHeightPrevious = usableHeightNow;
        }
    }

    private int computeUsableHeight() {
        Rect r = new Rect();
        mChildOfContent.getWindowVisibleDisplayFrame(r);
        return (r.bottom - r.top);
    }

}

@whitecat29 @wtflux
unfortunately it didn’t work for me
I have a fixed textarea in the bottom
now the textarea become so low an still the keyboard overlapping the content
I was working on my app for 2 months I finished almost every thing can’t upload it to the store because these problem

This working nic3
preference name=“Fullscreen” value=“false” />

thanks

I had a similar problem where the keyboard would overlap the input window. My solution consists of the following:

  • The < preference name=“Fullscreen” value=“false” > in config.xml
  • Apply a min-height on the body (with a value of the phone display height)
  • Applying overflow-y: scroll to the html element

The result is that when I click an input element in the lower half of the screen, the soft keyboards pops up and at the same time the webview is scrolled so that the input element doesn’t loose focus.

I just add stateHidden and the keyboard stop firing at app launch. and this also fix the issue.

android:windowSoftInputMode=“adjustResize|stateHidden|stateVisible”

You tried java workaround with config and manifest changes ? or java workaround with default manifest and config ? because manifest and config change along with java didnt work for me !

help is appreciated !

Could you please show us your code about “Apply a min-height on the body (with a value of the phone display height)”.
Thanks in advanced