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

 

[gulliver]

Thanks Klaus.
Downloaded.
New to B4A, I'm learning a lot of things thanks to the forum.

 

[moster67]

Thank you Klaus! Very informative.

:sign0098:

 

[ta1dr]

many thanks :sign0098:

 

[njesus]

This is one of the hardest topic to master, so to much help is never enough! Thanks!

 

[njesus]

Just one thing though... Example 3 refuses to compile, complains about scrollview2d libary missing. Where's that library? It isn't mentioned in the tutorial, as far as I could understant. Thanks for any info! :sign0104:

<--- edit
nevermind, it's here: http://www.b4x.com/forum/additional-libraries-classes-official-updates/19268-lib-scrollview2d.html
edit --->

 

[CapReed]

I've been trying all day to finish my first application "serious" multiple screens trying to balance the look. :BangHead: Beginning to be desperate, I think these examples are coming blast.:icon_clap:

Many many many thanks!:sign0098:

 

[MLDev]

Thanks klaus!

 

[Harris]

Excellent Tutorial!

This is the first time I have understood the relationship with AutoScaleRate and AutoScaleAll.

I like the idea if views don't fit the screen height, slap them on a panel in a new bal then add that to a scrollview. This avoids having to re-position them from landscape to fit portrait (one nice column) - or mess around with panels (of views) cluttering up an activity.

Your text explanation and code examples pretty much clarify how the job of one variant fits all is accomplished. Now, anybody who questions how to make their app fit all devices MUST READ THIS!

Your Scale code module is puzzling me. In the ScaleAll sub, you call ScaleAll again if, for example, the view is a panel??? You did state The chapter is dedicated for more advanced users.
Do you recommend using this module for our scaling purposes? I see that only the keyboard used the scaleall routine (where no designer script was created).

One Note: DB Scroll example will increase the size of the activity each time the screen is rotated (or the activity is called).


Thanks many...

:sign0188:

 

[klaus]

I'm glad that you find the tutorial useful .

Your Scale code module is puzzling me. In the ScaleAll sub, you call ScaleAll again if, for example, the view is a panel???

Yes, to also scale the child views of the panel the routine calls itself (recursion).

You did state The chapter is dedicated for more advanced users.

The first idea was to show only the third example but with Erel we thought that it could seem complicated for beginners so I added two simple examples.

Do you recommend using this module for our scaling purposes? I see that only the keyboard used the scaleall routine (where no designer script was created).

The AutoScale function works only in the Designer! That means that all views added in the code are not autoscaled. To also have the possibility to autoscale views added in the code I wrote the Scale module. The functions do the same as those in the Designer. You can also use these routines to autoscale views added in the Designer but then you must not autoscale them in the Designer. This module will progress in the near future.

One Note: DB Scroll example will increase the size of the activity each time the screen is rotated (or the activity is called).

Thanks for pointing this out. I saw it too but after having posted the tutorial. Will be amended.

Best regards.

 

[Roger Garstang]

Excellent. I think I understand the concept better now...especially after having a couple tablets that didn't have Font Scaling, so everything appeared small.

This brings about a couple questions still remaining after reading though:

1. What if the device has Font Scaling? If the device is already scaling the fonts then this scaling them too would mess the sizes up. Seems like if views are close to each other...even when docked that they could still grow into/on top of each other. It would be cool if somehow this was combined with an Android Relative layout and somehow there was a way to specify size in EMS.

2. The formula for Delta still confuses me. Combining Width and Height with just a + seems like it isn't getting the true values. Seems like that would be off on some devices when comparing between those with say 4:3 ratio and those with 16:9/16:10. Might make more sense to have a DeltaW and a DeltaH to have a more accurate growth. Or maybe at least calculate both then average the two for a more accurate ratio.

 

[appie21]

Hi Klaus

Thanks for the tutorial

In tutorial 2 i need you help

if i fill in some text in the texboxes and i rotate the screen the data in the textboxes are lost.. How can I fix this?

 

[Erel]

if i fill in some text in the texboxes and i rotate the screen the data in the textboxes are lost.. How can I fix this?

You can use StateManager: http://www.b4x.com/forum/basic4andr...ging-android-applications-settings-state.html

 

[badal405]

Thank you very much klaus. It's really very useful. May Allah bless you.

 

[jeffnooch]

OK...so i started out trying to learn all this designer script stuff...i was able to manually create a designer script based off a device that was 1024x720 with a scale of 1...i also have tweaked some of the variant specific scripts...for smaller devices such as the nexus 7 (961x552x1) and larger devices such as the nexus 10 (1280x752x1)...

the things that needed the most tweaking were the font sizes...so i started searching for better ways to handle it and wound up here...

here are my questions:
1) all the scaling seems to be based off a phone resolution of 320x480...so does that mean i have to create my design at that resolution and portrait so everything works properly? because my issue is that what i created will be tablet only and landscape only...i'm struggling how to make it work with the autoscale...
2) i assume the autoscale is based off of the initial font size and view size from the designer?
3) I also have panels that are created from code...i assume i could use example 3 scale code to handle the panels?
4) i tried to set a variable up in the variant specific script .... eg fontscale = .9 then used txt1.textsize = txt1.textsize * fontscale ... but that didn't seem to work...
5) is there anywhere that lists all the various tablet sizes?
what i have access to is
1024x720 (Coby)
1280x752 (Nexus 10)
1024x600 (Kindle Fire)
961x552 (Nexus 7)
6) how do the variants work...eg...if i had a variant for the nexus 7 at 961x552 (a 7 inch tablet) and the coby at 1024x720 (a 9 inch tablet) and someone with a kindle fire at 1024x600 (a 7 inch tablet) loads the app what variant would it load?

thanks in advance for any help

 

[Gary Miyakawa]

I'm working with Designer but struggling with the following..

I have a panel that is 80% wide and 15% height.. I'd like to center an image in the middle of that panel. Is there a good way to get it to center "automatically" ? I've tried the VerticalCenter = Height/2 but that doesn't handle the rotation to landscape...

What am I missing ?

Thank,

Gary M

 

[klaus]

In the DesignerScripts:

Image.HorizontalCenter = Panel.Width / 2
Image.VerticalCenter = Panel.Height / 2

The Image should have the Panel as it's parent view.

Best regards.

 

[Chelu]

Text Scaling

I have a problem with text scaling.
As I understand it, using these functions, the text will scale roughly the same size on a tablet of 10.2 "and 1280 x 800 on a smartphone 5.5" 1280 x 720, when the actual area available is much greater.

I have serious problems with this. My app uses a lot of text and I can not make it look good on all devices.

:sign0085:

 

[klaus]

How do you scale your layouts ?
Without knowing what you are doing we can't give you concrete advices !
Using AutoScale scales also the text size. The scaling depends on the value of the AutoScaleRate.

Best regards.

 

[Chelu]

I use %x and %y to climbing the layout.
The text is based on a stepped function that depends on the resolution, much like Delta tutorial.
But since this does not seem to scale well on all devices have added to the formula a factor to consider lv.scale
But still can not get the scaling of the sizes of the text works well in all cases.