Textbox hidden below keyboard in Android webview

AndroidTextboxKeyboardWebviewHidden

Android Problem Overview


I have created a simple iPhone/Android app, containing a normal webview. This webview calls my website.

On my website there are several forms with input type=text or textarea. I have a problem with those when they are at the bottom of the page!

  1. In my iPhone app, the keyboard will automatically appear and push the textbox to the visible area of the phone screen. So there is nothing to do.

  2. But in my Android app the textbox will stay at the same place and is eventually hidden by my keyboard. So the only option users have is to type "blind".

How can I fix this? Did anyone else meet this problem?

Android Solutions


Solution 1 - Android

This is how I solved the problem. As Venky said, you have to add

android:windowSoftInputMode="adjustResize"

to your tag in the AndroidManifest.xml file. But in our case, it wasn't enough. Make sure you do this as well with your views, webviews etc. Then we finally made it work.

Solution 2 - Android

I was getting crazy nothing works android:windowSoftInputMode="adjustResize" may help but be sure to have your app not in full screen.

Removing full screen for my app solved the problem with the layout resize with softkeyboard.

<item name="android:windowFullscreen">false</item>

Solution 3 - Android

For activities in full screen mode, android:windowSoftInputMode="adjustResize" will not work.

https://developer.android.com/reference/android/view/WindowManager.LayoutParams.html#FLAG_FULLSCREEN > A fullscreen window will ignore a value of SOFT_INPUT_ADJUST_RESIZE for the window's softInputMode field; the window will stay fullscreen and will not resize.

I use the following method in the activity to resize the layout by setting a bottom padding:


	public void adjustResizeOnGlobalLayout(@IdRes final int viewGroupId, final WebView webView) {
		final View decorView = getWindow().getDecorView();
		final ViewGroup viewGroup = (ViewGroup) findViewById(viewGroupId);

		decorView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
			public void onGlobalLayout() {
				DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
				Rect rect = new Rect();
				decorView.getWindowVisibleDisplayFrame(rect);
				int paddingBottom = displayMetrics.heightPixels - rect.bottom;

				if (viewGroup.getPaddingBottom() != paddingBottom) {
					// showing/hiding the soft keyboard
					viewGroup.setPadding(viewGroup.getPaddingLeft(), viewGroup.getPaddingTop(), viewGroup.getPaddingRight(), paddingBottom);
				} else {
					// soft keyboard shown/hidden and padding changed
					if (paddingBottom != 0) {
						// soft keyboard shown, scroll active element into view in case it is blocked by the soft keyboard
						webView.evaluateJavascript("if (document.activeElement) { document.activeElement.scrollIntoView({behavior: \"smooth\", block: \"center\", inline: \"nearest\"}); }", null);
					}
				}
			}
		});
	}

Solution 4 - Android

This would work:

getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);

Solution 5 - Android

Few things I learnt while solving this issue ---

  1. Theme style should not contain Fullscreen True
  2. Add android:windowSoftInputMode="adjustResize"
  3. Remove android:scrollbars="none" is any.. . Cheers!

Solution 6 - Android

Beware that apart from the suggest answers

android:windowSoftInputMode="adjustResize"

Is not working when you are in immersive mode

Solution 7 - Android

In my case the succes achieved by:

  1. Adding below to manifest, webview and fragment:

    android:windowSoftInputMode="adjustResize"
    
  2. Using NON FullScreen Theme such as below:

    <style name="AppTheme" parent="android:Theme.Black.NoTitleBar">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowFullscreen">false</item>
    </style>
    
  3. NOT using ScrollView over WebView.

Solution 8 - Android

Yeah, had the same problem working with Webview, mine was with input filed on modal. Textfield didn't "focus" above the keyboard. The solution was to delay the function call. Hope someone finds this usefull.

   $("body").on("click", ".jstree-search-input", function () {	
	
	setTimeout(function(){ 
		androidScroll(); 
	}, 500);
	});

As you can see it's used for jstree input...

   function androidScroll() {
	// Webview focus call (pushes the modal over keyboard)
		$('.control-sidebar-open ').scrollTop($('.control-sidebar-open ')[0].scrollHeight);

}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionandreasView Question on Stackoverflow
Solution 1 - AndroidandreasView Answer on Stackoverflow
Solution 2 - AndroidSandroView Answer on Stackoverflow
Solution 3 - AndroidSiuFayView Answer on Stackoverflow
Solution 4 - AndroidTsasaaView Answer on Stackoverflow
Solution 5 - AndroidsurajitkView Answer on Stackoverflow
Solution 6 - Androidunlimited101View Answer on Stackoverflow
Solution 7 - AndroidPawelView Answer on Stackoverflow
Solution 8 - AndroidDenis SolakovicView Answer on Stackoverflow