New feature: AutoScale and other new designer script keywords

Erel

B4X founder
Staff member
Licensed User
Longtime User
V2.20 will include the following new designer script keywords:

- Min and Max - same functionality as the equivalent standard keywords

Scaling keywords:


As explained in this thread: http://www.b4x.com/forum/basic4andr...ing-multiple-screens-tips-best-practices.html in most cases you will want to scale the views size and text size based on the device physical size. A naive solution for the size is to use percentage when specifying the dimensions. However the result is a "stretched" UI which in most cases looks bad on larger devices such as tablets.

The scaling method suggested in the above link can now be easily applied with the following three keywords:
- AutoScale - Scales a specific view (left, top, width, height and text size are scaled).
- AutoScaleAll - Scales all views
- AutoScaleRate - Sets the scaling rate (see the above link for more information)

Note that AutoScale methods implement the formula internally. It is no longer required to build it in the script.

The recommended way to adjust your UI is:
1. AutoScaleAll
2. Adjust the views location as required
3. Use SetLeftAndRight and SetTopAndBottom on the views that should fill the available space)
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
Does AutoScaleAll work on views that are added by code on run time and not designer?
No. Only designer views.

@junaidahmed, AutoScaleAll scales the views based on the device physical size compared to a standard phone size. You should create a base layout with the standard phone variant and use it instead (if you want to use AutoScaleAll).
 
Upvote 0

Inman

Well-Known Member
Licensed User
Longtime User
No. Only designer views.

So if I add a ScrollView using designer and then during runtime I add some views into the ScrollView via code, the AutoScaleAll will scale only the ScrollView and not the views inside it?
 
Upvote 0

gjoisa

Active Member
Licensed User
Longtime User
Is this code right ?
B4X:
'All variants script
AutoScaleAll 'uncomment to scale all views based on the device physical size.
txtid.SetLeftAndRight(2%x,64%x)
txtid.SetTopAndBottom(8%y,22%y)
txtres.SetLeftAndRight(2%x,64%x)
txtres.SetTopAndBottom(23%y,37%y)
GetKey.SetLeftAndRight(65%x,95%x)
GetKey.SetTopAndBottom(8%y,37%y)

If I type autoscalerate in designer script , This doesnot work .
 
Upvote 0

b2mvga

Member
Licensed User
Longtime User
AutoScaleRate

He Erel, GREAT JOB!

How I Use AutoScaleRate?

I use AutoScaleAll on my tablet 7" and works fine... very good!! my app resize to 70% of screen (before 30% only)

I try use AutoScaleRate in DESIGNER SCRIPTS to try resize for 100% os screen
and not works...

In DESIGNER SCRIPTS I use:

AutoScaleAll
AutoScaleRate(1)

Is correct?
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
AutoScale uses the formula below:
B4X:
delta = ((100%x + 100%y) / (320dip + 430dip) - 1)
rate = 0.3 'value between 0 to 1.
scale = 1 + rate * delta
AutoScaleRate(0.5) changes the rate value in the formula above from 0.3 to 0.5.
The default value is 0.3.

You should use AutoScaleRate before AutoScaleAll:
B4X:
AutoScaleRate(1)
AutoScaleAll
AutoScale(Button1) is equivalent to:
B4X:
Button1.Width = Button1.Width * scale
Button1.Height = Button1.Height * scale
Button1.Left = Button1.Left * scale
Button1.Top = Button1.Top * scale
Button1.TextSize = Button1.TextSize * scale
Best regards.
 
Last edited:
Upvote 0

b2mvga

Member
Licensed User
Longtime User
Ok Now!!

Thank You, Klaus!!

Now I use:

AutoScaleRate(0.7)
AutoScaleAll

And everityng works fine!!

Very happy now!
 
Upvote 0

kanaida

Active Member
Licensed User
Longtime User
I just noticed you said to use the base phone variant. Unfortunately I'm only making stuff for high-res devices. The best I've been able to do use use a negative value and got it working on a smaller device. What I'm not sure of is how I can make a formula to get the right AutoScaleFactor for all devices generically.

For example, my nexus 10 (my current dev variant) I need a AutoScaleRate = 0 to look right, but for my galaxy s4 (1080p) I need to use -1.9.
Is there a way I can automatically calculate that, or at least based on phone/tablet model just store good rates and pass them dynamically? I'm really just trying to support tablets and high res phones. Don't care about little screens because the layout wouldn't be usable without some pretty significant re-organizing of views that isn't a requirement in my case.
 
Upvote 0

imgsimonebiliato

Well-Known Member
Licensed User
Longtime User
Hi Erel,
I can't find Autoscale. Is in a particular library?
 
Upvote 0
Top