Wish Designer command to EXACTLY scale views positions and sizes

[tagwato]

Hi everybody,

I would like to suggest the inclusion of a new feature in B4A, which is to make possible the automatic scaling of a layout (bal) maintaining the aspect ratio of both the positions and the sizes of the views that were used in the Abstract Designer. Often what you want is simply to make all the views grow in proportion to the screen size. Today’s procedures to accomplish that are very cumbersome.

AutoScale / AutoScaleAll command in Designer is useful, but it is NOT a solution when we want to show, in real devices, the exact proportions of the views that were generated in Abstract Designer.

Yes, I've read some other posts about AutoScaleAll. There were comments saying that this command is not for this purpose. Precisely for this reason I am suggesting the inclusion of a specific feature for this, which could be a new command, perhaps called PercentageScaleAll or DeviceScaleAll, something like that.

Yes, I also read posts saying that big screens should be exploited better, so that an option like this one I am proposing wouldn’t be needed. I can’t agree with that, because often (very frequently) I faced situations when a feature like this was necessary.

Currently, to achieve a perfect scaling of all the views, according to the real size of the device screen where the app is running, the developer has to calculate the proportions of all the dimensions and positions of EACH component relative to the size of the screen.
This also requires a LOT of lines of script code in the Designer, such as:

'Variant specific script: 320x480,scale=1
Button1.Height = 9.30%y '100 * 40/430 <<-- 430 if there IS a title and NOT fullscreen
Button1.Width = 31.25%x '100 * 100/320
Button1.Top = 50%y - 9.30%y/2
Button1.Left = 50%x - 31.25%x/2

Label1.left = 7.5%x '100 * 24/320
Label1.Top = 5.58%y '100 * 24/430 <<-- 430 if there IS a title and NOT fullscreen
Label1.Width = 31.25%x '100 * 100/320
Label1.Height = 9.30%y '100 * 40/430 <<-- 430 if there IS a title and NOT fullscreen​

To better understand the problem, I added two projects. Both of them contains a layout with two variants, one for landscape and one for portrait.
The first one, _Test_AutoScale.zip just use the tradicional "AutoscaleAll" command in the script.
The second one, _Test_PercentScale.zip tries to accomplish the result we are wishing, but it demanded a lot of work. Notice that it was necessary to include several lines of script code in the specific area of each variant to achieve, in all simulated devices of the UI Cloud, an appearance similar to that shown in Abstract Designer. The results can be seen in "B4A UI Cloud-Script-percent-scaled.pdf" file.

On the other hand, the file "B4A UI Cloud-Without-AutoScaleAll.pdf" shows the screens of the devices simulated in the UI Cloud when not using script code in Designer. Also, "B4A UI Cloud-AutoScaleAll.pdf" file shows the appearance of the UI Cloud simulated devices when using AutoScaleAll. Notice that none of these solutions reach the goal of making the views fit to the screens in the exact proportion to their sizes and positions as in the Abstract Designer.

It would be nice to achieve the same results as those obtained with the scripts in the _Test_PercentScale project using just one command, since all calculations can be automated.

So the proposal or “The Wish” is [EDITED-april-05-2015]:

- Add a new command in Designer (perhaps PercentageScaleAll or DeviceScaleAll) which, when applied, automatically calculate the sizes and positions of each view relative to the screen size of the Abstract Designer and, at runtime, apply these proportions according to the actual size of the device screen being used.
OR
- Change the behavior of AutoScaleAll when using AutoScaleRate(1), so that it gives us, at runtime, an EXACTLY match of the UI layouts built in Designer, for any device (it is ALMOST there, as we can see in the Comparison.pdf below)

Notice that a feature like the one here proposed is not a problem for those who want to make a different use of big screens: they can create a specific variant for that purpose and simply make no use of such a command.

This wish aims to facilitate the developer's life, eliminating the need to make calculations and avoiding the inclusion of a large number of script command lines in the Designer.

 

[ilan]

hi,

i agree with you, there should be a function that scale all views to the screensize exactly how you did it when you created your app

the problems begins when you add views or text in code and not via designer (like CLV,ULV...)

in b4i i have solved the problem see here (and i am not using autoscaleall or anything in designer) and result is great..

you can use the same method in b4a, create a sub "Autoscaleviews" and getallviewsrecursive and change their location+size according to you screen size like in b4i

if you do it you must remove "Autoscaleall" in designer script else it wont work...

 

[klaus]

Did you have a look at the AutoScale Code Module ?
It does exactly what you expect in the code and scales also views addd in the code.

 

[Troberg]

I don't need this. I always use designer scripts for my layouts, so I have every control in an iron grip.

 

[tagwato]

Thanks guys for your replies.
It seems that I wasn't able to make my point clear in the first post.
Maybe what I was trying to say can be summarized as follows: The wish is that Designer could work as a real WYSIWYG editor, and that, at runtime, every view created in Designer shows up exactly how it was created, automatically scaled if necessary, in any real device.
Compare Test_AutoScale.zip and Test_PercentScale.zip projects above (uploaded today).
We would like to have the results of Test_PercentScale.zip without requiring a lot of scripts or additional coding (unfortunatelly, that was the case in this project).

The file "Comparison.pdf" below has some pictures of the results in real different devices.
The first picture shows what we created in Abstract Designer: exactly those layout variants arrangement is what we would like to achieve in any device, without coding or scripts.(or at least, with minimum coding: just a command like "PercentScaleAll", maybe).

 

[tagwato]

in b4i i have solved the problem see here (and i am not using autoscaleall or anything in designer) and result is great..

you can use the same method in b4a, create a sub "Autoscaleviews" and getallviewsrecursive and change their location+size according to you screen size like in b4i

if you do it you must remove "Autoscaleall" in designer script else it wont work...

Hi, Ilan,
Thanks for your interest.
I managed to adapt your code, but it did not work as expected in Basic for Android.
For some reason, each view's position and size, (v.Width and v.Height in your sub) appears in runtime as N times the original ones I've set in Designer, ALTHOUGH I have removed all script code.
It seems that it would be necessary to consider also the device scale (DeviceScale = 100dip/100, which I borrowed for Klaus AutoScale code module).
Well, I ended up with this subroutine, which more or less worked (needs some adjustments):

Sub ResizeViews

'////// Start resize all views to fit all screensize //////
'////// Remember: Do NOT use AutoScaleAll in Designer!! //////

Dim DeviceScale As Double
DeviceScale = 100dip / 100
Dim titleHeight As Int
Dim ratiox, ratioy As Float

'If Not (Activity.hasTitle) Then 'Hmmm... is there anything like that??
'titleHeight = 0
'Else
titleHeight = 25 'default title height for default layout
'End If

If Activity.Height > Activity.Width Then 'orientation is portrait
ratiox = Activity.Width/320/DeviceScale 'default layout width in Designer, portrait
ratioy = Activity.Height/(480-titleHeight)/DeviceScale 'default layout height in Designer, portrait
Else 'orientation is landscape
ratiox = Activity.Width/480/DeviceScale 'default layout width in Designer, landscape
ratioy = Activity.Height/(320-titleHeight)/DeviceScale 'default layout height in Designer, landscape
End If
Log ("ratiox = " & ratiox)
Log ("ratioy = " & ratioy)
'start resize all views
For Each v As View In Activity.GetAllViewsRecursive
If Not(v.Tag = "dontresize") Then 'dont resize me... (Designer)
v.Width = v.Width*ratiox
v.Height = v.Height*ratioy
v.Left = v.Left*ratiox
v.Top = v.Top*ratioy
End If
Next

'////// End resize all views ///////

End Sub

Anyway, if my wish doesn't come true I will use a code like that or the AutoScale module from Klaus.

 

[tagwato]

Did you have a look at the AutoScale Code Module ?
It does exactly what you expect in the code and scales also views addd in the code.

Nice work Klaus, I think this is the best option we have - until my wish comes true.

 

[tagwato]

Well, I worked a little with Klaus AutoScale Module, which is a great addition to B4A, but I still missed a few things.
So I ended up with this class, partially based on Klaus AutoScale Module and on Ilan's code, which met my needs.
Anyway, it is not the solution to my wish, but it has been useful in some projects, so I leave it available for those who want to test, improve, etc.
It may have some bugs, if you find, let me know, please.
The comments in the class are in Portuguese - sorry, I didn't have time to translate them.

 

[klaus]

Well, I worked a little with Klaus AutoScale Module, which is a great addition to B4A, but I still missed a few things.

What are you missig ?