newTextField font size for Android and iOS not the same

When you define a native.newTextField on iOS devices, it is important to note that they DO NOT automatically set the fontSize of the field properly - often, it appears very small. For that matter, although Android default is consistent, it also DOES NOT display the font as large as on iOS devices, and for these reasons, the results are inconsistent between platforms.

Engineering spend considerable effort a few months ago to solve this. They changed it so you can have it pick a font size and the text field will adjust it’s size to fit, or you can pick the field size and it does the its best fit. Android has more chrome (space around the field) and its fonts are naturally a little bit smaller.  Look at some of the options here:

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

and see if they help you.

Rob

The original post below was prior to Daily Build 2830, which appears to resolve the font size issue. Therefore, the content herein may only be accurate on older devices, but that could be incorrect - since the answer would require testing on such older systems with the latest Daily Build. I’m leaving this content intact in the event that some older systems still respond strangely with regard to size and placement of native.newTextField.

Hi Rob,

I’m really happy that the Corona team improved the font sizing issue - a definite improvement. I studied every available link I could find on the topic newTextField before creating this solution.

In my case, the solution provided here was simply designed to make my use of custom fonts on iOS and Android and display them within a field in a manner which is nearly identical, platform independent. I found the Android font size too small - especially on older, smaller devices.

This has been solved with the code below. Please note that this code ALSO includes the iOS iPhone positioning issues published at: https://forums.coronalabs.com/topic/59256-newtextfield-positioning-is-wrong-for-ios-iphones-ipads-and-android-fine/

Please note this sample code uses variables that start with “V.” as global variables.

–place in your code init (This V.fieldFactor is the same as the “coefficient” in the iOS iPhone positioning post mentioned above)

    V.fieldFactor=1
    if system.getInfo(“platformName”)==“iPhone OS” then
        if string.match(system.getInfo(“model”),“iPa”) then
            --nothing for iPad
        else
            --iPhone 5, iPhone 6, and other iPhones
            V.fieldFactor=.876-(V.H*.00059)
        end
    end

–to create a new field, I use it like this:

newFieldObject=makeField(x,y,w,h,“placeholder text here”,font)

function makeField(xx,yy,ww,hh,text,font)
        local x,y,w,h,fontHeight
        x=xx*V.fieldFactor
        w=ww*V.fieldFactor
        
        if V.platform==“iPhone OS” then
            y=yy*V.fieldFactor
            h=hh*V.fieldFactor
            fontHeight=hh
        else  --Android
            y=yy*V.fieldFactor-(hh*.1)
            h=(hh*1.5)*V.fieldFactor
            fontHeight=hh*.85

        end
        local obj=native.newTextField(x,y,w,h)

        obj.size=fontHeight
        obj.font = native.newFont(font,fontHeight)
        obj.hasBackground=false  --if you want a transparent background
        obj.placeholder=text
       
        return obj
    end

  V.fieldFactor=1

    if system.getInfo(“platformName”)==“iPhone OS” then
        if string.match(system.getInfo(“model”),“iPa”) then
            --nothing for iPad
        else
            --iPhone 5, iPhone 6, and other iPhones
            V.fieldFactor=.876-(V.H*.00059)
        end
    end

Where is the value for V.H assigned?

V.H = display.viewableContentHeight

It’s the height of the screen in pixels.

Thanks!

Engineering spend considerable effort a few months ago to solve this. They changed it so you can have it pick a font size and the text field will adjust it’s size to fit, or you can pick the field size and it does the its best fit. Android has more chrome (space around the field) and its fonts are naturally a little bit smaller.  Look at some of the options here:

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

and see if they help you.

Rob

The original post below was prior to Daily Build 2830, which appears to resolve the font size issue. Therefore, the content herein may only be accurate on older devices, but that could be incorrect - since the answer would require testing on such older systems with the latest Daily Build. I’m leaving this content intact in the event that some older systems still respond strangely with regard to size and placement of native.newTextField.

Hi Rob,

I’m really happy that the Corona team improved the font sizing issue - a definite improvement. I studied every available link I could find on the topic newTextField before creating this solution.

In my case, the solution provided here was simply designed to make my use of custom fonts on iOS and Android and display them within a field in a manner which is nearly identical, platform independent. I found the Android font size too small - especially on older, smaller devices.

This has been solved with the code below. Please note that this code ALSO includes the iOS iPhone positioning issues published at: https://forums.coronalabs.com/topic/59256-newtextfield-positioning-is-wrong-for-ios-iphones-ipads-and-android-fine/

Please note this sample code uses variables that start with “V.” as global variables.

–place in your code init (This V.fieldFactor is the same as the “coefficient” in the iOS iPhone positioning post mentioned above)

    V.fieldFactor=1
    if system.getInfo(“platformName”)==“iPhone OS” then
        if string.match(system.getInfo(“model”),“iPa”) then
            --nothing for iPad
        else
            --iPhone 5, iPhone 6, and other iPhones
            V.fieldFactor=.876-(V.H*.00059)
        end
    end

–to create a new field, I use it like this:

newFieldObject=makeField(x,y,w,h,“placeholder text here”,font)

function makeField(xx,yy,ww,hh,text,font)
        local x,y,w,h,fontHeight
        x=xx*V.fieldFactor
        w=ww*V.fieldFactor
        
        if V.platform==“iPhone OS” then
            y=yy*V.fieldFactor
            h=hh*V.fieldFactor
            fontHeight=hh
        else  --Android
            y=yy*V.fieldFactor-(hh*.1)
            h=(hh*1.5)*V.fieldFactor
            fontHeight=hh*.85

        end
        local obj=native.newTextField(x,y,w,h)

        obj.size=fontHeight
        obj.font = native.newFont(font,fontHeight)
        obj.hasBackground=false  --if you want a transparent background
        obj.placeholder=text
       
        return obj
    end

  V.fieldFactor=1

    if system.getInfo(“platformName”)==“iPhone OS” then
        if string.match(system.getInfo(“model”),“iPa”) then
            --nothing for iPad
        else
            --iPhone 5, iPhone 6, and other iPhones
            V.fieldFactor=.876-(V.H*.00059)
        end
    end

Where is the value for V.H assigned?

V.H = display.viewableContentHeight

It’s the height of the screen in pixels.

Thanks!