Android White Background when keyboard fades away

Question

Video of the problem from a different user but its the same

https://i.stack.imgur.com/2Jzov.jpg

I have a background image set as follows :

  .pane {
  background-image:  url("../img/inner-banner-bg.jpg");
  background-repeat: repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

And in my config.xml

<preference name="Fullscreen" value="false"/>

Now the problem I am having is when the keyboard fades away after I hit done / search, it leaves a white background for like 0.5 during the transition for the space the keyboard covered and it looks a bit bad.

When the keyboard closes it unshrinks but leaves white gap. How can I get the keyboard to not shrink the view behind the backdrop ?

When I set

<preference name="Fullscreen" value="true"/>

It doesn't happen. I am also using the Ionic Plugin Keyboard.

Anyway I can make the transition of the keyboard fading not display the white background ?

Edit : Here's my android settings

<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

And my config Settings

  <access launch-external="yes" origin="geo:*"/>
  <allow-intent href="geo:*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="4000"/>
  <preference name="FadeSplashScreen" value="false"/>
  <preference name="ShowSplashScreenSpinner" value="true"/>
  <preference name="KeyboardShrinksView" value="false"/>

And in the Package.json

  "dependencies": {
    "gulp": "^3.5.6",
    "gulp-sass": "^2.0.4",
    "gulp-concat": "^2.2.0",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.2.0"
  },
  "devDependencies": {
    "bower": "^1.3.3",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "cordova-plugin-geolocation",
    "cordova-plugin-network-information",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "android",
    "ios"
  ]

In my web view I use ion-view and ion-content

<ion-view>
    <ion-content class="has-header has-tabs">

A potential workaround for the white background not disappearing is adding the following code where you want the keyboard to close, for example in an event handler for enter keystroke or submit form event. You also need to add `$ionicScrollDelegate` as a dependency. `if (cordova) { cordova.plugins.Keyboard.close(); } $ionicScrollDelegate.getScrollView().resetScrollView()` — Krsna Kishore, Feb 08 '16 at 13:49
No joy, still get the jump in the page with white background — StevieB, Feb 08 '16 at 17:12
in Native android code, there is one flag "windowSoftInputMode=adjustPan" this can help if it's a android app. So if you can dig and look into source for what Android does with this flag you can convert that logic into yours. — MKJParekh, Feb 12 '16 at 06:11
I have tried going from 'adjustResize' to adjustPan and this does fix the problem however you lose the fact the content doesnt resize nicely to view the inputs etc, so this problem is related to adjustResize imo — StevieB, Feb 22 '16 at 09:41
Could you share a screenshot of the problem and the layout file where it occurs? — Nick Cardoso, Feb 23 '16 at 16:10
I found this online from a guy with same problem http://imgur.com/ca2cNZv — StevieB, Feb 25 '16 at 10:39
To which `html` elements do you append your css classes? I have a quite similar set up with background image and fullscreen = false, but i cannot reproduce your problem... — Beat, Feb 25 '16 at 13:21
which css classes do you mean, the background css ? Right now it's .pane — StevieB, Feb 25 '16 at 15:42
I just wanted to know wo which html element your `.pane` class is appendend. But I assume that you are using an `ion-pane` directive. Do you have any footer in your view? — Beat, Feb 26 '16 at 08:54
Are you able to resolve the issue or still facing the error? — Mustansar Saeed, Feb 26 '16 at 13:47
@StevieB what about `android:windowSoftInputMode="stateAlwaysHidden|adjustPan"` — IntelliJ Amiya, Feb 29 '16 at 05:45

score 11 · Accepted Answer · answered Feb 25 '16 at 12:58

11

In AndroidManifest.xml file try to set windowSoftInputMode attribute to adjustNothing:

android:windowSoftInputMode="adjustNothing"

It worked for my Ionic project, avoiding the resize of Cordova webview when soft keyboard is on.

answered Feb 25 '16 at 12:58

beaver

17,333
2
40
66

1

Ok this does indeed fix the problem and the closest to a solution yet, the only down point being without the resize it's hard sometimes to see the input box but I guess thats the restriction of this choice – StevieB Feb 25 '16 at 15:40
2

Damn it's soo nice to not the see the white background and the flicker but the fact there is no resize it means i can't see the buttons on my pop-ups sometimes so not a great user experience. – StevieB Feb 25 '16 at 15:56
Unfortunately I think the white bkgrd on keyboard close is a Cordova webview issue which is too slow in resizing – beaver Feb 26 '16 at 07:58
I tried also with Crosswalk webview but with no appreciable improvement. – beaver Feb 27 '16 at 10:59
1

This makes the keyboard block some content and cannot be scolled to – Chisko May 26 '16 at 05:48

score 1 · Answer 2 · answered Feb 25 '16 at 17:40

1

That is your windowBackground peeking through. You are probably drawing over the white background of your Theme with that teal background. Modify your theme to include a better background color and remove the background from your layout if possible to improve drawing performance.

<style name="MyAppTheme" parent="Theme.DeviceDefault.NoActionBar">
  ...
  <item name="android:windowBackground">#ff000000</item>
  ...
</style>

answered Feb 25 '16 at 17:40

Jschools

2,698
1
17
18

Where abouts in Ionic does this go ? – StevieB Feb 26 '16 at 12:36
I've never seen any styles.xml in a Cordova (or Ionic) project. I have a styles.xml in a Xwalk Plugin for Cordova but it's another thing... – beaver Feb 26 '16 at 17:42

score 1 · Answer 3 · edited May 23 '17 at 10:29

1

Put:

<style name="AppTheme" parent="AppBaseTheme">
     <item name="android:windowBackground">@drawable/gradient</item>
</style>

In styles.xml source

edited May 23 '17 at 10:29

Community

1
1

answered Feb 25 '16 at 21:11

Brantje

90
9

I don't see styles xml anywhere in ionic project – StevieB Feb 26 '16 at 12:38

score 1 · Answer 4 · answered Feb 27 '16 at 08:01

1

Its happen because window re size itself to make room for the soft input area

use android:windowSoftInputMode="adjustNothing" in AndroidManifest.xml

<activity android:windowSoftInputMode="adjustNothing"
..
...
</activity>

answered Feb 27 '16 at 08:01

Gurwinder Singh

94
1
5

wow, its working like a charm, thx – MidWinterNight Nov 06 '21 at 13:44

score 0 · Answer 5 · answered Feb 10 '16 at 13:30

0

Hey there is a simple workaround for this

you need to add overflow-scroll="false" to your ion-content this should fix it

<ion-content class="padding has-header has-footer" overflow-scroll="false">

related topic Ionicforum

answered Feb 10 '16 at 13:30

stackg91

584
7
25

Tried still happening, after the keyboard fades away which takes around 0.5 second theres a white background which takes up the space of they keyboard and then fades away. – StevieB Feb 10 '16 at 13:45
Mh this is weird did you have a look at the forum post? some people said that using ion-scroll instead of ion-content worked for them the overflow-scroll worked for me since i had the same problem – stackg91 Feb 10 '16 at 13:50
Yup tried the ion-scroll aswell but didnt make a difference. Each time the keyboard closes I got that white background flicker. – StevieB Feb 10 '16 at 13:52
are you using the default webview or crosswalk for your project, and what android version are you running? – stackg91 Feb 10 '16 at 13:53
Never heard of cross walk, is that somepart of Ionic ? – StevieB Feb 10 '16 at 13:54
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/103108/discussion-between-stackg91-and-stevieb). – stackg91 Feb 10 '16 at 13:54
Hey SevieB, Ionic fixed this bug, I just installed the 1.2.4 version of Ionic and there seems to be no white background anymore I could even remove my workaround everywhere and it is still working fine – stackg91 Feb 12 '16 at 09:03

