Android Question Text Size Scaling

ducphu

Active Member
Licensed User
Longtime User
Hi all,

I already know that in designer, we can use AutoScaleAll to scale all the button's, label's... text size. However, I have an array of button which I add by code, I can NOT use AutoScaleAll. I come through some formula but not sure which one is the most appropriate. 2 formulas I use are:

B4X:
Dim RealInches, RealScale As Double
    Dim BaseInches, BaseScale As Double
    Dim Ratio As Double
    RealInches = GetDeviceLayoutValues.ApproximateScreenSize
    RealScale = GetDeviceLayoutValues.Scale
    BaseInches = 4.33 'My test device screen size
    BaseScale = 3 'My test device scale factor
    Ratio = RealInches/BaseInches * Sqrt(RealScale/BaseScale)
    Return Ratio

And

B4X:
Dim scale As Double
    Dim delta As Double = ((100%x + 100%y) / (640dip + 360dip) - 1)
    Dim rate As Double = 0.5 'value between 0 to 1.
    scale = 1 + rate * delta
    Return scale

When I test using my Xperia Z 1080 x 1920 441 ppi scale 3, using both formula, the text seems to be fine
When I test using my friend's Xiaomi Mi Note 1080 x 1920 386 ppi scale unknown, using 2nd formula, the text seems too big

Can anyone help me? Thanks.
 

ducphu

Active Member
Licensed User
Longtime User
Thank Erel for your prompt reply. So what you mean is, for those views added by designer, I should use AutoScaleAll. And for those views added by code, I should use that module?
Can you just briefly explain the difference between ScaleView and ScaleViewDS? Thanks.
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
ScaleView uses two scale factors one for X and one for Y.
ScaleViewDS uses the same equations as the DesignerScript that's why DS at the end.
You may read chapter 8.12.3 AutoScale more advanced examples in the Beginner's Guide which explains in detail the Scale module.
 
Upvote 0

ducphu

Active Member
Licensed User
Longtime User
Hi all,

I try using Erel module, ScaleView to scale the text of my label, the scale rate is set at 0.5. And here is the result:

xperia z 1.png
mi note 1.jpg

xperia z 2.png
mi note 2.jpg

xperia z 3.png
mi note 3.jpg


Photos on the left side is from xperia z and on the right side is from xiaomi note
As you can see,for the 1st photo, the font in xperia is right but in xiaomi, it's too big. For the 2nd photo, font in xperia is a bit too big while it's ok on xiaomi.

For 3rd photo, I use Designer, AutoScaleAll, rate = 0.5, xperia is ok, xiaomi is too big.

Any suggestion?
 

Attachments

  • xperia z 2.png
    xperia z 2.png
    12.7 KB · Views: 284
  • mi note 2.jpg
    mi note 2.jpg
    8 KB · Views: 252
Last edited:
Upvote 0

ducphu

Active Member
Licensed User
Longtime User
I dont use Scale module and AutoScale together.
The xiaomi device font size is set to medium. The font size available are small, standard, medium, large. Tried change it to standard and the result is:
xiaomi standard size.jpg
xiaomi standard 2.jpg


The left photo use AutoScale and the right one use Scale module. So now if the phone is at standard size, the Scale module works better than the AutoScale ???
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
@klaus : Maybe a stupid question but the first line in the example is

Scale.SetRate(0.5)

where does the 0.5 value come from?
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
@ducphu
If in the Scale module you use Scale.ScaleAll or Scale.ScaleView the equations are different from the Designer AutoScale.
In chapter 8.12.3 AutoScale more advanced examples in the Beginner's Guide I explain why I wrote the Scale module.
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
@sorex
It's an arbitrary value for the example.
In the programs where I use it that's the value I like, nothing else. I don't like to stretch the layouts proportionally to the screen size but with a smaller strech factor.
If you set Scale.SetRate(0) nothing happens and if you set Scsle.SetRate(1) it's equal to %x and %y when using Scale.ScaleAll or Scale.ScaleView.
If you use Scale.ScaleAllDS or Scale.ScaleViewDS it's exactly the same as in the DesignerScripts.
You must not use both, AutoScale in the Designer and Scale in the code.
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
ok, I'll have a play with it this evening.

so if I read it right I should set up my emu to 320x480 and position everything like I want there?

should I use dip or not for the scaling to be applied right?
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
@klaus ,

ok, I had time for some simple test and noticed some issues.

I have a listview set to 100%x & 100%y at 0,0.

All runs fine as expected.

When I add

B4X:
Scale.Initialize
Scale.SetRate(0.5)
Scale.ScaleView(lvCountries)
'Scale.ScaleAll(mainactivity,True)

and use scaleview or scaleview all the last 2 items seems to go beyond 100%y and I can't see them.

same thing when I set the rate to 0.0.

cScaleX & cScaleY seems to be 1.1162790697674418 instead of 1 while my screen is the same as the reference screen (320x480)
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
the problem is the 50 value in this line

B4X:
cScaleY = 100%y / (cRefHeight - 50 * cRefScale) / DeviceScale

when I set it to 0 it works fine. what is the meaning of that value?
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
I see.

It is fullscreen indeed.

Can it be detected that the title bar is there and is it always 50 high?
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
Got it working with an extra sub where I define if it's fullscreen or not and has a title or not.

untill I tested it on another resolution (240x400) and the view suddenly becomes 440px and goes beyond again. o_O
 
Upvote 0
Top