My input text is cut off halfway on some Android devices!! PLS HELP!

Solar2D General Questions/Discussion
#1

Yikes!! One of my testers says they see this on their galaxy II. I dont have an Android device other than this Kindle-Fire and the text size on the input box looks just fine.

http://www.questlord.com/screenshots/TextBug.png

1.How do I fix this.
2.Is there a comprehensive fix for this? To make sure it just sets the font size TO THE SIZE OF THE INPUT BOX?

This is holding up my release for Android devices other than the Nook/Kindle Fire. I would like to release on Google Marketplace, but not with this sort of thing happening.

I’ve spent 14 months on this project so help a guy out!

[import]uid: 100299 topic_id: 35589 reply_id: 335589[/import]

#2

native.newTextFields fonts don’t scale like graphics and display.newText do.

How to solve this depends on your config.lua and the screen resolution of the problem device. Post your config.lua and lets see if we can figure out the math needed to calculate your right font size.

[import]uid: 199310 topic_id: 35589 reply_id: 141442[/import]

#3

I dont understand why this isn’t easier. I think Corona needs to make this part fit in line with their ‘code less play more’ slogan.

But anyway…

– config.lua

application =  
{  
 content =  
 {  
 antialias = false,  
 width = 320,  
 height = 480,  
 scale = "zoomStretch"  
  
 },  
}

[import]uid: 100299 topic_id: 35589 reply_id: 141456[/import]

#4

This is what I am doing with my TextBoxes…

It is modified from the sample on Corona. Which…sigh… looks out of date…

 ------------------------------------------  
 -- \*\*\* Create native input textfields \*\*\*  
 -------------------------------------------  
 -- Note: currently this feature works in device builds or Xcode simulator builds only  
  
 -- Note: currently this feature works in device builds only  
 local isAndroid = "Android" == system.getInfo("platformName")  
 local inputFontSize = 18  
 local inputFontHeight = 30  
 if isAndroid then  
 -- Android text fields have more chrome. It's either make them bigger, or make the font smaller.  
 -- We'll do both  
 inputFontSize = 14  
 inputFontHeight = 42  
 end  
 myText = display.newText( "GJYyp@^", 20, 40,0,0, "QuadratSerial", 36)  
 myText:setTextColor( 255,0,0 )  
 defaultField = native.newTextField( 10, 120, 300, 30, fieldHandler )  
 -- o:addEventListener( 'userInput', listener )   
 -- WARNING: The 'listener' argument to native.newTextField( left, top, width, height [, listener] ) is deprecated. Call the object method o:addEventListener( 'userInput', listener ) instead.  
 defaultField.font = native.newFont( "Quadrat Serial", myText.height / 1.8 )  
 defaultField.align = "center"  
 myText:removeSelf()  
 myText = nil  
 -- Add fields to our new group  
 fields:insert(defaultField)  
 native.setKeyboardFocus( defaultField )  
 local bkgd = display.newRect( 0, 0, display.contentWidth, display.contentHeight )  
 bkgd:setFillColor( 0, 0, 0, 0 ) -- set Alpha = 0 so it doesn't cover up our buttons/fields

What I did with my buddy in Corona irc to modify the IOS text is to get the height of the text printed to the device and scale based on that. I don’t really understand it, we got it working on iOS so that if it is on an iPAD the text in the textInput area is really small. But really small is better than cut off, so I shipped with it.

Now I really want to get this working for Android users. The fact that this is not automatic is maddening. I think it should default to always be the height of 1 line of textbox, unless you specify for some reason you want gynormous text in your textField.

I guess a lot of Corona Apps do not have an ‘Enter Text’ feature and there isnt a common FIT ALL solution to this.
[import]uid: 100299 topic_id: 35589 reply_id: 141459[/import]

#5

The reason this isn’t easier is because there are two different systems in use. Corona’s graphics engine is based on OpenGL. Drawing images, sprites, display.newText etc. is all done using OpenGL. You can think of it as it’s own layer for the screen’s display. All of Corona’s scaling facilities, rotating things operate there.

Anything that has a “native” in front of the API call are using features of the native operating system and are separate from the OpenGL canvas. You would run into this same issue building an app in Objective C or Java for Android in trying to mix the two systems.
Actually looking at your screen shot again, the font looks like a good size. I wonder if something else is going on. How fonts are rendered depends a lot on the operating system and the font.

