Android Question Font Size

Sergey_New

Well-Known Member
Licensed User
Longtime User
How to automatically set font size to fit device screen size?
I have already read B4X Visual Designer.
 
Solution
If I choose the appropriate AutoScaleRate value for my two devices, will it work on other screen sizes.
Unfortunately, the answer is yes and no, because it will depend on the screen sizes and the layout type and its complexity and there are so many different screen sizes.
A layout designed for a small screen and stretched to fit onto a big screen will look awful.
For some screen sizes, adjustments would be needed.
If your application should run on smartphones and on tablets it would probably be better to have two layout files one for small screens and one for big screens.
Then, where is the limit between small and big screens ?
The size of big smartphones is almost the same as the size of small tablets.

You need to find the...

zed

Active Member
Licensed User
With this you can know the screen size.
B4A:
Dim X,Y As Double
Dim r As Reflector
r.Target = r.GetContext
r.Target = r.RunMethod("getResources")
r.Target = r.RunMethod("getDisplayMetrics")
Log(r.GetField("xdpi"))
Log(r.GetField("ydpi"))
      
x = GetDeviceLayoutValues.Width/r.GetField("xdpi")
y = GetDeviceLayoutValues.Height/r.GetField("ydpi")
    
Log("x = "&X)
Log("y = "&y)
Then you set the font size
B4A:
Dim fontsize As Int
If y < 4.5 Then
    fontsize = 12
Else If y > 4.5 And y < 8 Then
    fontsize = 14
Else If y > 8 Then
    fontsize = 16
End If
 
Upvote 0

zed

Active Member
Licensed User
Yes that is correct.
You can modify the comparison values. (5 - 6,2 - ...)
Here are the screen dimensions

Size in inches - Diagonal (cm) - Width x Height (cm)
4'' - 10,2 cm - 8,9 x 5 cm
5'' - 12,7 cm - 11,1 x 6,2 cm
6'' - 15,2 cm - 13,3 x 7,5 cm
7'' - 17,8 cm - 15,5 x 8,7 cm
8'' - 20,3 cm - 17,7 x 10 cm
9'' - 22,9 cm - 19,9 x 11,2 cm
 
Upvote 0

Sergey_New

Well-Known Member
Licensed User
Longtime User
Yes that is correct.
It seems to me that visually for a screen size of 1440*2560, fontsize = 14 looks better. Maybe you need to use a coefficient that depends on the diagonal or another parameter?
You can modify the comparison values. (5 - 6,2 - ...)
How to use this data in your example?
 
Last edited:
Upvote 0

zed

Active Member
Licensed User
This is simpler and will have the same effect.
B4A:
    Dim ScreenSize As Float
    ScreenSize = GetDeviceLayoutValues.ApproximateScreenSize
    
    Log("ScreenSize : "&ScreenSize)
        
    If ScreenSize < 5 Then
        fontsize = 12
    Else If ScreenSize > 5 And ScreenSize < 6.2 Then
        fontsize = 13
    Else If ScreenSize > 6.2 And ScreenSize < 7.5 Then
        fontsize = 14
    Else If ScreenSize > 7.5 And ScreenSize < 8.7 Then
        fontsize = 15
    Else If ScreenSize > 8.7 And ScreenSize < 10 Then
        fontsize = 16
    Else If ScreenSize > 10 Then
        fontsize = 17
    End If
    
    Log("FontSize : "&fontsize)
    
    Label1.TextSize = fontsize

Log Phone :
ScreenSize : 6.122818470001221
FontSize : 13

Log Tablet :
ScreenSize : 9.278470039367676
FontSize : 16
 
Upvote 0

Sergey_New

Well-Known Member
Licensed User
Longtime User
This is simpler and will have the same effect.
Thank you!
I am attaching screenshots of two devices. Visually, the font size is different, but in both cases it is the same - 12.
2.png
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
This may explain why you see different sizes in the two screenshots.
To test it you can put a Log in the code to display the text size.
Even it is set to 12 in the Designer, it will be different on different screen sizes.
For example, on my device i get a text size of 12.96 for 12 set in the Designer.
You can play with AutoScaleRate.
Setting AutoScaleRate(0.5) gives a text size of 13.60.
And AutoScaleRate(0.8) gives a text size of 14.54.
The screen of my device is:
1080 x 2009 scale 3.
The default value of AutoScaleRate is 0.3.
 
  • Like
Reactions: zed
Upvote 0

klaus

Expert
Licensed User
Longtime User
I had not tested your project.
Now, i tested it but it does not install on my device, giving me a message that the program has a bug.
I created a default manifest editor file and the program works now as expected.

Try the attached program and you will see that the text size is not 14.
Or it would mean that your device has the standard screen size.

Are you sure that you uncommented AutoScaleAll in the Designer ?

1698305527492.png
 

Attachments

  • test1.zip
    8.7 KB · Views: 41
Upvote 0

Sergey_New

Well-Known Member
Licensed User
Longtime User
I created a default manifest editor file and the program works now as expected.
I'm sorry, I had an error in the manifest. The example works. If I choose the appropriate AutoScaleRate value for my two devices, will it work on other screen sizes. I don't have the opportunity to check.
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
If I choose the appropriate AutoScaleRate value for my two devices, will it work on other screen sizes.
Unfortunately, the answer is yes and no, because it will depend on the screen sizes and the layout type and its complexity and there are so many different screen sizes.
A layout designed for a small screen and stretched to fit onto a big screen will look awful.
For some screen sizes, adjustments would be needed.
If your application should run on smartphones and on tablets it would probably be better to have two layout files one for small screens and one for big screens.
Then, where is the limit between small and big screens ?
The size of big smartphones is almost the same as the size of small tablets.

You need to find the compromise for your application.
Playing with anchors and Designer Scripts.
 
Upvote 2
Solution

QSerg

Member
Unfortunately, the answer is yes and no, because it will depend on the screen sizes and the layout type and its complexity and there are so many different screen sizes.
A layout designed for a small screen and stretched to fit onto a big screen will look awful.
For some screen sizes, adjustments would be needed.
If your application should run on smartphones and on tablets it would probably be better to have two layout files one for small screens and one for big screens.
Then, where is the limit between small and big screens ?
The size of big smartphones is almost the same as the size of small tablets.

You need to find the compromise for your application.
Playing with anchors and Designer Scripts.
I would agree 100%. It is plain pain in the a$$ and if OP like his app look pretty on many different devices there is no choice but design many layouts. Autoscaling (or even manual one) usually produce ugly results not only with fonts, but with graphics also. Thus multi-layout.
 
Upvote 0
Top