Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

My input text is cut off halfway on some Android devices!! PLS HELP!
Started by Lava Level Feb 03 2013 03:22 AM

- - - - -
100 replies to this topic
[TOPIC CONTROLS]
Page 3 of 5 1 2 3 4 5
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#51

mpappas

[GLOBAL: userInfoPane.html]
mpappas
  • Contributor

  • 527 posts
  • Enterprise

It's working fine for me - on an old motorola atrix, a new nexus 7 and an LG Optimus. Font sizes on all 3 match each other (not literally, but proportionally to the app content), and match the size on my iOS devices.

 

You said you dropped the ios side because it already worked. There's two cases that might give unexpected font sizes if you don't do this technique on the iOS side -- the 3GS (non-retina device, 1/4 the res of the 4 or 5) and the iPad mini. I think you'd see giant text on one, and small text on the other if you use the older techniques (fontsize * display.contentScaleY).



[TOPIC: post.html]
#52

searchm

[GLOBAL: userInfoPane.html]
searchm
  • Contributor

  • 187 posts
  • Corona SDK

@Mpappas

 

Thanks for your quick reply! I understand.

 

I just have one question: what value do I have to set the height of the textfield when I'm using your code?

 

Is this it?

 

originalHeight / display.contentScaleY

because contentScaleY doesn't seem to do the right job. What's the code you create your newTextField with?

 

I'm asking this because when I use your code it seems to scale the font-size properly but the text still get's chopped of at the top



[TOPIC: post.html]
#53

mpappas

[GLOBAL: userInfoPane.html]
mpappas
  • Contributor

  • 527 posts
  • Enterprise

My code that creates the editfield is pretty customized... My app uses white roundedRects on screen for the input field areas, and my native field creation code (my editing code) is passed in a the onscreen rectangle object -- which it then uses as the background area for the native text editing. (it creates / positions a native field for editing on top of the passed in rectangle object).

 

The native field itself is set to no background when it is created (so my white rounded rect is the only thing behind the native text - the field itself has no bg, just text).

 

The actual creation of the native field won't tell you much (the tempx,y etc is data grabbed from my onscreen rounded rect input area).

 

        editTextField = native.newTextField( tempX, tempY, tempW, tempH, keyboardHandlerEditText)
        editTextField.font = native.newFont( native.systemFont, inputFontSize )
        editTextField.inputType = keyboardType   -- passed in
        editTextField.align = 'left';
        editTextField.text = editText
        editTextField.isEditable = true
        editTextField:setTextColor( 0,0,0 )        
        editTextField.hasBackground = false
        editTextField.isSecure = isSecure      -- passed in
        print("  editTextField created -- textSize ==", tempSize)

 

One note I discovered regarding android text -- corona(?) or something screws up positioning of native android text if the height variable you pass in to the newTextField call (param 4) is not pretty oversized. It doesn't matter in my case, as the background for the native text is disabled (so it's invisible).

 

What I noticed is that if the height is set at like 30 pixels or something, and your font size is anywhere close to that, the font starts creeping up vertically out of its correct position -- and is not positioned well.  I added a little code to double the height of the editfield bg for android, and it seems to position fine vertically

 

        if( utils.isAndroid == true ) then  -- Special issue with android
                                                           -- Corona / opengl is causing the height to be used weird / incorrectly...
            tempH = tray.height * 2       
            tempY = (tray.y - tempH/2)      -- a little extra height is required for android for some reason (corona? opengl?)
        else



[TOPIC: post.html]
#54

searchm

[GLOBAL: userInfoPane.html]
searchm
  • Contributor

  • 187 posts
  • Corona SDK

wow!

I tried it on a real Samsung Galaxy I device and it works.

Also tried it on 3 different devices on the emulator and it works flawlessly, even with a small 240x320 resolution.

 

doubling the size of the initual height does the trick.

I have the background hidden and an underlying image too, so that's just great.

 

you've done some great work here. much appreciated!

 

bravo!



[TOPIC: post.html]
#55

RealHandy

[GLOBAL: userInfoPane.html]
RealHandy
  • Enthusiast

  • 82 posts
  • Enterprise

Hmm. When I used mpappas with a virtual size of 768x1024 (tablet-only app) and 7.75 inches high for virtual device height (iPad), I got crazy-small font size of 10 for the Kindle Fire:

missingInches = (-143 * 2) / 132 =  2.16

(132 is virtual pixel dpi, which should really be DEVICE pixel dpi, I think, but at 170 device dpi, this is still too big a value for missingInches -- 1.68 inches)

fontScale = (6 - 1.68) / 7.75 = .557

18 (font size) * .557 = 10 for the Kindle font size when given 18 as iPad font size. Super small.

But 14 is the right size when doing testing. Leaving out missingInches entirely gives 13.9 (18 * (6/7.75)), which looks just right.

 

This topic is immensely frustrating (as in, I don't get why Corona can't make this a non-issue for non-weird Android devices).

 