Can you try a different font? Try native.systemFont and see if it behaves any differently? [import]uid: 199310 topic_id: 35589 reply_id: 141466[/import]

#6

Ok. that makes a lot of sense now.

hmm… Trying a different font would have actually been a good idea.

What I ended up doing thanks to the wonderful advice from the guys in freenode irc chat was to just double the size of the input box to cover all sizes. It’s acceptable. you only name the player once.

Thanks for looking into this Rob. Definitely thanks for taking the time to look this over for me. I would love to pick your brain about this stuff in the future.

SHIPPED! on accident, but got this fixed, er… acceptable in time. I had no idea Google Play had zero review period. Going to write my announcement message. :smiley: [import]uid: 100299 topic_id: 35589 reply_id: 141491[/import]

#7

native.newTextFields fonts don’t scale like graphics and display.newText do.

How to solve this depends on your config.lua and the screen resolution of the problem device. Post your config.lua and lets see if we can figure out the math needed to calculate your right font size.

[import]uid: 199310 topic_id: 35589 reply_id: 141442[/import]

#8

I dont understand why this isn’t easier. I think Corona needs to make this part fit in line with their ‘code less play more’ slogan.

But anyway…

– config.lua

application =  
{  
 content =  
 {  
 antialias = false,  
 width = 320,  
 height = 480,  
 scale = "zoomStretch"  
  
 },  
}

[import]uid: 100299 topic_id: 35589 reply_id: 141456[/import]

#9

This is what I am doing with my TextBoxes…

It is modified from the sample on Corona. Which…sigh… looks out of date…

 ------------------------------------------  
 -- \*\*\* Create native input textfields \*\*\*  
 -------------------------------------------  
 -- Note: currently this feature works in device builds or Xcode simulator builds only  
  
 -- Note: currently this feature works in device builds only  
 local isAndroid = "Android" == system.getInfo("platformName")  
 local inputFontSize = 18  
 local inputFontHeight = 30  
 if isAndroid then  
 -- Android text fields have more chrome. It's either make them bigger, or make the font smaller.  
 -- We'll do both  
 inputFontSize = 14  
 inputFontHeight = 42  
 end  
 myText = display.newText( "GJYyp@^", 20, 40,0,0, "QuadratSerial", 36)  
 myText:setTextColor( 255,0,0 )  
 defaultField = native.newTextField( 10, 120, 300, 30, fieldHandler )  
 -- o:addEventListener( 'userInput', listener )   
 -- WARNING: The 'listener' argument to native.newTextField( left, top, width, height [, listener] ) is deprecated. Call the object method o:addEventListener( 'userInput', listener ) instead.  
 defaultField.font = native.newFont( "Quadrat Serial", myText.height / 1.8 )  
 defaultField.align = "center"  
 myText:removeSelf()  
 myText = nil  
 -- Add fields to our new group  
 fields:insert(defaultField)  
 native.setKeyboardFocus( defaultField )  
 local bkgd = display.newRect( 0, 0, display.contentWidth, display.contentHeight )  
 bkgd:setFillColor( 0, 0, 0, 0 ) -- set Alpha = 0 so it doesn't cover up our buttons/fields

What I did with my buddy in Corona irc to modify the IOS text is to get the height of the text printed to the device and scale based on that. I don’t really understand it, we got it working on iOS so that if it is on an iPAD the text in the textInput area is really small. But really small is better than cut off, so I shipped with it.

Now I really want to get this working for Android users. The fact that this is not automatic is maddening. I think it should default to always be the height of 1 line of textbox, unless you specify for some reason you want gynormous text in your textField.

I guess a lot of Corona Apps do not have an ‘Enter Text’ feature and there isnt a common FIT ALL solution to this.
[import]uid: 100299 topic_id: 35589 reply_id: 141459[/import]

#10

The reason this isn’t easier is because there are two different systems in use. Corona’s graphics engine is based on OpenGL. Drawing images, sprites, display.newText etc. is all done using OpenGL. You can think of it as it’s own layer for the screen’s display. All of Corona’s scaling facilities, rotating things operate there.

Anything that has a “native” in front of the API call are using features of the native operating system and are separate from the OpenGL canvas. You would run into this same issue building an app in Objective C or Java for Android in trying to mix the two systems.
Actually looking at your screen shot again, the font looks like a good size. I wonder if something else is going on. How fonts are rendered depends a lot on the operating system and the font.

