I had an embarrassing moment on an Android release recently, in which the button font on Android was MUCH larger than I thought it would be.
The app looked fine in the Samsung Galaxy S3 simulator, but when I saw it on someone’s Galaxy S4, the button labels were much larger, and in many cases extended past the sides of the button images. The functionality was OK, but the look was terrible.
I went back and reduced the wording of the labels for a quick fix, but since then I have been playing with font sizes for a long-term fix.
The documentation says that the default button fontSize is 14, but it appears to be more like 17 or 18 for iOS and Galaxy S3 simulator, and is about 20 on a “real” Galaxy S4. I put together a short app that shows this, below.
– ButtonFontSizeTest.lua
local widget = require (“widget”)
local lblX = display.contentWidth * 0.5 - 60
local btnX = display.contentWidth * 0.5 + 60
local y0 = 50
local dy = 50
local lblFontSize = 14
local initFontSize = 14
local dFont = 1
local btnFontSize
local labelColorOptions = { default = {1, 1, 1}, over = {0, 0, 0} }
local bg = display.newRect( display.contentWidth * 0.5, display.contentHeight * 0.5,
display.contentWidth, display.contentHeight)
bg:setFillColor (0.5, 0.5, 0.5, 1.0)
– create some tinted rectangles to help size up the button labels
local rect = {}
for i=0,7 do
rect[i] = display.newRect (btnX, y0 + (i * dy), 100, 40)
rect[i]:setFillColor(0.65, 0.65, 0.65, 1)
end
– labels and buttons
local lblFont = {}
local btn = {}
– the zero button pair is “default”
lblFont[0] = display.newText ({
text = “Default Size”, x = lblX, y = y0,
width = 100, align = “right”,
font = native.systemFont, fontSize = lblFontSize
})
btn[0] = widget.newButton ({
x = btnX, y = y0,
labelColor = labelColorOptions,
– NOTE: NO FONT SIZE SPECIFIED
label = “Test Button”
})
for i=1,7 do
btnFontSize = initFontSize + ((i - 1) * dFont)
lblFont[i] = display.newText ({
text = "Font Size " … btnFontSize,
x = lblX, y = y0 + (i * dy),
width = 100, align = “right”,
font = native.systemFont, fontSize = lblFontSize
})
btn[i] = widget.newButton ({
x = btnX, y = y0 + (i * dy),
labelColor = labelColorOptions,
fontSize = btnFontSize,
label = “Test Button”
})
end