Anybody else working with tablet-size apps, and/or just realizes why I need to not use missingInches to get the right font sizes?

 

And why is screenOriginY -143 for Kindle for a 768x1024 letterbox? Kindle is 600x1024. 768/600 = 1.28, which is contentScaleY. Well, 1024/1.28 = 800, so shouldn't screenOriginY be -112 (since 800 is 224 less than 1024, and 112 is half of 224)?



[TOPIC: post.html]
#56

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,779 posts
  • Enterprise

If you look at the two Sample apps for text input, you will see that we add 10px to the height of the native.newTextField() entries on Android.  This is because Android has extra chrome that has to be compensated for.  After some tests, it's not relative to the display size or the font size, but a fixed 10 pixels.  Simply make your textField's 10px bigger if you're on Android.

 

Rob



[TOPIC: post.html]
#57

RealHandy

[GLOBAL: userInfoPane.html]
RealHandy
  • Enthusiast

  • 82 posts
  • Enterprise

Rob,

 

Thanks for the quick reply. I was whining about the font size issue, though, not the "need to make the text field height larger" issue. I've already dealt with the ride-up/lop-off with my own field height adjustment. My concern was with the inability to get to the right font size in a newTextField on Android, even with the mpappas stuff.

 

I'm using mpappas but without the missingInches part -- that makes my Android text field sizes way too small.



[TOPIC: post.html]
#58

mpappas

[GLOBAL: userInfoPane.html]
mpappas
  • Contributor

  • 527 posts
  • Enterprise

HI RH,

 

I too was pretty frustrated with the SDK's ability to deal with native cross platform text input (which is why I developed the code above, based on an idea of ksan).

 

It works for me on all iOS devices and (straight up) Android devices I've tested on. BUT, I've never tried it on any amazon product.

 

Regarding the missingInches variable, I developed that portion last, to deal with the "soft keys" they are putting on the screen on newer androids (they used to be hardware buttons under the display). So for those devices, although the screen is 7.5 inches say, a half an inch would be taken up by the soft keys, so the effective inches for the device would be less... That was the idea...

 

In the case of Amazon devices, although I would hope they didn't, they could be dealing with soft keys / display size differently (they are soft keys, right?)

 

In any case... I feel you pain... Cross platform text input should be, well, cross platform...



[TOPIC: post.html]
#59

Lerg

[GLOBAL: userInfoPane.html]
Lerg
  • Contributor

  • 535 posts
  • Corona Staff

Ok, my research shows that on android we must take DPI into account. Something like

 

fontSize = fontSize * 120 / system.getInfo('androidDisplayYDpi')

 

Adjust 120 value for best result. Maybe 96.



[TOPIC: post.html]
#60

mkelly

[GLOBAL: userInfoPane.html]
mkelly
  • Contributor

  • 124 posts
  • Corona SDK

Rob Miracle's formula worked out fine for me for all of the Android phones I was able to test on.: 

 

local inputFontSize = 22/display.contentScaleY
local tHeight = 80
 
myData.username = native.newTextField( myData._W*.11875, 300, 216, tHeight )
myData.username.font = native.newFont( native.systemFontBold, inputFontSize )
myData.username.size = inputFontSize


[TOPIC: post.html]
#61

joe528

[GLOBAL: userInfoPane.html]
joe528
  • Contributor

  • 800 posts
  • Corona SDK

It's still totally cut off by using the code you suggest (getAndroidFontSize).

 

The upper half is always cut off. I don't understand why increasing the height for the input bar or find a good font size can solve this problem?

 

I make the input box large enough but the texts are placed in the upper half. If I increase more height or decrease the font size, it will only make it odder and odder.

 

Before I give it up, anyone can sum up the finalized solution? Maybe I miss something.



[TOPIC: post.html]
#62

joe528

[GLOBAL: userInfoPane.html]
joe528
  • Contributor

  • 800 posts
  • Corona SDK

I can't use input text if this problem is not solved.

 

What's the ultimate solution for this?

 

Does it exist?



[TOPIC: post.html]
#63

bjsorrentino

[GLOBAL: userInfoPane.html]
bjsorrentino
  • Veteran

  • 8,506 posts
  • Corona SDK

Hi @joe528,

Did you test our sample app for text entry? This uses a fairly simple conditional statement to adjust for Android.

 

CoronaSDK > SampleCode > Interface > NativeKeyboard

 

Thanks,

Brent



[TOPIC: post.html]
#64

toga

[GLOBAL: userInfoPane.html]
toga
  • Contributor

  • 103 posts
  • Corona SDK

Hi,

i am also not able to get it working. I only need a simple highscore text input field which works on all devices. I use the following config file:

application = {
   content = {
      width = 800,
      height = 1200,
      scale = "letterBox",
      fps = 60,

      imageSuffix = {
         ["@2x"] = 1.3,
      },
   },   
}

