Buttons same width, but one not scaling the same width

[unba1300]

Hi,

In the Designer, I have five buttons, all the same width. But when I apply this code (as per the Designer Scripts Tutorial), the button in the middle does scale to the same width as the others.

'All variants script

delta = ((100%x + 100%y) / (320dip + 480dip) - 1)
rate = 0.5 'value between 0 to 1. 
scale = 1 + rate * delta

btnSpeech.Width = btnSpeech.Width * scale
btnSpeech.Height = btnSpeech.Height * scale
btnSpeech.SetLeftAndRight(0, btnSpeech.Width * scale)
btnSpeech.SetTopAndBottom(100%y - btnSpeech.Height * scale, 100%y)

btnMainPlay.Width = btnMainPlay.Width * scale
btnMainPlay.Height = btnMainPlay.Height * scale
btnMainPlay.SetLeftAndRight(0, btnMainPlay.Width * scale)
btnMainPlay.SetTopAndBottom(btnSpeech.Top - btnMainPlay.Height * scale, btnSpeech.Top)

btnMainSettings.Width = btnMainSettings.Width * scale
btnMainSettings.Height = btnMainSettings.Height * scale
btnMainSettings.SetLeftAndRight(100%x - btnMainSettings.Width * scale, 100%x)
btnMainSettings.SetTopAndBottom(100%y - btnMainSettings.Height * scale, 100%y)

btnMainMedia.Width = btnMainMedia.Width * scale
btnMainMedia.Height = btnMainMedia.Height * scale
btnMainMedia.SetLeftAndRight(100%x - btnMainMedia.Width * scale, 100%x)
btnMainMedia.SetTopAndBottom(btnMainSettings.Top - btnMainMedia.Height * scale, btnMainSettings.Top)

btnMainModify.Width = btnMainModify.Width * scale
btnMainModify.Height = btnMainModify.Height * scale
btnMainModify.HorizontalCenter = 50%x
btnMainModify.SetTopAndBottom(btnMainPlay.Top, btnSpeech.Top)

The attached screen capture shows what it looks like at 480 x 800, scale = 1.
:sign0163:

 

[Erel]

Can you upload the layout file (stored in the Files folder)?

 

[unba1300]

Layout file attached.

I should have written my question a little different too. The issue is not with the middle button, but rather that all five buttons should be the same width.

Thanks.

 

[Erel]

This is not related to the issue you describe however I think that you should remove the 800x480, scale=1 variant. It is not really needed.

Here is the correct code:

delta = ((100%x + 100%y) / (320dip + 480dip) - 1)
rate = 0.5 'value between 0 to 1. 
scale = 1 + rate * delta

txtMainBanner.SetLeftAndRight(0, 100%x)
txtMainBanner.Top = 0
txtMainBanner.Height = txtMainBanner.Height * scale

'only the height is scaled with the scale formula.
btnSpeech.SetTopAndBottom(100%y - btnSpeech.Height * scale, 100%y)
btnSpeech.SetLeftAndRight(0, 33%x)
btnMainSettings.SetTopAndBottom(btnSpeech.Top, btnSpeech.Bottom)
btnMainSettings.SetLeftAndRight(66%x, 100%x)
btnMainPlay.SetLeftAndRight(0, btnSpeech.Right)
btnMainPlay.SetTopAndBottom(btnSpeech.Top - btnSpeech.Height, btnSpeech.Top)
btnMainModify.SetTopAndBottom(btnMainPlay.Top, btnMainPlay.Bottom)
btnMainModify.SetLeftAndRight(33%x, 66%x)
btnMainMedia.SetTopAndBottom(btnMainPlay.Top, btnMainPlay.Bottom)
btnMainMedia.SetLeftAndRight(66%x, 100%x)

btnSpeech.TextSize = btnSpeech.TextSize * scale
btnMainMedia.TextSize = btnSpeech.TextSize
btnMainModify.TextSize = btnSpeech.TextSize
btnMainPlay.TextSize = btnSpeech.TextSize
btnMainSettings.TextSize = btnSpeech.TextSize

txtMainStory.SetTopAndBottom(txtMainBanner.Bottom, btnMainPlay.Top)
txtMainStory.SetLeftAndRight(0, 100%x)
txtMainStory.TextSize = txtMainStory.TextSize * scale

You should understand when to use the "scale" function and when to use percentage.
In this case the buttons widths should be set with percentage not scale. Because the ratio between the device width and the buttons width is constant (3 in this case).

The height and the buttons text size should use the scale function.

 

[unba1300]

Thank you, Erel.
:sign0060:

 

[unba1300]

This has worked well so far for my screens in portriat, but now when I switch to landscape, what is in 'All variants script' gets applied to landscape as well (by design, of course). However, my layouts in landscape are quite different than portrait. Mostly with having buttons on the side, rather than the bottom to provide more vertical room for lists. And if I use 'Variant specific script: 480x320,scale=1' that would only apply to that specifically and not the other landscape resolutions and scales, right? Can we put code in the Designer Scripts such as 'If landscape Then'? I've been looking at the 'About' example, but I think some of my screens are more complex. I attached a layout to show how what I did in Designer Scripts is good for portrait, but produces an undesirable result for landscape. Stuck again.
:sign0163:
Wish the Designer had 'All portrait variants script' and 'All landscape variants script' sections.

 

[Erel]

All phone devices in landscape orientation will load and run the landscape variant you created. On tablets it usually doesn't really matter as the available size is much larger.

If you want to apply the landscape variant to larger sizes you will need to add landscape variants for 7' tablets and 10' tablets.