Android Question Font Size

Sergey_New · Oct 25, 2023

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

klaus · Oct 26, 2023

Sergey_New said:
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...

PdeG · Oct 25, 2023

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

zed · Oct 25, 2023

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

Sergey_New · Oct 25, 2023

zed said:
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 · Oct 25, 2023

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 · Oct 25, 2023

zed said:
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?

zed said:
You can modify the comparison values. (5 - 6,2 - ...)

How to use this data in your example?

zed · Oct 25, 2023

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

Sergey_New · Oct 25, 2023

zed said:
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.

klaus · Oct 25, 2023

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 · Oct 25, 2023

klaus said:
How do you setup the layouts ?

AutoScaleAll is installed in the designer

klaus · Oct 25, 2023

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 · Oct 25, 2023

klaus said:
You can play with AutoScaleRate.

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

klaus · Oct 25, 2023

You have commented AutoScaleAll you should not !

Sergey_New · Oct 25, 2023

klaus said:
You have commented AutoScaleAll you should not !

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

klaus · Oct 26, 2023

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 · Oct 26, 2023

klaus said:
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 · Oct 26, 2023

Sergey_New said:
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 · Oct 26, 2023

Sergey_New said:
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 · Oct 30, 2023

klaus said:
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.

Android Question Font Size

Well-Known Member

Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Attachments

Expert

Well-Known Member

Expert

Attachments

Well-Known Member

Active Member

Expert

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency