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
 

Attachments

  • AutoScaleExample7.zip
    73.1 KB · Views: 10,272
Last edited:

LucaMs

Expert
Licensed User
Longtime User
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
 

Attachments

  • LM Scale ActBar.zip
    37.5 KB · Views: 470
Last edited:

LucaMs

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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.
 

Attachments

  • LM Scale ActBar_1.zip
    37.1 KB · Views: 450

LucaMs

Expert
Licensed User
Longtime User
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.
 
Last edited:

aklisiewicz

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

LucaMs

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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 :D:

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

LucaMs

Expert
Licensed User
Longtime User
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.
 

Attachments

  • Orientation.zip
    17.1 KB · Views: 398

LucaMs

Expert
Licensed User
Longtime User
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.
 
Top