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

 

[klaus]

Using %x and %y will not affect the text size.
You must define a scale factor depending on the physical sceen size and scale all texts.
Did you have a look at the AutoScale Code Module ?
In this module different equations are used.
Using a ScaleRate of 1 is exactly the same as %x and %y but the texts are scaled according to the physical screensize.

Best regards.

 

[mjtaryan]

Klaus, Example 3 generates a compiliation error and asks If a library has been forgotten.

The error is in Sub SscaleAll and occurs in this section:

Else If GetType(v) = "flm.b4a.scrollview2d.ScrollView2DWrapper$MyScrollView" Then
' test if the view is a ScrollView2D
' if yes calls the ScaleAll routine with ScrollView2D.Panel
   Dim scv2d As ScrollView2D
   scv2d = v
   ScaleAll(scv2d.Panel)

ScrollView2D is unrecognized.

What should I do to fix the problem so the example will run? Thanks.

 

[klaus]

You should add the ScrollView2D library from here.
If you want to use the Scale module in one of your applications and don't use the ScrollView2D object you can put the lines using ScrollView2D as comments.

Best regards.

 

[kanaida]

I've been trying to wrap my head around this, but not sure exactly where i'm going wrong.
I'm using a nexus 10, normalized horizontal variant (1280x752,scale=1)
I laid everything out like I want.

I added the following to the all variants script:
AutoScaleRate(.5)
AutoScaleAll

I ran it on my nexus 10 and everything just got ridicuously bigger, maybe about 25% of the layouts content is shown. Messing with the value modifies it a little bit. Then I got my Samsung Galaxy S4 and pushed the application to it. It's also very big, but does not change when i change the scale factor.
I did not add a specific variant for it in the designer. It's display is 1920x1080 441 ppi, 5' diagonal.

All I want is basically to keep the exact same layout no matter what device I push the app to, same layout and all. No need for resizing panels etc..

 

[klaus]

The equations in AutoScale are based on the 'standard' layout 320 * 480 scale 1.
If you use any other layout variant AutoScale will give wrong results.
In your case if you design a layout for the 'standard' layout and use AutoScaleRate(1) you will get almost the same layout for all screens exept with a different width / height ratio.

Best regards.

 

[kanaida]

I tried
AutoScaleRate(1)
AutoScaleAll

and on my original device (nexus 10), it's massive, about 25% of my activity is visible.

This is the only thing that makes it look normal.
AutoScaleRate(0)
AutoScaleAll

In the designer, negative numbers seem to give the desired effect but it has no effect on the s4

 

[klaus]

What layout variant do you use ?
As already pointed out, playing with AutoScaleRate(x) and AutoScaleAll with any other layout than the standard one will give strange results !
Using negative values for AutoScaleRate makes no sense with the AutoScale equations !

Best regards.

 

[kanaida]

That's what i thought, but using this made it work.
Using a nexus 10, I added the normalized variants for portrait and landscape.
My portrait variant is : 1280x751, scale=1 (160dpi), the other one is 800x1232, scale1 (160dpi)
I laid out all the stuff.
Then I added this script:
AutoScaleRate(-2.3) (roughly)
AutoScaleAll

It scaled the stuff down correctly for my Galaxy S4 (1080p), but for my original device i did it on, the nexus 10 I need to AutoScaleRate(0) to get it to keep its own original size.

 

[kanaida]

Another thing i noticed as well was that my galaxy s4 tries to use the landscape variant, always. Ignoring the portrait mode alltogether, it just scales it.

Is this basically to make a smaller original, then scale it bigger one way?
I'm not understanding something fundamental here. From what i'm seeing, I need to do some math then pass a different value AutoSizeRate based on that formula. I think.

 

[kanaida]

Allright, after doing some math and looking at numbers, this seems to work for landscape so far. Using my nexus 10 layout on my galaxy S4. It's a work in progress but so far looks very promising. I probably just need similar code in 2 variants. It's loosely based on the autoscale code i ported for bitmaps. It gave me ideas anyways. The funny thing is the cloud preview doesn't match reality I don't think. I need to try it on some other devices. http://www.b4x.com/android/forum/threads/imagemod.32566/

If 100%x=2560 AND 100%y=1342 Then
    'Don't auto scale if it's a nexus 10.
Else
    aspect_src = 100%x / 100%y
    ' Get the size available.
    wid = 100%x
    hgt = 100%y

    ' Adjust the wid/hgt ratio to match aspect_src.
    If wid / hgt > aspect_src Then
        ' The area is too short and wide.
        ' Make it narrower.
        wid = aspect_src * hgt
    Else
        ' The area is too tall and thin.
        ' Make it shorter.
        hgt = wid / aspect_src
    End If
 
    aspect_src = wid/hgt
 
    asp_diff = (100%x/100%y) - (2560/1342)
    NewRate = -(100%x/100%y) -asp_diff
    AutoScaleRate(NewRate)
    AutoScaleAll
