Android Question Designer Script - please help with TextSizes

[udg]

Hi all,

I'm really fond of the Designer Script mode and read most of the previous posts about it, but I'm still a bit puzzled; so please help me clarify a few concepts and correct my naive script attempt in the way.

1. Use standard 320x480 160dpi variant as your base layout
My app will be locked in landscape-only display so do I simply read the above as 480x320 or am I expected to design in portrait mode to correctly apply AutoScaleRate()/AutoScaleAll?

2. AutoScaleRate()/AutoScaleAll scale each following view, so to keep something at a specific size I have to declare it after the AutoScaleAll command. Right?

3. Labels' textsizes are scaled like any other view element so am I expected to design in 480x320 and stop "when it looks good" for a 4" device (again 480x320 160dpi)? This will scale up nicely up toward a 10" tablet?
Or have I to plan a second variant specific to 7" and 10" devices where I increase the TextSize in order to fill most of the extra space?

What follows is my first attempt at script usage; The main app screen shows 3 partially overlapping panels each one showing at least an image and a couple of labels with different textsizes.
Since the code looks "ugly" to me, I'm quite sure that a few things needs to be done differently..

My code:

'App will display ONLY in landscape mode

'All variants script
AutoScaleRate(0.3)
AutoScaleAll

' 3 partially overlapping panels
pnlHeader.SetLeftAndRight(0%x,50%x)
pnlHeader.SetTopAndBottom(0%y,100%y)
pnlDay.SetLeftAndRight(50%x,100%x)
pnlDay.SetTopAndBottom(0%y,55%y)
pnlMenu.SetLeftAndRight(40%x,100%x)
pnlMenu.SetTopAndBottom(50%y,100%y)

' Header panel content
imgLogo.SetLeftAndRight(5dip,pnlHeader.Right-5dip)
imgLogo.SetTopAndBottom(0,imgLogo.Width / 4)
lblHeader.TextSize = 24
lblHeader.Height = 70dip
lblHeader.SetLeftAndRight(pnlHeader.Left,pnlHeader.Right)
lblHeader.Top=imgLogo.Bottom+5dip
icosmall = 50%x /6
imgFbk.Width = icosmall
imgFbk.Height = icosmall * 1.6
imgFbk.Left = 4dip
imgFbk.Bottom = 85%y
imgTweet.Width = icosmall * 1.3
imgTweet.Height = icosmall *1.6
imgTweet.Left = imgFbk.Right+2dip
imgTweet.Bottom = 75%y
imgCopyright.Width=pnlHeader.Right-25%x
imgCopyright.Height = imgCopyright.Width / 12
imgCopyright.Bottom = 100%y
imgCopyright.Right=pnlMenu.Left-4dip

'Day panel content
lblToday.TextSize=16
lblToday.Height=30dip
lblToday.SetLeftAndRight(4dip,pnlDay.Right-4dip)
lblToday.Top=0%y
iv_Lavagna.Width=Min(20%x,20%y)
iv_Lavagna.Height=iv_Lavagna.Width
iv_Lavagna.HorizontalCenter=25%x
iv_Lavagna.VerticalCenter = 25%y
lblDayTitle.TextSize=30
lblDayTitle.Height=40dip
lblDayTitle.Top=iv_Lavagna.Bottom+8dip
lblDayTitle.Left=0%x
lblDayTitle.HorizontalCenter=pnlDay.Width/2
lblFee.TextSize=24
lblFee.Height=40dip
lblFee.Top = iv_Lavagna.Top+(iv_Lavagna.Height - lblFee.Height)/2
lblFee.Left = iv_Lavagna.Right + 10dip
lblFee.Width = pnlDay.Right-lblFee.left

'Menu panel content
iv_Menu.Width = Min(20%x,20%y)
iv_Menu.Height = iv_Menu.Width
iv_Menu.Left = 4dip
iv_Menu.Top = 15%y
lblMenu.TextSize = 30
lblMenu.Height = 70dip
lblMenu.Left = iv_Menu.Right+10dip
lblMenu.Width = pnlMenu.Width-iv_Menu.Width-12dip
lblMenu.Top = iv_Menu.Top+(iv_Menu.Height - lblMenu.Height)/2
lblMotto.TextSize = 24
lblMotto.Height = 30dip
lblMotto.SetLeftAndRight(4dip,pnlMenu.Width-8dip)
lblMotto.Bottom = pnlMenu.Height

Sorry for the message length

Umberto

 

[klaus]

1) No, the landscape layout is enough.
2) AutoScaleRate()/AutoScaleAll scale each following view, what do you mean with 'each following view'.
If you call AutoScaleAll and after this you set for example lblHeader.TextSize = 24 the textsize will be 24 and not scaled by AutoScale.
But, if you set the text size of lblHeader to 24 in the Designer and then AutoScale the layout in DesignerScripts the text size will be increased.
AutoScaleRate calculates a scale factor.
AutoScaleAll scales all views in the layout file with the calculated scale factor.
If you want to position views on specific places this must be done after AutoScaleAll.
3) TextSizes will be multiplied by the same scale factor.
Depending on the AutoScaleRate value the views are more or less increased.
Rate values of 0.3 to 0.5 are good compromises, but there remain spaces on big screens.
If you want to strech the views according to the sceen size you should use a rate value of 1.

You might have a look at chapters 8.9 Designer Scripts and 8.10 AutoScale in the Beginner's Guide.

Some comments about your DesignerScripts:
Example:
lblHeader.TextSize = 24
lblHeader.Height = 70dip
As these lines are executed after the AutoScaleAll line you set the Height and the TextSize to fixed values independant of the screen sizes.
The height and text size will have same dimensions on a 4'' and a 10'' screen !
Is this really what you want ?

I this line pnlHeader.SetTopAndBottom(0%y,100%y) pnlHeader will fill the whole height and left half screen.

Best regards.

 

[udg]

Hi Klaus,

thank you for your notes.
Your explanation on point 2) confirms me I'm wrong at using AutoScaleAll at the beginning of the script 'cause my intention is to have everything scaled properly. BTW, "each following view" meant any view declared/used after the AutoScaleAll command.

"The height and text size will have same dimensions on a 4'' and a 10'' screen !" This is exactly what I don't want to be..
"pnlHeader will fill the whole height and left half screen" This one is right

So, to summarize:

1. design for 480x320 (160dpi) or 320x480 (160dpi)
2. make it looks good for a 4" device sporting that standard variant
3. put AutoScaleRate()/AutoScaleAll at the script ending to scale every view and all the textsizes
4. eventually set after AutoScaleAll those view that need a specific position (or textsize), identical on each device irrespective of physical dimension and scale factor

Am I closer to good script coding now? TIA

Umberto

 

[klaus]

You are closer.
1. design for 480x320 (160dpi) for your case, define all dimensions even TextSizes in the Designer
2. put AutoScaleRate(x) and AutoScaleAll at the beginning, that way all views are scaled you can 'play' with the rate factor.
Unfortunately DesignerScripts has a few drawbacks explained in the Beginner's Guide.
3. stretch all views you want to, as you did with %x and %y
4. check your layouts with Send to UI Cloud in the Designer.

You might also have a look at this thread AutoScale Code Module which contains a test project including a code module allowing to autoscale in the code also ScrollView contents etc.

Best regards.

 

[udg]

Hi Klaus,

thank you for your comments.
I solved my problem declaring textsizes before the "Autoscale couple", so my code now reads:

'App will display ONLY in landscape mode
'All variants script

lblHeader.TextSize = 20
lblToday.TextSize=14
lblDayTitle.TextSize=24
lblFee.TextSize=18
lblMenu.TextSize = 16
lblMotto.TextSize = 16

AutoScaleRate(0.5)
AutoScaleAll

' 3 partially overlapping panels
...

Testing on the UI cloud, everything shows as expected from 2.8" to 10". So far so good.

The only point I still find hard to understand it's about the relative position of the AutoScaleAll command in the script code.
Moving it as the very last line causes the whole design to violate the SetLeftAndRight/SetTopAndBottom settings applied to my 3 panels (as seen on a real 10" tablet); I mean the header panel takes more space than then left half of the screen it should.
Taking back at the script beginning as you suggested ( after the textsizes setting but before all the other settings) seems to solve the problem.

This all suggest I need more studying and experimenting..

Thanks for the reference to the code module to scale in code, but I need to cover the basics before attempting more complex chores.. ;-)

Umberto

 

[klaus]

The only point I still find hard to understand it's about the relative position of the AutoScaleAll command in the script code.
Moving it as the very last line causes the whole design to violate the SetLeftAndRight/SetTopAndBottom settings applied to my 3 panels (as seen on a real 10" tablet)

The AutoScaleAll function multipies the current Left, Top, Width, Height and TextSize (if relevant) properties of each view by the scale factor !
So if you SetLeftAndRight(0, 100%x) before AutoScaleAll then Left remains 0 but Right becomes 100%x * scale !
You find the equations for the scale factor in the Beginner's Guide.

Best regards.

 

[udg]

The AutoScaleAll function multipies the current Left, Top, Width, Height and TextSize (if relevant) properties of each view by the scale factor !
So if you SetLeftAndRight(0, 100%x) before AutoScaleAll then Left remains 0 but Right becomes 100%x * scale !

Now I see the light ! Thank you so much.

Umberto