CODEWITHSUNDEEP
androidangularjsionic-framework
StevieB
StevieB

Reputation: 6541

Android White Background when keyboard fades away

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

https://i.sstatic.net/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">

Upvotes: 25

Views: 7731

Answers (8)

Abhinav Aggarwal
Abhinav Aggarwal

Reputation: 31

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/[email protected]");
  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.

Upvotes: 0

Arjun Suresh
Arjun Suresh

Reputation: 1

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

Edit

android:windowSoftInputMode="adjustResize"

To

android:windowSoftInputMode="adjustNothing"

Upvotes: 0

Gurwinder Singh
Gurwinder Singh

Reputation: 94

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>

Upvotes: 1

Brantje
Brantje

Reputation: 100

Put:

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

In styles.xml source

Upvotes: 2

Jschools
Jschools

Reputation: 2768

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>

Upvotes: 2

beaver
beaver

Reputation: 17647

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.

Upvotes: 11

stackg91
stackg91

Reputation: 594

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

Upvotes: 0

Sagar Thakkar
Sagar Thakkar

Reputation: 137

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.

Upvotes: -1

Related Questions