Question about text size

[gadgetmonster]

Hi All

When I started writing my app I was using dip's on all of my text sizes. This appeared to work well. i.e. a label with a text size 10dip on my galaxy note 2 looked around the same size on an emulated device with a smaller screen.

Then I read that dip should not be used on any text sizes so I removed them all and doubled the text size I had (label1.textsize = 10dip became label1.textsize = 20). This doubling made the text look exactly the same on the note. Once I had finished I tried my app on the simulated smaller device and the text looked awful - it looked nothing like the app on the note 2.

So my question is, how do I make text look the same size across devices?

I'm probably being a big newbie on this but any help would be greatly appreciated.

Thank you.

 

[gadgetmonster]

I have tried the following in the designer script:

AutoScaleRate (0.5)
AutoScaleAll

imgBg.Width = 100%x
imgBg.Height = 100%y

imgLogo.Width = 50%x
imgLogo.Height = 50%x
imgLogo.HorizontalCenter = 50%x
imgLogo.Top = 5%y

lbAppVersion.Top = imgLogo.Bottom 
lbAppVersion.Left = 0dip
lbAppVersion.Width = 100%x 

lbContactTitle.Top = lbAppVersion.Bottom + 30dip
lbContactTitle.Width = 100dip
lbContactTitle.Left = 10dip

lbContact.left = lbContactTitle.Right 
lbContact.Width = 100%x - (lbContactTitle.Width + 20dip)
lbContact.VerticalCenter = lbContactTitle.VerticalCenter 

lbManualTitle.Top = lbContact.Bottom + 5dip
lbManualTitle.Left = 10dip
lbManualTitle.Width = 100dip

lbManual.left = lbManualTitle.right
lbManual.Width = 100%x - (lbManualTitle.Width + 20dip)
lbManual.VerticalCenter = lbManualTitle.VerticalCenter 

butPurchase.width = 100%x - 20dip
butPurchase.HorizontalCenter = 50%x
butPurchase.Bottom = 100%y

All label text sizes are set in the label properties. On the note 2 it looks perfect, on the emulator with a 480 x 800 screen the labels lbContact and lbManualTitle wrap round.

Please help me get my head around this

 

[Olaan]

Hi paulchatwin,

Using AllSaleAll,you must create every views at scale 320 x 480, scale = 1 (160 dpi)

 

[klaus]

The TextSize unit is the desktop publishing point (typographic point).
If you set the TextSize property to a given value the physical text size will be the same on all devices, independant of screen densities and screen sizes.
The problem is that the text might look fine on a small screen but look too small on a big screen or vice and versa.
As all your view dimensions are in %x and %y values you could add a scale variable in the Designer Script to adjust the text size according to the screen size.

delta = ((100%x + 100%y) / (320dip + 430dip) - 1)
rate = 0.3 'value between 0 to 1.
scale = 1 + rate * delta

lbAppVersion.TextSize = lbAppVersion.TextSize * scale

and for each view having a Text property multiply it by the scale like in the example above.

You should play with the rate value to satisfy your needs.
The equations above are used in the AutoScale function.

Best regards.

 

[yttrium]

I believe text should be set with the sp unit rather than dip or px (default).

 

[netchicken]

Oh oh, thats what I didn't want to hear SP?

I tried with no measurement, and people complained, so I tried with dip ,and still people complained. What is SP?

 

[Erel]

You should not use dip with text size. Text size is always defined in sp units in Basic4android.

 

[netchicken]

Is there anything in the documentation on this? I searched for it but there doesn't seem to be anything.

 

[Erel]

About what? TextSize should not be set with dip there is even a compiler warning when you do that.

 

[pivar]

After having some remarks on small programs (not so bad in calculation but weak in soft):
Textsize measures: on a tablet (216 dpi), text size = 20 gives a letter height of 2 mm (0.079 ") and textsize = 50 gives a height of 5.8 mm (0.23")
on a smartphone (207 dpi) textsize = 20 gives a letter height of 2.8 mm (0.11 ") and textsize = 50 gives a height of 7 mm (0.275")
The length of the text is in the same proportions
I know it will have nothing to do with dpi
Ideally, is it possible to know the height of the letters given by a texsize x ?

 

[klaus]

Canvas.MeasureStringHeight(Text As String, Typeface As Typeface, TextSize As Float)
Returns : Float

 

[pivar]

Thanks ,
For textsize=30 , on one device it gives height=27 , on the other , it gives 33
So I will measure it at the beginning to fix the textsize
D.P.

 

[Dave O]

To make text scale on various devices, I've used the following calculation with good results:

log("ApproximateScreenSize = " & GetDeviceLayoutValues.ApproximateScreenSize)   'use this to get your reference value
dim fontScale As Float = GetDeviceLayoutValues.ApproximateScreenSize / 4.5   'assuming Note 3 as reference device
...
someLabel.TextSize = someLabel.titleSize * fontScale

How this works:
- I set the textSize to look good on my main device (a Galaxy Note 3 with a 5.5" screen, which for some reason gets reported as 4.5" - whatever).
- For your own device, use the value from GetDeviceLayoutValues.ApproximateScreenSize as the denominator instead of 4.5 above
- On that same device, size your text normally. That gives you a baseline to work with.
- Then use the fontScale multiplier above to adjust each label's textSize according to the physical screen size of the device it's actually running on out in User Land.

For example, on a 9" tablet, using the example above, the textSize gets doubled, which keeps the text looking roughly proportional to everything else.

I doubt this is exact, but it has worked pretty well on all devices that I've tried (actual and emulated). If there's a better way, though, I'm all ears.

Hope this helps!

 

[pivar]

Well ,its better than what I have done up to now ; ApproximateScreenSize is probabily a good answer , but the word Approximate !
Yes it helped
D.P.

 

[pivar]

So , I finished with a mix :I create all panels and labels in ratio of the screen ; like you , I set the textSize on my device ; with Canvas.MeasureStringHeight I measure the real Height and calculate the ratio with screen (Rtxt); at the begining of program , the textsize is the height of screen*Rtxt and it is modified if the value Canvas.MeasureStringHeight is different of textsize
I'll always be a beginner , but this way is running better
Thank for your help to think
DP