Can you try a different font? Try native.systemFont and see if it behaves any differently? [import]uid: 199310 topic_id: 35589 reply_id: 141466[/import]

#11

Ok. that makes a lot of sense now.

hmm… Trying a different font would have actually been a good idea.

What I ended up doing thanks to the wonderful advice from the guys in freenode irc chat was to just double the size of the input box to cover all sizes. It’s acceptable. you only name the player once.

Thanks for looking into this Rob. Definitely thanks for taking the time to look this over for me. I would love to pick your brain about this stuff in the future.

SHIPPED! on accident, but got this fixed, er… acceptable in time. I had no idea Google Play had zero review period. Going to write my announcement message. :smiley: [import]uid: 100299 topic_id: 35589 reply_id: 141491[/import]

#12

Hi Lava,

 

I have the same problem. Do you found a better solution for this problem?

 

Regards.

 

Josep Alemany

#13

+1 for a fix.

 

I’ve had the same problem on my HTC devices, and I think i’ve seen it on a Nexus 7 too. I’ve seen lots of posts in the past with people saying that the text is incorrect on a native text field.

 

I know that for me, even if I do something like:

 

local idealFontSize = 30 myTextField = native.newTextField( \_W \* 0.5, \_H \* 0.42, 220, 30 ) myTextField.font = native.newFont(native.systemFont, idealFontSize/display.contentScaleX)

 

which should scale the font size based on the display.contentScaleX, it doesn’t always resize correctly.

Assuming the config file was set to 320*480, this should give:

 

iPhone 3gs =  15

iPhone 4 = 30

iPad 1 = 32

iPad 3 = 64

 

Which should be about right, but instead I get text that is twice as big / small on some devices.

#14

Hi Lava,

 

I have the same problem. Do you found a better solution for this problem?

 

Regards.

 

Josep Alemany

#15

+1 for a fix.

 

I’ve had the same problem on my HTC devices, and I think i’ve seen it on a Nexus 7 too. I’ve seen lots of posts in the past with people saying that the text is incorrect on a native text field.

 

I know that for me, even if I do something like:

 

local idealFontSize = 30 myTextField = native.newTextField( \_W \* 0.5, \_H \* 0.42, 220, 30 ) myTextField.font = native.newFont(native.systemFont, idealFontSize/display.contentScaleX)

 

which should scale the font size based on the display.contentScaleX, it doesn’t always resize correctly.

Assuming the config file was set to 320*480, this should give:

 

iPhone 3gs =  15

iPhone 4 = 30

iPad 1 = 32

iPad 3 = 64

 

Which should be about right, but instead I get text that is twice as big / small on some devices.

#16

Same issue here. Seems like it justed started with the latest free build possibly.

#17

Do we have any more info on this issue? 

We have some work for hire which is just about to be released, so we need to fix this issue asap.

For example this is how it looks on a Galaxy S2:

https://www.dropbox.com/s/f2fyylz691csbbt/WP_20130419_001.mp4

And this is the code to create the textfield:

insightTextField = native.newTextField(100, 100, 50, 150) insightTextField.font = native.newFont( myfont, 20) insightTextField:addEventListener("userInput", onInsightTextField)            insightTextField.text = ""  

Nothing out of the ordinary as far as I can tell, yet the majority of the text is offscreen. You can see in the video that the text field has some kind of bounding field (depending on the device I’ve seen this drawn in blue, green and orange) going through the middle of the text field.

#18

Same issue here. Seems like it justed started with the latest free build possibly.

#19

It appears almost exactly the same on a Galaxy Note 2 (orange instead of blue). I don’t mind that it’s “broken”, I mind that there’s no best practice/workaround but rather a gamut of choices, some of which are of wildly varying quality and compatibility with current releases. =/

#20

Do we have any more info on this issue? 

We have some work for hire which is just about to be released, so we need to fix this issue asap.

For example this is how it looks on a Galaxy S2:

https://www.dropbox.com/s/f2fyylz691csbbt/WP_20130419_001.mp4

And this is the code to create the textfield:

insightTextField = native.newTextField(100, 100, 50, 150) insightTextField.font = native.newFont( myfont, 20) insightTextField:addEventListener("userInput", onInsightTextField)            insightTextField.text = ""  

Nothing out of the ordinary as far as I can tell, yet the majority of the text is offscreen. You can see in the video that the text field has some kind of bounding field (depending on the device I’ve seen this drawn in blue, green and orange) going through the middle of the text field.