with the "standard" (320x480) config file the solutions and also the CoronaSDK > SampleCode > Interface > NativeKeyboard are working. But not with my 800x1200 config.

Any help is very appreciated. Thanks.

 

Thomas



[TOPIC: post.html]
#65

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,779 posts
  • Enterprise

Can you give us a better description or screen shots or something more than "it's not working".

 

Rob



[TOPIC: post.html]
#66

toga

[GLOBAL: userInfoPane.html]
toga
  • Contributor

  • 103 posts
  • Corona SDK

Hi Rob,

i tried it with your example on the second page but with my config file (800x1200). Here is the code:

local fontSize = 22 / display.contentScaleY

print(fontSize)
print(display.contentScaleY)

    local yearIF = native.newTextField( (display.contentWidth / 2), 180, (display.contentWidth*0.45), fontSize*3)
    yearIF.font = native.newFont( native.systemFont, _G.fontSize )
    yearIF.size = fontSize
    yearIF.text = ""
    yearIF:setTextColor( 81/255, 81/255, 81/255 )
    yearIF.inputType = "number"

I only changed the font size from 12 to 22 and set the height of the text field to 3*fontSize.

The result on a Nexus 4 is that the text is cut off halfway. Is there any formula how big the height of the text field must be compared to the font size? 3*fontSize seems not enough.

 

P.S.

If i take your original values:

local fontSize = 12 / display.contentScaleY

and height of text = 35 i do not see any chars in the text field with my config file.



[TOPIC: post.html]
#67

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,779 posts
  • Enterprise

Android has more "chrome" around their text fields that have to be accounted for.  If you look at the native.textField sample apps you will see for Android we add some extra height.  It's not predictable as to how much you need because all android devices are different.

 

Rob



[TOPIC: post.html]
#68

toga

[GLOBAL: userInfoPane.html]
toga
  • Contributor

  • 103 posts
  • Corona SDK

So if the text height is not predictable native.newTextField is useless. It is very frustrating. I only need a highscore name input field. What is your implementation in your apps? 



[TOPIC: post.html]
#69

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,779 posts
  • Enterprise

If you're on Android, make the field height higher, perhaps 50% + 10-12 pixels.  So if your iOS field is 30 pixels high, then on Android make it 55 pixels.

 

Rob



[TOPIC: post.html]
#70

toga

[GLOBAL: userInfoPane.html]
toga
  • Contributor

  • 103 posts
  • Corona SDK

Hi Rob,

that would be great if it would be so easy. But if you have a look at my example my height was three times bigger ( fontSize*3) than the font size and that was not enough on my device. At the moment i believe the native objects do only work with 320x480.

 

Is there any save calculation for the dependency between font size and text field height (config is 800x1200)? ny Little example would be helpful.

 

Thanks

Thomas



[TOPIC: post.html]
#71

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,779 posts
  • Enterprise

What is the value _G.fontSize?

Is there a reason you have a global version of this and a local version?

 

What is the value of display.contentScaleY and your fontSize calculation?



[TOPIC: post.html]
#72

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,779 posts
  • Enterprise

I built this code:

local fontSize = 22 / display.contentScaleY
_G.fontSize = fontSize

print(fontSize)
print(display.contentScaleY)

    local yearIF = native.newTextField( (display.contentWidth / 2), 180, (display.contentWidth*0.45), fontSize*3)
    yearIF.font = native.newFont( native.systemFont, _G.fontSize )
    yearIF.size = fontSize
    yearIF.text = ""
    yearIF:setTextColor( 81/255, 81/255, 81/255 )
    yearIF.inputType = "number"

 

For my Nexus 7 running 4.4 and the text fits the box perfectly.  I used an 800x1200 content area.

 

Rob



[TOPIC: post.html]
#73

toga

[GLOBAL: userInfoPane.html]
toga
  • Contributor

  • 103 posts
  • Corona SDK

Hi Rob,

very frustrating. On my Nexus 4 running 5.0 (same with 4.4) the text is cut off half way.

 

The calculated fontSize = 21.12 and display.contentScaleY = 1.04

 

So every device is different? Or the content scaling has some influence? We have different behaviours on different device resolutions.



[TOPIC: post.html]
#74

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,779 posts
  • Enterprise

Can you post a screen shot from the device? 

 

Also what is the value of that global variable version of fontSize?

 

Rob



[TOPIC: post.html]
#75

jack95

[GLOBAL: userInfoPane.html]
jack95
  • Contributor

  • 190 posts
  • Corona SDK

It's been a year and a half since I joined this thread. It's really disappointing when people join it, acknowledging that this is still such a problem. I still don't have every device covered in my app (I gave up). At least have some kind of official triggered shim input where you don't even render the real input box, since at least that would be something Corona-controlled without these gymnastics.




[topic_controls]
Page 3 of 5 1 2 3 4 5
 
[/topic_controls]