View issues with v2.20

S

sconlon

Active Member
Licensed User
Longtime User
I've just installed v2.20 with the intention of replacing most of my designer scripts (in which I set view sizes and positions using % values) with the new Autoscale feature. So I tried it on one simple layout which has a panel (pnlmenu) that fills the screen and a number of buttons and labels as child views. I removed my entire designer script and replaced it with the following

AutoScaleAll
pnlMenu.SetLeftAndRight(0,0)
pnlMenu.SetTopAndBottom(0,0)

When I compiled and ran the project my screen was blank except for the pnlmenu and two buttons at the top. I should add that I have all views visible in the designer. I have just the standard variant (320 x 480) and am running on a Samsung Galaxy S2 (480 x 800). I tried putting the autoscaleall after the set instructions as I was not sure which should go first but it made no difference.

Any ideas what could be wrong?
 
Sort by date Sort by votes
S

sconlon

Active Member
Licensed User
Longtime User
Yes indeed. Should I use 100%x and 100%y for right and bottom or is it better to use 320 and 480 dip?
 
Upvote 0

NJDude

Expert
Licensed User
Longtime User
sconlon said:
Yes indeed. Should I use 100%x and 100%y for right and bottom or is it better to use 320 and 480 dip?
Click to expand...

If you want to scale a view to fill the screen regardless of size then you do this:
B4X: 
AutoScaleAll
pnlMenu.SetLeftAndRight(0dip, 100%x)
pnlMenu.SetTopAndBottom(0dip, 200dip)

The code above will scale the view to fill the screen HORIZONTALLY regardless of size with a height of 200dip, now, if you want the view to fill the screen horizontally AND VERTICALLY regardless of size then you you something like this:
B4X: 
AutoScaleAll
pnlMenu.SetLeftAndRight(0dip, 100%x)
pnlMenu.SetTopAndBottom(0dip, 50%y)

The code above, will create a view that it will have a height of 50% the size of the screen, regardless of the size of the device's screen

Now, by doing this:
B4X: 
AutoScaleAll
pnlMenu.SetLeftAndRight(0dip, 320dip)
pnlMenu.SetTopAndBottom(0dip, 480dip)

That will create a view that is PROPORTIONALLY scaled to the size of the screen (in percentages).

To better understand is best to play with these values on the designer and seeing the results on the device, it might seem confusing but it's not once you understand the mechanics, but let me stress, that is it better to see it in action.
 
Upvote 0
S

sconlon

Active Member
Licensed User
Longtime User
Thanks guys for the clear explanations. I also have some layouts that have a scrollview which I fill in code with row of values contained within panels. I guess the scrollview will be scaled by autoscale but what about the code-added panels? Is it possible to scale those?
 
Upvote 0
S

sconlon

Active Member
Licensed User
Longtime User
Not sure how I can do this. Within the code I add a full width scrollview with an initial height of about 70%x. I then add an outer panel in the scrollview and into this panel I add a variable number of 'rows' consisting of labels within a panel. The outer panel may extend higher than the scrollview but if not I adjust the height of it and add buttons immediately below it. (I think I took the code from an example that you posted some time ago).

For the row panels and labels I could add invisible views in the designer and use these to set the heights, widths and text sizes of the real ones but since the scrollview and outer panel heights are variable how can these be scaled or maybe I'm just being stupid here!
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
You can calculate the scale factor used in the AutoScale function.
Then for the views you add in the code you can define the Left, Top, Left, Right and when needed the TextSize properties with the values for the 'standard' layout and multiply these by the calculated scale factor. This will do exactly the same as the AutoScale function from the Designer.

Best reagrds.
 
Upvote 0
S

sconlon

Active Member
Licensed User
Longtime User
Thanks, that sounds just the thing.

I have noticed another thing which is a bit puzzling. In the designer I use a 320x480 variant and have a panel (pnlmenu) that fills the screen. At the top left I have a label that I have defined as 320dip wide and 50dip in height. When I insert the below in the All variants script

AutoScaleAll
pnlMenu.SetLeftAndRight(0,320dip)
pnlMenu.SetTopAndBottom(0,480dip)

