Android Tutorial Designer Scripts & AutoScale Tutorial

klaus · Oct 21, 2012

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 · Dec 19, 2013

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

LucaMs · Dec 19, 2013

klaus said:
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 · Dec 19, 2013

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 · Dec 19, 2013

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

LucaMs · Dec 19, 2013

klaus said:
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 · Dec 23, 2013

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 · Dec 23, 2013

klaus said:
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 · Jan 10, 2014

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 · Jan 10, 2014

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 · Jan 19, 2014

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 · Jan 19, 2014

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 · Jan 19, 2014

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 · Jan 19, 2014

klaus said:
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 · May 22, 2014

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 · May 23, 2014

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 · May 23, 2014

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

LucaMs · May 23, 2014

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

klaus · May 23, 2014

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 · May 23, 2014

klaus said:
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 · May 23, 2014

Forget it. I understood.

The panel in the main is 320x240!

Many thanks, Klaus

Android Tutorial Designer Scripts & AutoScale Tutorial

Attachments

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Attachments

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency