Android Question [Problem] Different devices different text sizes

Juan Luis Lopez

Member
Licensed User
Longtime User
Hi i have some problems with sizes in different devices:

Here is the script from designer i wrote:
B4X:
'All variants script
AutoScaleAll
iconsize=25%x
logosize= 30%x
margenV=5%y
IconMargin= IconSize*0.25
'Tamaños
ImLogo.Width=logosize
ImLogo.Height=logosize
imVer.Height=60%x
imVer.Width=2dip
ImHor.Width=60%x
ImHor.Height=2dip
'
BtnOfertas.Width= iconsize
BtnOfertas.height= iconsize
BtnPinchos.Width= iconsize
BtnPinchos.height= iconsize
BtnLocation.Width= iconsize
BtnLocation.height= iconsize
BtnCodigos.Width= iconsize
BtnCodigos.height= iconsize

'Posiciones
ImLogo.HorizontalCenter=50%x
ImLogo.Top = 7%y
imVer.Top= ImLogo.top + ImLogo.Height + MargenV
imVer.HorizontalCenter=50%x
ImHor.Left= 20%x
ImHor.Top= imVer.Top+imVer.Height * 0.5

'Botones
   BtnOfertas.Width=IconSize
   BtnOfertas.Height= IconSize
   BtnOfertas.Top= ImHor.Top -IconSize -IconMargin
   BtnOfertas.Left= imVer.left - IconSize-IconMargin
   
   BtnPinchos.Width=IconSize
   BtnPinchos.Height= IconSize
   BtnPinchos.Top= ImHor.Top -IconSize -IconMargin
   BtnPinchos.Left= imVer.left +IconMargin
   
   BtnCodigos.Width=IconSize
   BtnCodigos.Height= IconSize
   BtnCodigos.Top= ImHor.Top+IconMargin
   BtnCodigos.Left= imVer.Left-IconMargin-IconSize
   
   BtnLocation.Width=IconSize
   BtnLocation.Height= IconSize
   BtnLocation.Top= ImHor.Top+IconMargin
   BtnLocation.Left= imVer.Left+IconMargin

'Etiquetas
   lblOfertas.Text="Ofertas"
   lblOfertas.TextSize=16
   lblOfertas.Left= BtnOfertas.Left
   lblOfertas.Width= BtnOfertas.width
   lblOfertas.Height=24dip
   lblOfertas.Top= BtnOfertas.Bottom - 0.2*lblOfertas.height
   
   lblPinchos.Text="Pinchos"
   lblPinchos.TextSize=16
   lblPinchos.Left= BtnPinchos.Left
   lblPinchos.Width= BtnPinchos.width
   lblPinchos.Height=24dip
   lblPinchos.Top= lblOfertas.top
   
   lblCodigos.Text="Códigos"
   lblCodigos.TextSize=16
   lblCodigos.Left= BtnCodigos.Left
   lblCodigos.Top= BtnCodigos.Bottom
   lblCodigos.Width= BtnCodigos.Width
   lblCodigos.Height= 24dip
   
   lblLocation.Text="Cómo llegar"
   lblLocation.TextSize=16
   lblLocation.Left= BtnLocation.Left
   lblLocation.Top= BtnCodigos.Bottom
   lblLocation.Width= BtnLocation.width
   lblLocation.Height= 24dip
   
   
   'Iconos Share
   ImTwitter.Width= 0.45*IconSize
ImTwitter.Top= lblCodigos.Top+lblCodigos.Height + MargenV * 2
ImTwitter.height =0.45*IconSize
ImTwitter.Left = imVer.Left  - ImTwitter.Width - 0.20 * ImTwitter.width

ImFacebook.Width= 0.45*IconSize
ImFacebook.Top= lblCodigos.Top+lblCodigos.Height + MargenV * 2
ImFacebook.height =0.45*IconSize
ImFacebook.Left = ImTwitter.Left - ImFacebook.Width - 0.4* ImFacebook.width

imShare.Width= 0.45*IconSize   
imShare.Top=lblCodigos.Top+lblCodigos.Height + MargenV * 2
imShare.height= 0.45*IconSize   
imShare.Left=imVer.Left +  0.20 * ImTwitter.width

