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

 

[LucaMs]

@LucaMs

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

I vaguely remember that in your module, in fact, you consider the 50dips.
Perhaps it would be possible to modify it with a couple of parameters in the initialization.

I'll try.

Thank you, Klaus

 

[LucaMs]

I made the changes and at first glance it seems to work.
But I have not done tests on other layouts/devices for the moment.

I post only the changed parts.

Public Sub Initialize(FullScreen As Boolean, TitleShown As Boolean)
    Private ActAttrAdapter As Int = 50
    If FullScreen Then
        ActAttrAdapter = ActAttrAdapter - 25
    End If
    If Not(TitleShown) Then
        ActAttrAdapter = ActAttrAdapter - 25
    End If
' In the rest of this routine 50 must be replaced by ActAttrAdapter
End Sub

Public Sub SetRate(cRate As Double, FullScreen As Boolean, TitleShown As Boolean)
    Initialize(FullScreen, TitleShown)
End Sub


Public Sub SetReferenceLayout(Width As Int, Height As Int, Scale As Double, _
                              FullScreen As Boolean, TitleShown As Boolean)

    Initialize(FullScreen, TitleShown)
End Sub

 

[ilan]

thank you klaus i checked the bal file you uploaded here. i will use this configurations

thank you

 

[klaus]

@LucaMs.
To be complete you should use a code, like below, to take into account all possibilities:

Private ActAttrAdapter As Int
If FullScreen And Not(TitleShown)  Then
    ActAttrAdapter = 0
Else If Not(FullScreen) and TitleShown Then
    ActAttrAdapter = 50
Else
    ActAttrAdapter = 25
End If

 

[LucaMs]

@LucaMs.
To be complete you should use a code, like below, to take into account all possibilities:

Private ActAttrAdapter As Int
If FullScreen And Not(TitleShown)  Then
    ActAttrAdapter = 0
Else If Not(FullScreen) and TitleShown Then
    ActAttrAdapter = 50
Else
    ActAttrAdapter = 25
End If

It is the same

 

[klaus]

Yes, you are right .
This shows that there are different way to get to Rome.

 

[LucaMs]

Yes, you are right .
This shows that there are different way to get to Rome.

In my case, I can sit still here

 

[LucaMs]

I found a little error, Klaus.

Public Sub SetReferenceLayout(Width As Int, Height As Int, Scale As Double, _
                                        FullScreen As Boolean, TitleShown As Boolean)
     '   If cRefWidth < cRefHeight Then
    If Width < Height Then

 

[klaus]

Thank you Luca.
I will change the original project.

 

[Big JR]

I don't see a link to the pdf tutorial. It's not in the example7 zip.

 

[klaus]

The link is at the bottom in the first post just above Attached file. Here the link again.
You find it also in the Beginner's Guide.

 

[LucaMs]

Strange phenomenon (that Klaus will explain in the usual two minutes ).

I create a single variant, width = 1280, height = 800.

Well, I have to use:

Scale.SetReferenceLayout (800, 1280, 1, True, False)

instead of:

Scale.SetReferenceLayout (1280, 800, 1, True, False)

so that i get the desired result.

 

[klaus]

Yes, because the Scale module is more clever than you think.
The reference screen dimensions are in portrait, the Scale module takes into account the other orientation.
Otherewise if you have in the same layout file a portrait and a landscape variant the Scale module would be lost!

 

[LucaMs]

Yes, because the Scale module is more clever than you think.
The reference screen dimensions are in portrait, the Scale module takes into account the other orientation.
Otherewise if you have in the same layout file a portrait and a landscape variant the Scale module would be lost!

Thank you, Klaus.

Given my infamous memory, I think I will change the name to the parameters, then.

PortraitWidth instead of Width, PortraitHeight instead of Height

 

[JTKEK]

it is possible to make it full screen for small screen and not full screen for a bigger screen

If Scale.GetDevicePhysicalSize > 6 Then
        #FullScreen: false
    Else
        #FullScreen: true
    End If

 

[Erel]

You should have started a new thread for this question. It is not possible unless you create two different builds.

 

[ilan]

You should have started a new thread for this question. It is not possible unless you create two different builds.

I think there could be a solution erel

First activity is just a logo page and in this activity he ask for the screen size then

He creates 2 SAME activities 1 full screen 1 not fullscreen and he start that activty that he want, depend on the screensize...

(just a tought )

 

[incendio]

I have design a layout for 10" tablet, it looks fine, but when load on 7" tablet, the display is bad and I can got a correct value for Scale.SetRate to fix the display.

Attached is the screen layout for 10" & 7" tablet, and the source code.

Is that a design flaw in my layout or I use scale class in the wrong way?

 

[Erel]

It is better to start a new thread for this question.

AutoScaleAll only slightly scales the views size and position. It is better to design a smaller layout and let auto scale handle the larger screen.

 

[klaus]

Try to use Scale.SetRate(1).
This will strech the layout according to the new screen size.