score 0 · Answer 6 · answered Mar 02 '20 at 06:10

0

Open your platform -> app ->src ->AndroidManifest.xml

Edit

android:windowSoftInputMode="adjustResize"

To

android:windowSoftInputMode="adjustNothing"

answered Mar 02 '20 at 06:10

Arjun Suresh

1

score 0 · Answer 7 · answered Apr 14 '21 at 08:01

Doing this solved it for me:

I was trying to apply background to the login page of my app with selector 'app-login'.

I added a div inside the page and set its background to the image I wanted. But whenever I opened the keyboard, I had some part of the screen turned white just above the keyboard and white space left after the keyboard was closed.

Adding height: 100% or height: 100vh did not solve the issue. It solved on some devices but not in others.

DO THIS: Instead of adding background to ion-content or div just go into your global CSS file and add:

app-login{
  background-image: url("./assets/bg@2x.png");
  background-repeat: no-repeat;
  background-size: cover;
}

Change the CSS selector to the selector of your page and change the url to your own image accordingly.

score -1 · Answer 8 · answered Feb 09 '16 at 09:48

Add the following code in your 'App.js'. add

$window.addEventListener('native.keyboardhide', function (event) {
    $rootScope.$broadcast('native.keyboardhide', event);
});

when app.run() method call with $window and $rootScope dependency. also, add

    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
    }

in $ionicPlatform.ready().

please ensure that your code is updated by inspecting your app. If it's not updated then try to remove and add platform and rebuild your app.

This causes the keyboard to obscure the bottom area, elements are not visible underneath and cannot be scrolled to — Chisko, May 26 '16 at 16:54

Android White Background when keyboard fades away

8 Answers8

Linked