native.newTextField Font Scaling

Other
#1

Like many folks on here, I’m being bitten by the text field font scaling issues across multiple devices.  I’ve looked across the forum and I see many, many posts about this, with various answers.

I’m wondering, is anyone having any success with a native.newTextField today?  If so, what is the secret sauce to make it work properly?

I’m using letterbox scaling and Sergey Lerg’s ultimate config.lua.  I’ve tried a bunch of things I’ve seen on the forum and almost none of them seem to work. Many of the posts are very old too.

I’ve had the most success with the widgetstown newEditField, but the font scaling is still not right. I can’t seem to find the right mix where the fake text label it creates is the same size as the text in the native text field.  I’m okay with a slight difference, but I’m seeing really wacky results, especially on Android, where the native text is extremely tiny.

vs

What are other people doing?

Thanks,

Dave

#2

Also, Corona Staff, there is more information on the properties of native.newTextField on the nativeUI doc page than there is on the native.newTextField doc page:

http://docs.coronalabs.com/guide/system/nativeUI/index.html

vs

http://docs.coronalabs.com/api/library/native/newTextField.html

I think the properties should be in both places. (Just reported the issue as well.)

#3

There’s also a 3rd place that gives even more information on the properties of a textField:

http://docs.coronalabs.com/api/type/TextField/index.html

#4

i’ve battled with it in my latest app, and happy to say i managed to conquer it…

i have a slightly different scaling for the whole app, cause i use contentWidth = pixelWidth, but that doesn’t matter for native textfield.

for native textfield, i have tested that it looks all right on my 540x960 android… but when it got to a XXHDPI Samsung S5 (1080x1920) the input font size looked off.

this is the code I use to recalculate the textfield’s “size” parameter, making it somewhat similar for all devices… i consider it my magic constant :wink:
… the key is in : system.getInfo(“androidDisplayXDpi”) / 240

local fontBold = native.systemFontBold if system.getInfo("platformName") == "Android" then     fontBold = "DroidSans-Bold" else     fontBold = native.systemFontBold end local dpiAdjustDivider = 1 if system.getInfo("platformName") == "Android" then dpiAdjustDivider = system.getInfo("androidDisplayXDpi") / 240 else dpiAdjustDivider = 1 -- for non androids end minutesInputField = native.newTextField( display.contentWidth \* 0.5, display.contentHeight \* 0.5, display.contentWidth\*0.15, 2.2\*display.contentHeight / 30 ) minutesInputField.hasBackground = false minutesInputField.anchorX = 1 minutesInputField.inputType = "number" minutesInputField.placeholder = "minutes" minutesInputField.align = "center" minutesInputField.font = native.newFont(fontBold) minutesInputField.size = ( display.contentHeight / 30 ) / 2 / dpiAdjustDivider minutesInputField:addEventListener( "userInput", fieldHandler )

obviously, you can simplify it a bit, there’s more math then there needs to be, but this is taken out of my own code where i keep the dividers and multipliers for a reason…  just use the adjusting based on the android device DPI, and you’ll get the hang of it in just a few experiments…

#5

Have you read this tutorial:
 

http://coronalabs.com/blog/2014/12/02/tutorial-sizing-text-input-fields/

Rob

#6

Also, Corona Staff, there is more information on the properties of native.newTextField on the nativeUI doc page than there is on the native.newTextField doc page:

http://docs.coronalabs.com/guide/system/nativeUI/index.html

vs

http://docs.coronalabs.com/api/library/native/newTextField.html

I think the properties should be in both places. (Just reported the issue as well.)

#7

There’s also a 3rd place that gives even more information on the properties of a textField:

http://docs.coronalabs.com/api/type/TextField/index.html

#8

i’ve battled with it in my latest app, and happy to say i managed to conquer it…

i have a slightly different scaling for the whole app, cause i use contentWidth = pixelWidth, but that doesn’t matter for native textfield.

for native textfield, i have tested that it looks all right on my 540x960 android… but when it got to a XXHDPI Samsung S5 (1080x1920) the input font size looked off.

this is the code I use to recalculate the textfield’s “size” parameter, making it somewhat similar for all devices… i consider it my magic constant :wink:
… the key is in : system.getInfo(“androidDisplayXDpi”) / 240

local fontBold = native.systemFontBold if system.getInfo("platformName") == "Android" then     fontBold = "DroidSans-Bold" else     fontBold = native.systemFontBold end local dpiAdjustDivider = 1 if system.getInfo("platformName") == "Android" then dpiAdjustDivider = system.getInfo("androidDisplayXDpi") / 240 else dpiAdjustDivider = 1 -- for non androids end minutesInputField = native.newTextField( display.contentWidth \* 0.5, display.contentHeight \* 0.5, display.contentWidth\*0.15, 2.2\*display.contentHeight / 30 ) minutesInputField.hasBackground = false minutesInputField.anchorX = 1 minutesInputField.inputType = "number" minutesInputField.placeholder = "minutes" minutesInputField.align = "center" minutesInputField.font = native.newFont(fontBold) minutesInputField.size = ( display.contentHeight / 30 ) / 2 / dpiAdjustDivider minutesInputField:addEventListener( "userInput", fieldHandler )

obviously, you can simplify it a bit, there’s more math then there needs to be, but this is taken out of my own code where i keep the dividers and multipliers for a reason…  just use the adjusting based on the android device DPI, and you’ll get the hang of it in just a few experiments…

#9

Have you read this tutorial:
 

http://coronalabs.com/blog/2014/12/02/tutorial-sizing-text-input-fields/

Rob