Android keyboard overlapping application

Hi there!

The keyboard is hiding my input on android. I don’t know what to do.

Any ideas? iPhone works fine.

When I simulate a android device on chrome, I have the correct behaviour . The screen moves when I focus a input but that does not happen on the emulator.

Can you provide a bit more? A screen capture, a codepen? It’s kind of hard to know what the issue is with these. Do you have the ionic keyboard plugin installed?

Sorry!

Yes, the plugin is installed.

<feature name="Keyboard">
    <param name="ios-package" value="IonicKeyboard" onload="true" />
    <param name="android-package" value="IonicKeyboard" onload="true" />
</feature>

This is the config.xml from the projects root.

<ion-view title="Login">

<ion-nav-buttons side="left">
</ion-nav-buttons>

<div class="bar bar-subheader bar-assertive" ng-if="errors === true">
    <h1 class="title">Usuário ou senha inválidos.</h1>
</div>

<ion-content class="has-header">
<ion-scroll id="fundoRio" resize="">
    <div class="row">
        <div class="col col-50 col-offset-25 text-center">
            <img src="img/LoginLogo.png" alt="" class="imgLogo">
        </div>
    </div>
    <div class="row">
        <div class="col col-80 col-offset-10">
            <p class="loginCaption">A cidade maravilhosa conta com um novo aliado para se proteger: <span class='txtOlive'>você</span>.</p>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="hrefRegister"><a href="#/app/register">Primeira vez? Clique aqui</a></div>
            <form ng-submit='login(user)'>
                <div class="list list-inset">
                    <label class='item item-input'>
                        <input type="text" pattern="[a-z]{5,25}" class="loginInput" placeholder="USUÁRIO" ng-model='user.username'>
                    </label>
                    <label class="item item-input">
                        <input type="password" class="pwInput" placeholder="SENHA" ng-model='user.password'>
                    </label>
                </div>
                <div class="row">
                    <button id="login-btn" type="submit" class="submitInput button button-balanced col">
                        <i ng-if="sendingForm" class="ion-loading-c"></i>
                        <span ng-if="!sendingForm" id="login-txt">FAZER LOGIN</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</ion-scroll>
</ion-content>

This is the view file.

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" android:windowSoftInputMode="adjustPan" package="com.synk.corneta" xmlns:android="http://schemas.android.com/apk/res/android">
<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
<uses-permission android:name="android.permission.INTERNET" />
<application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name">
    <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:name="CornetaRIO" android:theme="@android:style/Theme.Black.NoTitleBar">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>
<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
</manifest>

ManifestFile


Images of what happens

Try separating the cofig.xml into two statements.

<feature name="Keyboard">
        <param name="android-package" value="com.ionic.keyboard.IonicKeyboard" />
        <param name="onload" value="true" />
      </feature>

 <feature name="Keyboard">
         <param name="ios-package" value="IonicKeyboard" onload="true" />
 </feature>

Also, can you try a sample project from out CLI. It comes with the keyboard plugin installed and set up properly. There may be some issues in your code, but without seeing your project I can’t be sure.

I wasn’t able to reproduce it with the sample projects.

I have a doubt… The config.xml from my projects root need to have those plugins defined?

I mean, the plugins/android.json seem to have those informations already.

I removed the plugins definition from config.xml (root) and everything worked fine. The keyboard problem persists.

I turned the android fullscreen off and now when I click on a input the screen goes up and then goes down immediately. I also have this on my AndroidManifest.xml

android:windowSoftInputMode="adjustResize"

This is on the activity’s node.

I don’t know if this is a problem with the emulator. I’ll try to find a device to test.

I’ve experienced this behaviour with a HTC running Android 2.3. However this didnt’ happen with any of my more modern devices…Very odd the behaviour where the keyboard displays and then hides itself.

Everything seems to be working fine now.

Did you do anything to fix this? or did the problem just disappear?

Everything was working fine on the device. The only changes I’ve made was the changes that I’ve posted above

That’s just weird. I took the same page that you have - exact html, put it on my device and it’s not working :frowning: The keyboard still overlaps the inputs…

Did you make the same changes on config.xml?

Are you running on an emulator or a device?

On emulator the problem persists but on device works fine.

It’s on a real device, nexus 5 running Android 4.4.4, here is the config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>y App</name>
    <description>
        An Ionic Framework and Cordova project.
    </description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">
      Ionic Framework Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="fullscreen" value="false" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="false" />
    <preference name="android-windowSoftInputMode" value="adjustResize"	/>

    <!-- Don't store local date in an iCloud backup. Turn this to "cloud" to enable storage 
         to be sent to iCloud. Note: enabling this could result in Apple rejecting your app.
    -->
    <preference name="BackupWebStorage" value="none" />

    <feature name="StatusBar">
      <param name="ios-package" value="CDVStatusBar" onload="true" />
    </feature>
</widget>

can you post your AndroidManifest.xml ?

Sure

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" android:windowSoftInputMode="adjustResize" package="com.ionicframework.starter" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:name="MyApp" android:theme="@android:style/Theme.Black.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:clearTaskOnLaunch="true" android:configChanges="orientation|keyboardHidden" android:exported="false" android:name="com.google.zxing.client.android.CaptureActivity" android:screenOrientation="landscape" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" android:windowSoftInputMode="stateAlwaysHidden">
            <intent-filter>
                <action android:name="com.phonegap.plugins.barcodescanner.SCAN" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
        <activity android:label="@string/share_name" android:name="com.google.zxing.client.android.encode.EncodeActivity">
            <intent-filter>
                <action android:name="com.phonegap.plugins.barcodescanner.ENCODE" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
        <activity android:label="@string/share_name" android:name="com.google.zxing.client.android.HelpActivity">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.FLASHLIGHT" />
    <uses-feature android:name="android.hardware.camera" android:required="false" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>

Any working solutions for this issue.the exact issue am also facing.

see this thread for a solution that works: