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]

I have never used ahaActionBar.
And without knowing what exactly you have done impossible to give a concrete advice.

 

[LucaMs]

I have never used ahaActionBar.
And without knowing what exactly you have done impossible to give a concrete advice.

Sorry, Klaus, you're right.

I'll post and example here.

Thank you for your reply, you're always friendly and helpful

 

[LucaMs]

I thank you in advance for your help, Klaus, but I have no hurry:
I am contriving to use a button and a sliding panel, for my app.
I will use the actionbars when I'll be able to use them well, who knows, maybe in the next app.

I've attached the example

Thanks again

 

[klaus]

You'll need to be somewhat patient, the two next days I'm quite busy (not B4A) .

 

[LucaMs]

You'll need to be somewhat patient, the two next days I'm quite busy (not B4A) .

I wrote: "but I have no hurry."

You are always very kind, I can wait that long.

Also, if I commit myself a little ', maybe I find the solution (a boolean parameter: UseActBar?)

Take care of yourself, Klaus... many many thanks.

Best regards


P.S. I have too much free time... unfortunately

 

[klaus]

In your layout layTest you set the Top property of the Panel1 to 0 then you add the ActionBar which is also on top hiding the top of the panel !
Attached a modified version.

 

[LucaMs]

In your layout layTest you set the Top property of the Panel1 to 0 then you add the ActionBar which is also on top hiding the top of the panel !
Attached a modified version.

First of all, thank you for using your time for this!

By now, I am in utter confusion (too many new things together, poor organization and priority).

I thought ActionBar was a "system object" and that would fit the "available screen" automatically. Title the same thing.

But I have full confidence in your skill, so I download the project, I look at it and admire it! Nothing else!
(I put a Like before downloading the zip ... I hope when you have received a specific number of "Like", Erel will pay you for a vacation in the tropics).

Again many thanks, Klaus

P.S. I think I understand. I confused those 50dip, for the title and notifications, I thought it was so even for the actionbar.

 

[aklisiewicz]

Downloaded this example, and when I open the Main module in the Cloud it doesn't seem to scale at all. Any ideas ?
Arthur

 

[klaus]

Because the Scale module is a code module which scales the views in the code and cannot use Cloud.
AutoSclae in the DesignerScript can use Cloud but doesn't scale views added in the code.

 

[LucaMs]

I always use your module, Klaus.

Before I lose my mind there ...

the CheckBox does not appear as I would like: do you think I've made some mistakes, or it requires a different treatment? (I use a checkbox without text and it is not placed in the "center" and resized correctly)

 

[LucaMs]

No. Your Module has no "guilt".

Checkbox does not "work" like "it should."

If I have a checkbox wide 100dip without text, I wish the little square was drawn in the center, however it remains close to the left edge.

Its (square, not view) size also ... ?!?!

I will be forced (finally) to learn well to create a custom control

 

[klaus]

Without knowing what you have done and what exactly you expect it's difficult to answer you.
The square is an image and it seems that its dimensions are always the same independant of the CheckBox height.

(I use a checkbox without text and it is not placed in the "center" and resized correctly)

What have you done and what do you expect ?

 

[LucaMs]

Without knowing what you have done and what exactly you expect it's difficult to answer you.
The square is an image and it seems that its dimensions are always the same independant of the CheckBox height.
What have you done and what do you expect ?

Thanks for you reply.
Probably you were answering before i post #51

 

[LucaMs]

Hi, Klaus.

I should probably watch again the example that you have attached (and I'll do it in a few minutes!).

Since I had never set SupportedOrientations to "unspecified", I never faced this issue.

I suppose your excellent module does not manage it.
So I guess I need to use a global variable, to be saved somewhere, to compare the changes of ratio.

I have tried and so far I have failed.

I was thinking, just to give you some nice problem :

Would it be possible to add some routine for this? Maybe transforming the module as class?

 

[LucaMs]

I have analyzed your good example, but in it I have not found the solution to the change of orientation, Klaus.

I am attaching a sample project.

I have no hurry

Many thanks, Klaus.

 

[klaus]

You need to define a landscape layout variant for each file !

 

[LucaMs]

Done! Maybe I'm wrong the attachment? [No]

 

[klaus]

What's the problem ?
Did you try it ?
The only problem in your landscape layout is that the two buttons at the bottom are not adapted to the panel height in the main layout.
In tab0 they are below the bottom of the panel.

 

[LucaMs]

The only problem in your landscape layout is that the two buttons at the bottom are not adapted to the panel height in the main layout.

The behavior that I assume is:

the original panel has a width W and height H? It is scaled and, for example, decreased in both dimensions of a 10%?
Then the positions of the buttons should auto-decreased by 10%, as them dimensions.

 

[LucaMs]

Forget it. I understood.

The panel in the main is 320x240!

Many thanks, Klaus