Android Tutorial Designer Scripts & AutoScale Tutorial

Discussion in 'Tutorials & Examples' started by klaus, Oct 21, 2012.

  1. klaus

    klaus Expert Licensed User

    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.
      • 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

    Attached Files:

    Last edited: Mar 13, 2016
  2. gulliver

    gulliver Member Licensed User

    Thanks Klaus.
    New to B4A, I'm learning a lot of things thanks to the forum.
  3. moster67

    moster67 Expert Licensed User

    Thank you Klaus! Very informative.

  4. ta1dr

    ta1dr Member Licensed User

    many thanks :sign0098:
  5. njesus

    njesus Member Licensed User

    This is one of the hardest topic to master, so to much help is never enough! Thanks!
  6. njesus

    njesus Member Licensed User

    Last edited: Oct 21, 2012
  7. CapReed

    CapReed Member Licensed User

    I've been trying all day to finish my first application "serious" multiple screens trying to balance the look. :BangHead: Beginning to be desperate, I think these examples are coming blast.:icon_clap:

    Many many many thanks!:sign0098:
  8. MLDev

    MLDev Active Member Licensed User

    Thanks klaus!
  9. Harris

    Harris Well-Known Member Licensed User

    Excellent Tutorial!

    This is the first time I have understood the relationship with AutoScaleRate and AutoScaleAll.

    I like the idea if views don't fit the screen height, slap them on a panel in a new bal then add that to a scrollview. This avoids having to re-position them from landscape to fit portrait (one nice column) - or mess around with panels (of views) cluttering up an activity.

    Your text explanation and code examples pretty much clarify how the job of one variant fits all is accomplished. Now, anybody who questions how to make their app fit all devices MUST READ THIS!

    Your Scale code module is puzzling me. In the ScaleAll sub, you call ScaleAll again if, for example, the view is a panel??? You did state The chapter is dedicated for more advanced users.
    Do you recommend using this module for our scaling purposes? I see that only the keyboard used the scaleall routine (where no designer script was created).

    One Note: DB Scroll example will increase the size of the activity each time the screen is rotated (or the activity is called).

    Thanks many...

  10. klaus

    klaus Expert Licensed User

    I'm glad that you find the tutorial useful :).
    Yes, to also scale the child views of the panel the routine calls itself (recursion).

    The first idea was to show only the third example but with Erel we thought that it could seem complicated for beginners so I added two simple examples.

    The AutoScale function works only in the Designer! That means that all views added in the code are not autoscaled. To also have the possibility to autoscale views added in the code I wrote the Scale module. The functions do the same as those in the Designer. You can also use these routines to autoscale views added in the Designer but then you must not autoscale them in the Designer. This module will progress in the near future.

    Thanks for pointing this out. I saw it too but after having posted the tutorial. Will be amended.

    Best regards.
  11. Roger Garstang

    Roger Garstang Well-Known Member Licensed User

    Excellent. I think I understand the concept better now...especially after having a couple tablets that didn't have Font Scaling, so everything appeared small.

    This brings about a couple questions still remaining after reading though:

    1. What if the device has Font Scaling? If the device is already scaling the fonts then this scaling them too would mess the sizes up. Seems like if views are close to each other...even when docked that they could still grow into/on top of each other. It would be cool if somehow this was combined with an Android Relative layout and somehow there was a way to specify size in EMS.

    2. The formula for Delta still confuses me. Combining Width and Height with just a + seems like it isn't getting the true values. Seems like that would be off on some devices when comparing between those with say 4:3 ratio and those with 16:9/16:10. Might make more sense to have a DeltaW and a DeltaH to have a more accurate growth. Or maybe at least calculate both then average the two for a more accurate ratio.
  12. appie21

    appie21 Active Member Licensed User

    Hi Klaus

    Thanks for the tutorial

    In tutorial 2 i need you help

    if i fill in some text in the texboxes and i rotate the screen the data in the textboxes are lost.. How can I fix this?
  13. Erel

    Erel Administrator Staff Member Licensed User

  14. badal405

    badal405 Member Licensed User

    Thank you very much klaus. It's really very useful. May Allah bless you.
  15. jeffnooch

    jeffnooch Member Licensed User i started out trying to learn all this designer script stuff...i was able to manually create a designer script based off a device that was 1024x720 with a scale of 1...i also have tweaked some of the variant specific scripts...for smaller devices such as the nexus 7 (961x552x1) and larger devices such as the nexus 10 (1280x752x1)...

    the things that needed the most tweaking were the font i started searching for better ways to handle it and wound up here...

    here are my questions:
    1) all the scaling seems to be based off a phone resolution of does that mean i have to create my design at that resolution and portrait so everything works properly? because my issue is that what i created will be tablet only and landscape only...i'm struggling how to make it work with the autoscale...
    2) i assume the autoscale is based off of the initial font size and view size from the designer?
    3) I also have panels that are created from code...i assume i could use example 3 scale code to handle the panels?
    4) i tried to set a variable up in the variant specific script .... eg fontscale = .9 then used txt1.textsize = txt1.textsize * fontscale ... but that didn't seem to work...
    5) is there anywhere that lists all the various tablet sizes?
    what i have access to is
    1024x720 (Coby)
    1280x752 (Nexus 10)
    1024x600 (Kindle Fire)
    961x552 (Nexus 7)
    6) how do the variants i had a variant for the nexus 7 at 961x552 (a 7 inch tablet) and the coby at 1024x720 (a 9 inch tablet) and someone with a kindle fire at 1024x600 (a 7 inch tablet) loads the app what variant would it load?

    thanks in advance for any help
    Last edited: Mar 17, 2013
    Scotter likes this.
  16. Gary Miyakawa

    Gary Miyakawa Active Member Licensed User

    I'm working with Designer but struggling with the following..

    I have a panel that is 80% wide and 15% height.. I'd like to center an image in the middle of that panel. Is there a good way to get it to center "automatically" ? I've tried the VerticalCenter = Height/2 but that doesn't handle the rotation to landscape...

    What am I missing ?


    Gary M
  17. klaus

    klaus Expert Licensed User

    In the DesignerScripts:
    Image.HorizontalCenter = Panel.Width / 2
    Image.VerticalCenter = Panel.Height / 2
    The Image should have the Panel as it's parent view.

    Best regards.
  18. Chelu

    Chelu Member Licensed User

    Text Scaling

    I have a problem with text scaling.
    As I understand it, using these functions, the text will scale roughly the same size on a tablet of 10.2 "and 1280 x 800 on a smartphone 5.5" 1280 x 720, when the actual area available is much greater.

    I have serious problems with this. My app uses a lot of text and I can not make it look good on all devices.

  19. klaus

    klaus Expert Licensed User

    How do you scale your layouts ?
    Without knowing what you are doing we can't give you concrete advices !
    Using AutoScale scales also the text size. The scaling depends on the value of the AutoScaleRate.

    Best regards.
  20. Chelu

    Chelu Member Licensed User

    I use %x and %y to climbing the layout.
    The text is based on a stepped function that depends on the resolution, much like Delta tutorial.
    But since this does not seem to scale well on all devices have added to the formula a factor to consider lv.scale
    But still can not get the scaling of the sizes of the text works well in all cases.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice