Android Question Designer Script Issue

A

alexanderjames

Member
Licensed User
Longtime User
Hi All

I'm currently designing a system in b4a, I have designed my layout based on my 10" tablet which is connected wirelessly via b4a bridge. I then started thinking about multiple screen sizes and did some reading up on the designer scripts. I have made the below script as to my understanding of what I read in the guide but when I upload to UI cloud everything is completely out of whack.

'All variants script
AutoScaleAll
autoscalerate(0.5)
'Scale panel 1
Panel2.Right = 41.2%x
Panel2.Height = 61%x
Panel2.Width = 40.2%x
'Scale all bauutons in panel2
cmdInput7.Right = 14.7%x
cmdInput7.Height = 12.2%x
cmdInput7.Width = 12.3%x
cmdInput8.Right = 27.3%x
cmdInput8.Height = 12.2%x
cmdInput8.Width = 12.3%x
cmdInput9.Right = 39.9%x
cmdInput9.Height = 12.2%x
cmdInput9.Width = 12.3%x
cmdInput4.Right = 14.7%x
cmdInput4.Height = 12.2%x
cmdInput4.Width = 12.3%x
cmdInput5.Right = 27.3%x
cmdInput5.Height = 12.2%x
cmdInput5.Width = 12.3%x
cmdInput6.Right = 39.9%x
cmdInput6.Height = 12.2%x
cmdInput6.Width = 12.3%x
cmdInput1.Right = 14.7%x
cmdInput1.Height = 12.2%x
cmdInput1.Width = 12.3%x
cmdInput2.Right = 27.3%x
cmdInput2.Height = 12.2%x
cmdInput2.Width = 12.3%x
cmdInput3.Right = 39.9%x
cmdInput3.Height = 12.2%x
cmdInput3.Width = 12.3%x
cmdClear.Right = 14.8%x
cmdClear.Height = 12.2%x
cmdClear.Width = 12.3%x
cmdInput0.Right = 27.3%x
cmdInput0.Height = 12.2%x
cmdInput0.Width = 12.3%x
cmdOk.Right = 39.9%x
cmdOk.Height = 12.2%x
cmdOk.Width = 12.3%x
'Scale the text box in panel2
txtPassword.Right = 40.3%x
txtPassword.Height = 8%x
txtPassword.Width = 37.5%x

To get these percentages I have type them in until the layout is correct in the designer. Am I doing this correctly ? have I missed something in the script ? Please could someone point me in the right direction or tell me what i'm doing wrong. I would greatly appreciate the help.

Many Thanks in advance
AJ
 
Sort by date Sort by votes
NJDude

NJDude

Expert
Licensed User
Longtime User
if you have similar views with the same dimensions then you could do something like this:
B4X: 
cmdInput7.Height = 12.2%x
cmdInput7.Width = 12.3%x
...
 
cmdInput8.Height = cmdInput7.Height
cmdInput8.Width = cmdInput7.Width
 
Upvote 0
A

alexanderjames

Member
Licensed User
Longtime User
Thank you NJDude

That makes writing the script a million times quicker, and I have changed my script as per your suggestion, so now everything lines up much better in the designer wooo hoo. But still when sending to UI cloud it's all completely out. Am I missing something or doing something wrong in the script ?

Thanks
AJ
 
Upvote 0
klaus

klaus

Expert
Licensed User
Longtime User
As you are resizing all the views with %x and %y values you should remove:
AutoScaleAll
AutoScaleRate(0.5)

If you want to use AutoScaleAll and AutoScaleRate(0.5),
AutoScaleRate(0.5) must be before AutoScaleAll.

Similar to NJDude's suggestion you could also define two variables.
B4X: 
Height = 12.2%x
Width = 12.3%x
...
cmdInput7.Height = Height
cmdInput7.Width = Width
...
cmdInput8.Height = Height
cmdInput8.Width = Width
 
Upvote 0
A

alexanderjames

Member
Licensed User
Longtime User
Hi guys

Thanks for the replies, as per your suggestion Klaus I'll move "AutoScaleRate(0.5) to before the "AutoScaleAll". I was thinking about it today and I realized that I'm also missing the %x for .Top. This might be one of the problems. If I still cant get it working right I'll post up a screen shot tonight.

Thanks again for all the advice.
AJ
 
Upvote 0
A

alexanderjames

Member
Licensed User
Longtime User
Hi guys

After loads of trying I still cannot get my layouts right on the UI Cloud. I have uploaded a screen shot from the UI cloud for you guys to see what I mean by everything is out of whack. The layout works nicely on the 10" because that's what I'm designing in but as you will see the 5" and 5.3" are misaligned. Below is my latest designer Script attempt, please could someone tell me what on earth I'm doing wrong.

'All variants script
autoscalerate(0.3)
AutoScaleAll
'Scale panel 1
Panel2.Top = 5%y
Panel2.Right = 41.2%x
Panel2.Height = 65%y
Panel2.Width = 26.4%x
'Scale all buttons in panel2
cmdInput7.Top = 18%y
cmdInput7.Right = 14.3%x
cmdInput7.Height = 12.2%y
cmdInput7.Width = 8%x
cmdInput8.Top = cmdInput7.Top
cmdInput8.Right = 22.5%x
cmdInput8.Height = 12.2%y
cmdInput8.Width = cmdInput7.Width
cmdInput9.Top = cmdInput7.Top
cmdInput9.Right = 30.8%x
cmdInput9.Height = 12.2%y
cmdInput9.Width = cmdInput7.Width
cmdInput4.Top = 30.5%y
cmdInput4.Right = cmdInput7.right +55
cmdInput4.Height = cmdInput7.Height
cmdInput4.Width = cmdInput7.Width
cmdInput5.Top = cmdInput4.Top
cmdInput5.Right = cmdInput8.Right + 55
cmdInput5.Height = cmdInput8.Height
cmdInput5.Width = cmdInput8.Width
cmdInput6.Top = cmdInput4.Top
cmdInput6.Right = cmdInput9.Right + 55
cmdInput6.Height = cmdInput9.Height
cmdInput6.Width = cmdInput9.Width
cmdInput1.Top = 43%y
cmdInput1.Right = cmdInput7.Right + 55
cmdInput1.Height = cmdInput7.Height
cmdInput1.Width = cmdInput7.Width
cmdInput2.Top = cmdInput1.Top
cmdInput2.Right = cmdInput8.Right + 55
cmdInput2.Height = cmdInput8.Height
cmdInput2.Width = cmdInput8.Width
cmdInput3.Top = cmdInput1.Top
cmdInput3.Right = cmdInput9.Right + 55
cmdInput3.Height = cmdInput9.Height
cmdInput3.Width = cmdInput9.Width
cmdClear.top = 55.5%y
cmdClear.Right = cmdInput7.Right + 55
cmdClear.Height = cmdInput7.Height
cmdClear.Width = cmdInput7.Width
cmdInput0.Top = cmdClear.Top
cmdInput0.Right = cmdInput8.Right + 55
cmdInput0.Height = cmdInput8.Height
cmdInput0.Width = cmdInput8.Width
cmdOk.Top = cmdClear.Top
cmdOk.Right = cmdInput9.Right + 55
cmdOk.Height = cmdInput9.Height
cmdOk.Width = cmdInput9.Width
'Scale the text box in panel2
txtPassword.Top = 7%y
txtPassword.Right = 39.9%x
txtPassword.Height = 8%y
txtPassword.Width = 24.7%x
lblMessage.Top = Panel2.Top
lblMessage.Right = 65%x
lblMessage.Height = txtPassword.Height
'Panel1
Panel1.Left = lblMessage.Left
Panel1.Top = 14%y
Panel1.Width = 62%x
Panel1.Height = 70%y
'list box inside panel1
lstMessage.Left = Panel1.Left + 5
lstMessage.top = Panel1.Top + 5
lstMessage.width = Panel1.Width - 9
lstMessage.Height = Panel1.Height - 9
'Connection label
lblConnection.Left = lstMessage.Left + 5
lblConnection.Width = Panel1.Width - 10
lblConnection.Top = Panel1.Bottom + 5
lblConnection.Height = 5%y
Panel3.Top = Panel1.Bottom + 5
Panel3.Width = Panel1.Width
Panel3.Left = Panel1.Left
Panel3.Height = 6%y
cmdExit.Top = Panel3.Bottom + 8
cmdExit.Width = cmdInput7.Width + 10
cmdExit.Right = Panel3.Right
cmdExit.Height = cmdInput7.Height - 35
lblVersion.Top = cmdExit.Top
lblVersion.Width = 15%x
lblVersion.Height = 8%y
lblVersion.Left = Panel2.Left

many thanks

AJ
 

Attachments

  • UI_Sample.png
    UI_Sample.png
    131.1 KB · Views: 208
Upvote 0
A

alexanderjames

Member
Licensed User
Longtime User
wooo hooo, got it sorted !

I had to script the .Rights for all the views as well, it's now working perfectly in the UI cloud.

Thank you for all your input and advice, I really appreciate it.
 
Upvote 0
klaus

klaus

Expert
Licensed User
Longtime User
In cases like this
cmdInput4.Right = cmdInput7.right + 55
you should use dip values !
cmdInput4.Right = cmdInput7.right + 55dip

I had to script the .Rights for all the views as well,...
Click to expand...
This sounds strange to me !
If you set the Left and Width properties the Right property is given and is equal to Left + Width.
If now you set the Right property you change the Width property ?
You could use the SetLeftAndRight method to chage both Left and Right properties at the same time.
And SetTopAndBottom for the Top and Bottom properties.
 
Upvote 0
You must log in or register to reply here.
Top