Phonegap - Android How to customize the layout in full screen when the keyboard is visible

Question

I am working on a phonegap application for the Samsung Galaxy 3 tab. When this application is in full screen mode, the soft keyboard hides the text input fields and it is not possible to view the page to view the contents. how can i fix the problem?

Answer 1

After spending a day trying to find almost all the possible solutions on this website, nothing worked for me. In the end, I managed to find a job based on the following two proposed solutions:

fooobar.com/questions/16389 / ...

This link shows a workaround to solve the problem for the Android application; however, I have no experience in android, so the question is: how to include this world of code in the Phonepap project?

fooobar.com/questions/953079 / ...

This link offers a specific phone call solution that does not work for me, but more importantly give an idea of ​​how I can add Android user code to the phone game project.

Decision

1- Create the following class (as indicated in the first link) in the phonegap project:

package com.test.android; 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); } } 

This class can be placed in this place in your project: (I could not upload the image on this forum, I need to rent 10 reputation). Find a sample image in this URL:

2- Each time you create a phonegap project, you get a class called your_project_name.java. In my case, it is test1.java. Edit the class and add the following sentence to the onCreate method:

     AndroidBug5497Workaround.assistActivity (this);

 

Your code should look like this:

     public class test1 extends DroidGap
     {
         @Override
         public void onCreate (Bundle savedInstanceState)
         {
             super.onCreate (savedInstanceState);
             // Set by in config.xml
             super.loadUrl (Config.getStartUrl ());
             //super.loadUrl("file:///android_asset/www/index.html ")
             AndroidBug5497Workaround.assistActivity (this);
         }
     }
     

3- This fixed the problem in my application.

Answer 2

I followed Jorge's answer and it did a great job for me !. but the screen is very resizable, and I wanted it to become smoother. So I looked at how to revive this look and came across.

The combination of these two elements is as follows:

 import android.animation.ValueAnimator; import android.app.Activity; import android.graphics.Rect; import android.view.View; import android.view.ViewTreeObserver; import android.view.animation.DecelerateInterpolator; import android.widget.FrameLayout; public class AdjustInputHeight { // 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 AdjustInputHeight(activity); } private View mChildOfContent; private int usableHeightPrevious; private ValueAnimator animateCollapseView = null; private ValueAnimator animateExpandView = null; private boolean keyboardIsUp = false; DecelerateInterpolator sDecelerator = new DecelerateInterpolator(); private FrameLayout.LayoutParams frameLayoutParams; private AdjustInputHeight(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; //check if the view got smaller (because keyboard is shown) and is not already up. if (heightDifference > (usableHeightSansKeyboard/4) && (!this.keyboardIsUp)) { // we need to create the collapse animator the only the first time we rise the keyboard if (this.animateCollapseView == null) { this.animateCollapseView = ValueAnimator.ofInt(usableHeightSansKeyboard, (usableHeightSansKeyboard-heightDifference)); this.animateCollapseView.setDuration(500); this.animateCollapseView.setInterpolator(sDecelerator); this.animateCollapseView.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { public void onAnimationUpdate(ValueAnimator animation) { Integer value = (Integer) animation.getAnimatedValue(); frameLayoutParams.height = value.intValue(); mChildOfContent.requestLayout(); } }); } this.animateCollapseView.start(); // keyboard probably just became visible this.keyboardIsUp = true; //lower the keyboard only if it is up. } else if (this.keyboardIsUp) { // we need to create the expand animator the only the first time we lower the keyboard if (this.animateExpandView == null) { this.animateExpandView = ValueAnimator.ofInt((usableHeightSansKeyboard-heightDifference), usableHeightSansKeyboard); this.animateExpandView.setDuration(200); this.animateExpandView.setInterpolator(sDecelerator); this.animateExpandView.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { public void onAnimationUpdate(ValueAnimator animation) { Integer value = (Integer) animation.getAnimatedValue(); frameLayoutParams.height = value.intValue(); mChildOfContent.requestLayout(); } }); } this.animateExpandView.start(); // keyboard probably just became hidden this.keyboardIsUp = false; } usableHeightPrevious = usableHeightNow; } } private int computeUsableHeight() { Rect r = new Rect(); mChildOfContent.getWindowVisibleDisplayFrame(r); return (r.bottom - r.top); } 

}

Of course, you can change the duration of the animation and the interpolator for your needs.