The keyboard height issue (revisited)

Solar2D Native builds
#1

Hi,

I know that it is impossible to get the height of the keyboard but it still kills me when building business apps with Corona.

My UI mate sent me the attached layout solution and I just had to say no. Not possible. I can not realise this with Corona. Not AFAICS. Can you?

I have to think hard on this for a couple of days I suppose. Hmm. A TextBox in a ScrollView with…

/Joakim

#2

You can put all display objects in a scroll view & scroll up/down at keypad active event.
 

#3

I am a little bit shady on what you mean. Add a user input event to the TextBox and as soon as the TextBox gets in focus I scroll the ScrollView to a vertical center position? I can not see how this could make it possible to implement the UI design I attached to my initial message. I may completely misunderstand what you mean though. :slight_smile:

Another way could be to redesign the UI to use a ScrollView for the complete scene and put the TextBox as its bottom part (under any attached images and action buttons). The bottom part of the TextBox would be hidden by the keyboard whenever the keyboard appears. The top part of the TextBox would be visible though. The user starts to write into the TextBox and when the text eventually goes behind/below the keyboard it’s up to the user to scroll. This would not require any user input event handlers but the UX would (may) be a bit strange. The UI design used for this would not look as my UI mate planned for but rather as seen in this link:

https://drive.google.com/open?id=0BwgAXmsq27k2aGJMekplWWpWMEk

Hmm

Any thoughts about that?

#4

Hi,

I solved this with a native Java plugin for Android which calculates the available vertical space above the keyboard. I will do something similar for iOS later (my immediate need is to conclude an Android prototype).

With this plugin I can achieve the exact layout I want above the keyboard.

A main.lua example:

display.setStatusBar(display.HiddenStatusBar) local \_W = display.contentWidth local dummyTextField = native.newTextField(-20, -20, 10, 10) native.setKeyboardFocus(dummyTextField) local function render()   dummyTextField:removeSelf()   local spaceAboveKeyboard = SpaceAboveKeyboard.calculate()   local textBox =     native.newTextBox(\_W / 2, spaceAboveKeyboard / 2, \_W, spaceAboveKeyboard)   textBox.isEditable = true   native.setKeyboardFocus(textBox) end timer.performWithDelay(1000, render)

I updated android/app/src/main/AndroidManifest.xml like this:

$ svn diff android/app/src/main/AndroidManifest.xml Index: android/app/src/main/AndroidManifest.xml =================================================================== --- android/app/src/main/AndroidManifest.xml&nbsp;&nbsp; &nbsp;(revision 598) +++ android/app/src/main/AndroidManifest.xml&nbsp;&nbsp; &nbsp;(working copy) @@ -41,6 +41,7 @@ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<action android:name="android.intent.action.MAIN" /\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<category android:name="android.intent.category.LAUNCHER" /\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \</intent-filter\> +&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \<meta-data android:name="coronaWindowMovesWhenKeyboardAppears" android:value="true"/\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \</activity\>

I updated android/app/src/main/java/com/mycompany/app/CoronaApplication.java like this:

$ svn diff android/app/src/main/java/com/mycompany/app/CoronaApplication.java Index: android/app/src/main/java/com/mycompany/app/CoronaApplication.java =================================================================== --- android/app/src/main/java/com/mycompany/app/CoronaApplication.java&nbsp;&nbsp; &nbsp;(revision 598) +++ android/app/src/main/java/com/mycompany/app/CoronaApplication.java&nbsp;&nbsp; &nbsp;(working copy) @@ -29,14 +29,20 @@ &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;@Override &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;public void onLoaded(com.ansca.corona.CoronaRuntime runtime) { +&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; com.naef.jnlua.NamedJavaFunction[] luaFunctions; +&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; com.naef.jnlua.LuaState luaState = runtime.getLuaState(); +&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; luaFunctions = new com.naef.jnlua.NamedJavaFunction[] { +&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; new SpaceAboveKeyboard() +&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }; +&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; luaState.register("SpaceAboveKeyboard", luaFunctions); +&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; luaState.pop(1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/\*\*

SpaceAboveKeyboard.java looks like this:

package com.mycompany.app; import android.app.Activity; import android.graphics.Rect; import android.view.View; public class SpaceAboveKeyboard implements com.naef.jnlua.NamedJavaFunction { &nbsp;&nbsp;&nbsp; public String getName() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return "calculate"; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; public int invoke(com.naef.jnlua.LuaState luaState) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; com.ansca.corona.CoronaActivity activity = &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; com.ansca.corona.CoronaEnvironment.getCoronaActivity(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (activity == null) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return 1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Rect r = new Rect(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; View rootview = activity.getWindow().getDecorView(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rootview.getWindowVisibleDisplayFrame(r); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; luaState.pushInteger(r.height()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return 1; &nbsp;&nbsp;&nbsp; } }

Cheers

/Joakim

#5

Hi @joagre,

Would you be able/willing to release and expose this plugin to the Corona Marketplace for other developers to take advantage of?

Best regards,

Brent

#6

That would be great.

#7

I will give it a shot.

#8

That would be cool. A plugin is very needed

#9

Working on it for more info

#10

Thank you!

#11

added to moreinfo plugin

https://scotth.tech/plugin-moreInfo

#12

Cool! Supports android and ios?

#13

Yep, I updated sample.

#14

I purchased the plugin! I will use it. Thank you so much!

#15

Last Updated Plugin Jun 06, 2017

When will the update?

#16

It should be updated

https://bitbucket.org/coronalabs/store-hosted-moreinfo/rss?token=fbbca9f0dc8180e91caefd39dac5f37f

That date is when I lasted updated the listing, not the product.

#17

attempt to call field ‘getKeyboardSize’ (a nil value)

Other plugin functions work

#18

Everything was refreshed. but!

type(moreInfo.getKeyboardSize())&nbsp;

 return type is number

From Documentation:

returns width(number) , height(number) 

How to get the Width and Height of the keyboard?

#19

Sorry for late response.

local keyboardWidth, keyboardHeight = moreInfo.getKeyboardSize()

should work, you need to test on android or ios device. I am updating sample to make an error not appear in the simulator.

#20

note sample and Lua stubs are fixes