Android Question Font Size

[Sergey_New]

How to automatically set font size to fit device screen size?
I have already read B4X Visual Designer.

 

[PdeG]

Maybe this thread https://www.b4x.com/android/forum/threads/gui-text-hight-problem.101766/#post-638990 can help

 

[zed]

With this you can know the screen size.

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

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

 

[Sergey_New]

Then you set the font size

Results for different screens
for 768*1280
320.0
320.0
x = 2.4
y = 3.7
12

For 1440*2560
560.0
560.0
x = 2.5714285714285716
y = 4.271428571428571
12
Is this how it should be?

 

[zed]

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

 

[Sergey_New]

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?

 

[zed]

This is simpler and will have the same effect.

    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

 

[Sergey_New]

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.

Spoiler

 

[klaus]

How do you setup the layouts ?
If you use the Designer do you use AutoScale ?
AutoScale adapts the size of views and also the text size.

 

[Sergey_New]

How do you setup the layouts ?

AutoScaleAll is installed in the designer

 

[klaus]

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.

 

[Sergey_New]

You can play with AutoScaleRate.

When I change AutoScaleRate, nothing changes. Please look at the attached example, what is wrong?

 

[klaus]

You have commented AutoScaleAll you should not !

 

[Sergey_New]

You have commented AutoScaleAll you should not !

I did it this way and that way. No difference.

 

[klaus]

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 ?

 

[Sergey_New]

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.

 

[zed]

I don't have the opportunity to check.

With the Android emulator, you can create several screen virtualizations.

Thank you Klaus for all these details

 

[klaus]

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.

 

[QSerg]

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.