End If

 

[klaus]

Try the AutoScale module in the project below.
You can define any other layout resolution as the reference resolution.

I have only tested it with the example in the project.
The layout was designed for a 800/1280/160 10'' layout.
I tested it on a 3.5'' 480/800/240 device and it scales correctly down, the only drawback are the RadioButton and CheckBox images which are internal to the OS and are not scaled.
The AutoScaleRate factor is not used, the factor is equal to one.

Best regards.

EDIT: 2013.09.18
Removed the zip file, a new version AutoScaleExample7 is available in the first post.

 

[klaus]

A new version of the AutoScale module is available in the first post.
AutoScaleExample7
Added HorizontalScrollView.

Best regards.

 

[LucaMs]

(Perhaps I should start a new thread "UI Cloud").

Very simple layout, standard variant: 320x480-160, with the following script:

'All variants script
AutoScaleAll ' <-----------------

Button1.Top = 0
Button1.HorizontalCenter = 50% x

Button2.Bottom y = 100%
Button2.HorizontalCenter = 50% x

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

Here are three results:

Galaxy S4 5" phone

Samsung Pocket 2.8" phone

Tablet Kindle Fire

I am stunned !

 

[LucaMs]

There is no explanation, I gather from the many responses

 

[Erel]

This is the expected result. I will write again that AutoScaleAll only slightly increases the views sizes based on the screen size.

Maybe AutoScaleAll is not what you are looking for. However it works as it is designed.

 

[LucaMs]

This is the expected result. I will write again that AutoScaleAll only slightly increases the views sizes based on the screen size.

Maybe AutoScaleAll is not what you are looking for. However it works as it is designed.

ok, I'm not "smart" enough to understand the purpose of AutoScale, but I realized that it performs what you wanted to achieve.
It just is not what I would (as you exactly wrote)

(I do not mean "smart" ... but the state in which a person is when he's just woken up, GT translates it that way, hehehe)

 

[LucaMs]

It is amazing but I still fight with the graphics!

Unfortunately, it is not easy to explain and ... I can not repeat the error! I try to be brief.

I was going to ask Klaus why (in my app!) Scale.ScaleAll works perfectly except on Main.

I repeat that I developed the layouts with the v.1.80. Having problems, for each of them I have now added a variant normalized (new 480x800-1.5 then "normalize") and removed the original. Everything ok, except the Main. On this one, it appeared as if there were a gray strip at the bottom, which is about 20DIP high.

I wanted to ask Klaus, send sources and screenshots... but then, I do not know if I accidentally clicked somewhere, now it is different!

Now all layouts are perfect, but it lacks the icon project and some views look different. I suppose that this is due to the fact that the app NOW is compiled for a version lower than the API 11 but I do not know why! In the manifest I have min = 4 & target = 15. In the .jar path I have 19, from the beginning, but behaves as if it were not target = 15 in the manifest.

Also, if you were using the 15 or at least > = 11 , I would have again the problem of the Main (in addition to some views that I do not like aesthetically).

Throw I everything in the bucket or someone can not go crazy on this?

Many thanks

[UPDATED]

I rebooted my pc.

Now the compiler uses rightly API 15 !

And now, as expected, I have the problem in the Main


AGAIN: i have <uses-sdk android:minSdkVersion="4" android:targetSdkVersion="15"/>
and the compiler don't uses v 15 but 10 or lower (on my phone, 4.0.4)

 

[Erel]

It is better to start a new thread for this question and also upload the project.

 

[LucaMs]

Finalmente ho risolto!

I finally solved (let me vent in Italian )

The problem of compilation:
the manifest does not report errors but I was "commented" lines, and this created some problems.


The Main:
it is a problem that I was already solved previously but I then picked up an old version: it is the IME, that must be initialized AFTER Scale.ScaleAll.

"Scusate il disturbo" (this is the title of an Italian movie) = "Sorry for the inconvenience"

 

[LucaMs]

Scale.ScaleAll.

It worked perfectly.

Then, I had the great idea to use an ActionBar (ahaActionBar).

I removed the title, in that activity, and it looks like the whole screen is shifted 25dip upwards.
The 25dip at the bottom can be used.

Still, I tried to delete the title in the activities in which I do not use ActionBar and scaling is equally perfect.

Santa Klaus, help me