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,244
Last edited:

LucaMs

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

B4X:
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
 
Last edited:

ilan

Expert
Licensed User
Longtime User
thank you klaus i checked the bal file you uploaded here. i will use this configurations

thank you
 

klaus

Expert
Licensed User
Longtime User
@LucaMs.
To be complete you should use a code, like below, to take into account all possibilities:
B4X:
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

Expert
Licensed User
Longtime User
I found a little error, Klaus.

B4X:
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
 

LucaMs

Expert
Licensed User
Longtime User
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:
B4X:
Scale.SetReferenceLayout (800, 1280, 1, True, False)

instead of:
B4X:
Scale.SetReferenceLayout (1280, 800, 1, True, False)

so that i get the desired result.
 

klaus

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

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

Member
Licensed User
Longtime User
it is possible to make it full screen for small screen and not full screen for a bigger screen

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

ilan

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

incendio

Well-Known Member
Licensed User
Longtime User
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?
 

Attachments

  • 10inch.jpg
    10inch.jpg
    99.9 KB · Views: 325
  • Nexus7.jpg
    Nexus7.jpg
    17.1 KB · Views: 348
  • scale.zip
    106.6 KB · Views: 368
Top