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

 

[little3399]

 

[klaus]

No.
The value of 430dip takes into account 25dip for each of the two top lines (notification and title)
480 -2 * 25 = 430

 

[little3399]

Oh,I see , Tks!

 

[ilan]

i have tried something and i dont know if its really a good way to do it so i will ask you profis

in the designer i have some variants with different phonesize like all of you got

no i create a panel and put all views in this panel and panel.center set to 50%x and 50%y

no i try to zoom the panel according to the screensize and i do it like this

first i create a new layout Variant: 800x480x1.35

now i put this in the designer code:

If ActivitySize < 3.5 Then
Autoscalerate(1.2)
Else If ActivitySize < 3.8 Then
Autoscalerate(0.7)
Else If ActivitySize < 4.5 Then
Autoscalerate(0.5)
Else If ActivitySize < 5.5 Then
Autoscalerate(1.5)
Else
Autoscalerate(1.2)
End If

AutoScaleAll

Panel2.VerticalCenter = 50%y
Panel2.HorizontalCenter = 50%x

and what i get is a perfect solution in the designer when i lock the views but i dont know if its really the right thing to do

what do you say?

 

[Erel]

It is not a good solution. AutoScaleRate should be between 0.2 to 0.5. Larger values means that you are misusing the auto scale feature.

You should also work with normalized variants.

 

[klaus]

Did you have a look at these chapters
5.4 Supporting multiple screens - tips and best practices
8.10 Anchors
8.11 AutoScale
in the Brginner's Guide ?

 

[ilan]

no i have not klaus

i will download and check it out

but the question is if its working like i did and i get the views zoomed in and out depends on the screensize so why not use it like this??
do you see any reason why not to do it?

thank you

 

[klaus]

What version of B4A do you use ?
The AutoScale function has changed since B4A version 3.5.
How many variants do you have ?

What is this Variant: 800x480x1.35 for ? Strange density.
Standard densities are 0.75, 1, 1.5, 2 and 3.
As Erel already told you, AutoScaleRate should be between 0.2 to 0.5 .
A scale rate of 1 is similar (not equal) to 100%x and 100%y.
The scale rate values you are using look very strange to me, there is no logic behind.

Is your panel in a separate layout file ?
I'd suggest you to use the standard layout and use AutoScale.

 

[ilan]

thank you klaus for you support

yes i am using b4a 3.5
i dont know why its working but it does
i will post my project here later when i get home and if you have time you could take a look

i am using only one layout and all vies i put in my panel that is transparent and now i am only zooming everything depending on the screen size

the game was tested 7" tablet and small phones and the result is perfect

this is the game: https://play.google.com/store/apps/details?id=www.sagitalhex.net

the only thing that is not scaled is the text that i change his textsize during playing but other text that are not changed are also scaled perfectly

 

[klaus]

the only thing that is not scaled is the text that i change his textsize during playing but other text that are not changed are also scaled perfectly

You could define a scale factor for the text sizes you change in the code.
I tested the program on both my devices (Asus TF700 10'', Sony xperia z1 5'') and it looks OK.
One minor point, the first screen is in portrait and the game is in landscape ?
From what I have seen and as your layout for bigger screens is 'simply' streched, I am convinced that you could do everyting with one layout and AutoScale.

 

[ilan]

i will change the first screen to landscape

From what I have seen and as your layout for bigger screens is 'simply' streched

yes its only stratching (zooming) the views depends on the screensize so its very simple to do it
i use the current layout of my phone then i fit everything i would like to look in every screensize now i make the testing

put the code i post above and change the scaling rate until i get the result i want by changing the variant in the designer

no need to locate the views no confused calculation only 5 lines of code and it works

I am convinced that you could do everyting with one layout and AutoScale.

i have tried only to use autoscale but it not doing really what i want to do the views in big screens are very small and in small screen its getting out of the screen you see only parts of the images

 

[LucaMs]

"From what I have seen and as your layout for bigger screens is 'simply' streched"

I do not think of making a mistake by saying that in 90% of cases this is what you want to achieve. For this reason I believe that the percentages are essential and sufficient.

It is true that this is not the best use of the space of the tablet 10", but I think it is better to develop different applications for smartphones and tablets. They are distinct objects. It is almost like trying to have the same application on a smartphone and a PC!

 

[klaus]

i have tried only to use autoscale but it not doing really what i want to do the views in big screens are very small and in small screen its getting out of the screen you see only parts of the images

What base layout variant did you use, and what B4A version ?
If you use a bigger layout variant than the standard one you may have trouble on smaller screens when downscaling.
If you use the 'standard' variant 480 / 320 /1 then it works.

But using %x and %y is also a solution in your case.
You could also try the AutoScale module.

 

[klaus]

It is true that this is not the best use of the space of the tablet 10", but I think it is better to develop different applications for smartphones and tablets. They are distinct objects. It is almost like trying to have the same application on a smartphone and a PC!

Yes and no, might depend on the kind of application, I had this approach in one of my applications.
I began with a tablet version only.
Then I wanted it also on smartphones and developped a separated project.
Then, I found that managing two projects is not optimal, so I tried to merge both and got it with not that many difficulties.
But with different layout files for tablets and phones, and almost everything is in the Main module playing with panels because on tablets two panels are displayed in landscape at the same time and only one on the phones in portrait.

 

[LucaMs]

Yes and no, might depend on the kind of application, I had this approach in one of my applications.
I began with a tablet version only.
Then I wanted it also on smartphones and developped a separated project.
Then, I found that managing two projects is not optimal, so I tried to merge both and got it with not that many difficulties.
But with different layout files for tablets and phones, and almost everything is in the Main module playing with panels because on tablets two panels are displayed in landscape at the same time and only one on the phones in portrait.

But then you will also need to manage the second panel as appropriate for smartphone or tablet; I do not think you've solved all just using different layouts.

 

[klaus]

But then you will also need to manage the second panel as appropriate for smartphone or tablet

Of course yes !
But it was much easier than what I thought when I begun.

 

[LucaMs]

I'm going backward instead of forward!

So far I was using exclusively portrait and IncludeTilte = True

Now, with undefined and False:

I set 2 variants with the characteristics of my smartphone:
480x800 Scale 1.5
800x480 ' '

I have a "thin" panel at the bottom.

Two problems:
1) when I open the designer, the panel is beyond the lower edge but when I select the second variant and then the first one again, it goes back to its place!
2) using:
Scale.SetReferenceLayout (480, 800, 1.5)
Scale.ScaleAll (Activity, True)

the panel is not in the right position; perhaps in that which corresponds to the opening of the designer.

can I ask... why?

 

[ilan]

ok i will put my project here without the coding and some changes to the images (copyright )

now if you open the designer and go to designer script where the views are locked and now if you change the layout in the abstract designer you will
see that its scalling alsmost perfectly...

file: http://www.sagital.net/hxtest.rar

 

[klaus]

@LucaMs
1. This seems to be a bug in the AbstractDesigner.
When you load the Designer the AbstractDesigner shows the screen with title.
As soon as you change the variant the screen is updated.

2. Unfortunately the Scale module doesn't work well with FullScreen nor without Title, it assumes that both are active.

 

[klaus]

@ilan12041981
I modified a little bit the editor2 layout with one variant 480/320/1 and AutoScaleRate(0.85).
To make them 'better' looking it would need to rearrange the different views, but this would have taken too much time for testing.
The layouts don't look that bad in UICloud exept the 2.8 screen.

Attached the modified editor2.bal file, the whole project is too big with all the pictures.