Android Tutorial Designer Scripts & AutoScale Tutorial

Attached you find a pdf tutorial about Designer Scripts & AutoScale.
It includes Erels Designer Scripts Tutorial and a new AutoScale Tutorial.
It's an extract of two chapters from the next Beginner's Guide edition.

The pdf document has been removed, it is outdated.
The Beginner's Guide is updated with newer functions.

Three examples are explained:
1) a simple example with only one layout file and one layout variant AutoScaled. Showing also the influence of the rate factor.

2) the same example but with two layout variants portrait and landscape AutoScaled.

3) a more advanced example with several activites showing:

• Main Main screen with an image and button to select different examples.
  The image size is adapted to the screen size.
• Setup screen With a specific layout.
  This example uses the setup layout of the GPSExample program.
  The setup is a ScrollView with a Panel and several smaller Panels
  on it. Depending on the screen width there are one or two columns.
• About screen with a specific layout.
• DBWebView Database shown in a WebView using DBUtils.
  With a new DBUtils module allowing to set the TextSize property.
• DBScrollView Database shown in a ScrollView.
  The views are scaled in the code.
• Keyboard a numeric keyboard example.
  The key views are added in the code and scaled using the
  Scale module.
• Scale module allows to scale views added in the code based on the same equations as those used in the Designer Script AutoScale.
  Functions:
  • GetScale Gets the scale with the Rate value set with SetScaleRate
  • SetScaleRate(Rate) Sets the Rate value
  • GetDevicePhysicalSize Gets the physical size of the device in inches.
  • ScaleView(View) Scales the given View with the current scale
  • ScaleAll(Activity) Scales all the views of the given Activity or Panel
    with all their child views.
  • SetReferenceLayout allows to set another reference layout than the standatd one.
    Example: Scale.SetReferenceLayout(800, 1280, 1)
    sets 800 * 1280 * 1 layout as the reference layout
    In this case the ScaleRate has no influence.
  • The module supports also ScrollView2D, but if you don't use it you should comment out the relevant lines in ScaleView and ScaleViewDS routines.

Best regards.

EDIT: 2013.09.18
A new version of the AutoScale Module AutoScaleExample7 is available below.
Added SetReferenceLayout as reported in post #31
Added HorizontalScrollView

www.b4x.com/android/files/DesignerScripts_AutoScale.zip

 

[incendio]

Try to use Scale.SetRate(1).
This will strech the layout according to the new screen size.

No avail.

I end up with setup TextSize & Width manually and reposition its position with Scale.SetRight.

 

[LucaMs]

No avail.

I end up with setup TextSize & Width manually and reposition its position with Scale.SetRight.

@incendio can you try this my example, please? Thank you.

 

[JAVIERGARCIA]

Hey there,
Copy this code to try another program, but always gives me a failure verticalcenter2.
I do not understand happens
You can help me,
Thank you

 

[klaus]

Acording to the error message you use: Scale.VerticalCenter2(panel1)
This is wrong, VerticalCenter2 needs three parameter !

Explanation of Scale.VerticalCenter2(v As View, vTop As View, vBottom As View) means
Centers View v between two other views.
vTop is the view on top of v and vBottom is the view below v.

 

[JoseJose]

Attached you find a pdf tutorial about Designer Scripts & AutoScale.
It includes Erels Designer Scripts Tutorial and a new AutoScale Tutorial.
It's an extract of two chapters from the next Beginner's Guide edition.

Three examples are explained:
1) a simple example with only one layout file and one layout variant AutoScaled. Showing also the influence of the rate factor.

2) the same example but with two layout variants portrait and landscape AutoScaled.

3) a more advanced example with several activites showing:

• Main Main screen with an image and button to select different examples.
  The image size is adapted to the screen size.
• Setup screen With a specific layout.
  This example uses the setup layout of the GPSExample program.
  The setup is a ScrollView with a Panel and several smaller Panels
  on it. Depending on the screen width there are one or two columns.
• About screen with a specific layout.
• DBWebView Database shown in a WebView using DBUtils.
  With a new DBUtils module allowing to set the TextSize property.
• DBScrollView Database shown in a ScrollView.
  The views are scaled in the code.
• Keyboard a numeric keyboard example.
  The key views are added in the code and scaled using the
  Scale module.
• Scale module allows to scale views added in the code based on the same equations as those used in the Designer Script AutoScale.
  Functions:
  • GetScale Gets the scale with the Rate value set with SetScaleRate
  • SetScaleRate(Rate) Sets the Rate value
  • GetDevicePhysicalSize Gets the physical size of the device in inches.
  • ScaleView(View) Scales the given View with the current scale
  • ScaleAll(Activity) Scales all the views of the given Activity or Panel
    with all their child views.
  • SetReferenceLayout allows to set another reference layout than the standatd one.
    Example: Scale.SetReferenceLayout(800, 1280, 1)
    sets 800 * 1280 * 1 layout as the reference layout
    In this case the ScaleRate has no influence.
  • The module supports also ScrollView2D, but if you don't use it you should comment out the relevant lines in ScaleView and ScaleViewDS routines.

Best regards.

EDIT: 2013.09.18
A new version of the AutoScale Module AutoScaleExample7 is available below.
Added SetReferenceLayout as reported in post #31
Added HorizontalScrollView

www.b4x.com/android/files/DesignerScripts_AutoScale.zip

"Attached you find a pdf tutorial about Designer Scripts & AutoScale."

==>Please, where is this PDF tutorial about Designer Scripts & AutoScale attached?

 

[klaus]

Sorry, it's no more included, Designer Scripts & AutoScale.pdf is outdated.
You should look in the Beginner's Guide which contains everything that was in the Designer Scripts & AutoScale.pdf document.
The Beginner's Guide has been updated several times including newer function.

I have changed the text in the first post.

 

[stanmiller]

What's missing from this thread is the theory of operation behind the scaling module.

"For smartphone screens (< 6'') the views are scaled according to the screen width and the screen height without the rate factor. For bigger screens the scale factors are modified with the rate factor. For the big screens a rate value of 0 means no scaling and a value of 1 is equivalent to a scaling with %x and %y."

You can find those details and more in the first post of Klaus's sister thread here:

AutoScale Code Module
https://www.b4x.com/android/forum/threads/autoscale-code-module.23750/#content

 

[klaus]

The explanation in your post is valid only for the AutoScale Code Module, not for the AutoScale function in the Designer !

As written in the first post:
The pdf document has been removed, it is outdated.
The Beginner's Guide is updated with newer functions.

You find the theory of operation behind the scaling module in chapter 8.12 AutoScale in the B4A Beginner's Guide.

When this thread and the pdf document mentioned in the first post were written, the Anchor function in the Designer didn't exist.

 

[stanmiller]

The explanation in your post is valid only for the AutoScale Code Module, not for the AutoScale function in the Designer !

Indeed. The AutoScale feature of the designer is well documented in the guide.

As a tutorial, new B4A developers trying their hand at developing for multiple display sizes will likely visit here first. The assumption in the first post is that readers are familiar with your AutoScale Code Module included in the attached AUTOSCALEEXAMPLE7.ZIP.

But there is no reference to where this code module comes from or much detail about what it does. The SCALE.BAS in that project is great work and a valuable learning tool going far beyond the function it performs. For example, the concepts of always thinking in dips, device scale, aspect ratio, and view tree traversing are all there.

More importantly, unlike the Designer's AutoScale you can modify the behavior of SCALE.BAS, as we did, to adjust for the "inside/out" scaling needed when the user changes the display font.

The challenges of dynamic font sizing are discussed in this thread.

Get size of system-font in use
https://www.b4x.com/android/forum/threads/get-size-of-system-font-in-use.28065/

I'll post our edits to SCALE.BAS and example usage in a new thread.

 

[Guimarães]

Mauro - Brazil
What formula to calculate the position and size of the elements. Xperia C

 

[klaus]

Sorry, but I don't understand what exactly you want to do ?

 

[Guimarães]

I created for my wife, an application to create grocery shopping lists, stock control and maturity of products. My family want a copy. I wonder if there is a calculation for n, I can include in the script.
Eg: ImageTodos left = 5, top = 34, whidth = 100, height = 100.
ImageTodos.SetLeftAndRight (n %x, n %x)
ImageTodos.SetTopAndBottom (n y% n %y)

Mobile Xperia C - 5 inch screen, resolution 540 x 960 pixel, 220 ppi.

I used Google translator

 

[Guimarães]

Sir,
Installed AutoScale Example7; when running displays the message:
"Unfortunately, AutoScaleExample7 has stopped."

 

[klaus]

It's impossible for me to know what happens.
From your screenshot, there is no compiler error.
It seems that you are using an emulator.
Are you testing the program in Debug or Release mode ?
What exactly happens when you run the program.
Can you put a breakpoint at the beginning in Activity_Create and walk step by step through the program to see where the program stops.