and run the script this top label seems to extend about 3dip beyond the right edge of pnlmenu and a few buttons that I have in this panel seem also to move a bit to the right. In fact when I toggle between the Main and Designer scripts tabs every view on the layout seems to move slightly. Then when I install to my 480 x 800 phone the top label runs off the right edge and the other views are effected similarly. What gives?
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
What exactly do you expect with these two lines ?
B4X: 
pnlMenu.SetLeftAndRight(0,320dip)
pnlMenu.SetTopAndBottom(0,480dip)
Your code set the width to 320dip and the height to 480dip on any screen.
Is this what you expect ?

If you want the panel cover the whole screen then you should use
B4X: 
pnlMenu.SetLeftAndRight(0,100%x)
pnlMenu.SetTopAndBottom(0,100%y)
If you want the panel autoscaled but centered on the screen you should use
B4X: 
AutoScaleAll
pnlMenu.HorizontalCenter = 50%x
pnlMenu.VerticalCenter = 50%y
Best regards.
 
Upvote 0
S

sconlon

Active Member
Licensed User
Longtime User
I was going on the advice offered by NJDude earlier in this thread where he wrote that by using

AutoScaleAll
pnlMenu.SetLeftAndRight(0dip, 320dip)
pnlMenu.SetTopAndBottom(0dip, 480dip)

That will create a view that is PROPORTIONALLY scaled to the size of the screen (in percentages). I did think that I should use 100%x and !00%y but decided to take the advise of someone more expert than me.

I have now tried

AutoScaleAll
pnlMenu.SetLeftAndRight(0dip, 100%x)
pnlMenu.SetTopAndBottom(0dip, 100%y)

and it doesn't seem to make much difference. However, when I put the autoscaleall at the end it seems to scale properly. Which is correct? And why when I run the script should the designer view change anyway?
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
Sorry, but this is wrong.
As the two lines are after AutoScaleAll, pnlMain will be set to a width of 320dip and a height of 480dip !

Best regards.
 
Upvote 0
S

sconlon

Active Member
Licensed User
Longtime User
So, just to clarify, I should set the necessary view sizes including text sizes before I insert the Autoscaleall line as this will then calculate the correct dimensions for the device on which the app is running. Can I ask also if it makes a difference if you have the activity set to use the full screen and/or include a title as this obviously reduce the size of the screen available to the activity.
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
So, just to clarify, I should set the necessary view sizes including text sizes before I insert the AutoScaleAll line ...
Click to expand...
It depends on what you mean with this.
Set the positions and sizes of the Views correctly in the 320 x 480 layout and use AuoScale to adapt the views to the device size and if necessary adjust some views afterwards.
If you already have adjusted the positions and sizes of the Views with %x and %y for different screen sized you should not use AutoScale because if you add AutoScale after this it would strech the Views more.

... the AutoScaleAll line as this will then calculate the correct dimensions for the device on which the app is running.
Click to expand...
AutoScaleAll does the following:
- It calculates a scaling factor with the formulas below:
B4X: 
Delta = ((100%x + 100%y) / (320dip + 430dip) - 1)
Rate = 0.5 'value between 0 to 1. 
Scale = 1 + Rate * Delta
- Then it applies this scaling factor to all Views and the TextSize when relevant like:
B4X: 
View.SetLayout(View.Left * Scale, View.Top * Scale, View.Width * Scale, View.Height * Scale)
If View Is Label Then 'this will catch ALL views with text (EditText, Button, ...)
  Dim lbl As Label = View
  lbl.TextSize = lbl.TextSize * Scale
End If
Depending on the Rate value the Views will be streched more or less.
Streching with %x and %y can look too streched on big screens so with AutoScale you can play with the rate value.
Rate = 0 no stretching
Rate = 1 almost similar to %x / %y

Can I ask also if it makes a difference if you have the activity set to use the full screen and/or include a title as this obviously reduce the size of the screen available to the activity.
Click to expand...
It makes a small difference because the reference value of 430 in the above formula should be 455 or 480.
That means with full screen the original layout will be streched a bit up to 7% with Rate = 1.

Best regards.
 
Upvote 0
S

sconlon

Active Member
Licensed User
Longtime User
It does sound very complicated but essentially I should put the overall size definitions based on %x and %y in the All variants script and then check how the layout looks on each screen variant and possibly make some adjustments in the variant specific script.
 
Upvote 0
You must log in or register to reply here.
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…