ImWifi.Width= 0.45*IconSize   
ImWifi.Top=lblCodigos.Top+lblCodigos.Height + MargenV * 2
ImWifi.height= 0.45*IconSize   
ImWifi.Left=imShare.Left + ImWifi.Width+  0.40 * ImWifi.width

And theese are the results in my different devices:
Hay can i put the label text size to be the same size in all of them i mean, above the sandwich icon in tablets the label is like 1/3 wide of the image of the sandwich but in the mobile phone its like 2/3 wide. and the text looks smaller in tablets in comparison to the screen than in the phone...
How can i fix it??
Any idea??
thanks!!

Tablet 10.1"
148n6on.png

Tablet 7"
6ensch.png

Samsung Galaxy Express II
25akwm0.png
 

Cableguy

Expert
Licensed User
Longtime User
Yourssue is related to screen resolution, different devices, even if they have the same screen width and height, can have different resolutions (ie 72dpi,96dpi,etc). Font sizes are DPI dependat. The best way to ensure your text size, is to adjust your font size to your label height, measuring the "physical" size...
Take a look at the canvas object, there is a method to obtain a given string's physical height, depending on the font, and font size.
It shouldn't be to difficult to create a loop to get the desired font size
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
Hay can i put the label text size to be the same size in all of them
What exactly do you want !
The text size in your 3 devices IS the same, you defined TextSize = 16 !
As the dimensions of the icons on a 10'' screnn a double of those on a 5'' screen the text looks small on the big screen.
If you want the text proportional to the screen size you must calculate the ratio between the referenc screen size and the real screen size.
You are using AutoScaleAll at the beginning and change evrything after it, so in this case it is not useful becaus you change all the results from AutoScaleAll.
But, to change the TextSize you could use AutoScaleAll with an AutoScaleRate(1), and keep the other changes after it, not really elegant but possible.
 
Upvote 0

Juan Luis Lopez

Member
Licensed User
Longtime User
So i should put the autoscaleall sentence at the end of the script??

Erel im using only one variant.

Im trying and ill tell you the result
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
So i should put the autoscaleall sentence at the end of the script??
No.
It depends on how you want to manage the TextSize properties.
You haven't told us yet how you want the text sizes.
If you manage the text sizes in the script you can uncomment AutoScaleAll.
 
Upvote 0

Juan Luis Lopez

Member
Licensed User
Longtime User
Ok what i want is that the text look proportional in all devices. I use my galaxy express to test the apps. I use percentages to set positions and sizes of the controls. What i see is that te controls resize well because i use percentages of the screen size so they look proportional i nall devices. But the text size doesnt resize. What i want is that if my sandwich icon height is 5 times the height of the text in my phone, in my tablet it should be the same proportion.

Understand me? Sorry for my english
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
Understand me?
Yes, that's what I suspected, but your explanation is now different from the first post (... same size ...) and the reason why I asked it again to be sure that this is what you want.

What is the screen size of your reference layout ?
Use this in the Script:
B4X:
'AutoScaleAll     ' uncomment AutoScaleAll
ReferenceSize = 5
TextSizeRatio = ActivitySize / ReferenceSize
'
'
lblPinchos.TextSize = 16 * TextSizeRatio
You need to replace 5 by the screen size (in inches) of your reference layout.
And multiply the TextSize properties of the other views.
 
Upvote 0

Juan Luis Lopez

Member
Licensed User
Longtime User
B4X:
Sub EnBaseAlGalaxy(Size As Double) As Int
Dim RealInches As Double
Dim BaseInches As Double
Dim Ratio As Double
RealInches= GetDeviceLayoutValues.ApproximateScreenSize
BaseInches=4.589389937671455
Ratio = RealInches/BaseInches
Return Size * Ratio
End Sub

Now I use this to resize textsizes in other devices to look like the same proportion as in my Galaxy phone.
its quite accurate . thanks klaus!
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
You should use
Sub EnBaseAlGalaxy(Size AsDouble) As Float
instead of
Sub EnBaseAlGalaxy(Size AsDouble) As Int
because TextSize is a Float variable.

I think that BaseInches = 4.6 would be enough :).
 
Upvote 0
Top