Android Question % of parent sizing with Designer

Arf

Well-Known Member
Licensed User
Longtime User
I need to create a menu with 4 square buttons around the centre 1/2 (ish), that maintain their squareness and spacing when orientation changes.
So I thought best to put them on a panel, and control the aspect ratio, size and positioning of the panel, then as children the buttons will always be right.
I'm trying to set the top left button to the following position in my panel, in the design script for that layout:
TopLeftButton.SetLeftAndRight(5%x, 45%x)
TopLeftButton.SetTopAndBottom(5%y, 45%y)

TopLeftButton is a child of my panel, however the % settings seem to apply to the total screensize, and not the parent.

How can I set the %'s to be that of the parent instead of the screen size? Hope this makes sense!
 

TheJinJ

Active Member
Licensed User
Longtime User
You can reference the panel and get it's width, height, bottom, top etc. if your panel is sized as you need you can split it up for the children

eg.
TopLeftButton.SetLeftAndRight(panel.left, panel.width / 2)
TopLeftButton.SetTopAndBottom(panel.top, panel.height / 2)

TopRightButton.SetLeftAndRight(TopLeftButton.right, TopLeftButton.width)
 
Upvote 0

Arf

Well-Known Member
Licensed User
Longtime User
Thanks, getting there but having a bit of brain failure:

I'm trying to end up with something like this:
goal_zps6xifr8uu.jpg


The ButtonPanel (square panel forced to 1:1 aspect ratio) seems to be in the right place, but my bottoms are way off to the right for some reason. ButtonPanel is set to be parent of all the buttons. Ignore the PcConnect button above, thats just floating around for the moment as it goes elsewhere

designer_zps6lg43k16.jpg


Here's my script:
B4X:
'Variant specific script: 961x552,scale=1
BackPanel.SetLeftAndRight(0%x, 100%x)
BackPanel.SetTopAndBottom(0%y, 100%y)

ButtonPanel.SetTopAndBottom(10%y, 90%y)
ButtonPanel.SetLeftAndRight(50%x - ButtonPanel.Height/2,50%x + ButtonPanel.Height/2)

ForcedButton.SetLeftAndRight(ButtonPanel.Left, ButtonPanel.HorizontalCenter)
ForcedButton.SetTopAndBottom(ButtonPanel.Top, ButtonPanel.VerticalCenter)
PatientsButton.SetLeftAndRight(ButtonPanel.HorizontalCenter, ButtonPanel.Right)
PatientsButton.SetTopAndBottom(ButtonPanel.Top, ButtonPanel.VerticalCenter)
SettingsButton.SetLeftAndRight(ButtonPanel.Left, ButtonPanel.HorizontalCenter)
SettingsButton.SetTopAndBottom(ButtonPanel.VerticalCenter, ButtonPanel.Bottom)
CalibrationButton.SetLeftAndRight(ButtonPanel.HorizontalCenter, ButtonPanel.Right)
CalibrationButton.SetTopAndBottom(ButtonPanel.VerticalCenter, ButtonPanel.Bottom)
 
Upvote 0

RandomCoder

Well-Known Member
Licensed User
Longtime User
Try this...
B4X:
'All variants script
AutoScaleAll
'Variant specific script: 961x552,scale=1
BackPanel.SetLeftAndRight(0%x, 100%x)
BackPanel.SetTopAndBottom(0%y, 100%y)

ButtonPanel.SetTopAndBottom(10%y, 90%y)
ButtonPanel.SetLeftAndRight(50%x - ButtonPanel.Height/2,50%x + ButtonPanel.Height/2)

'5dip around and between buttons requires an additional 15dip!
ForcedButton.Width=ButtonPanel.Width/2 - 15dip
ForcedButton.Height=ButtonPanel.Height/2 - 15dip

ForcedButton.Left = 5dip
ForcedButton.Top = 5dip
SettingsButton.SetLeftAndRight(ForcedButton.Left, ForcedButton.Right)
SettingsButton.SetTopAndBottom(ForcedButton.Bottom+5dip, ButtonPanel.Height - 5dip)
PatientsButton.SetLeftAndRight(ForcedButton.Right + 5dip, ButtonPanel.Width - 5dip)
PatientsButton.SetTopAndBottom(ForcedButton.Top, ForcedButton.Bottom)
CalibrationButton.SetLeftAndRight(PatientsButton.Left, PatientsButton.Right)
CalibrationButton.SetTopAndBottom(SettingsButton.Top, SettingsButton.Bottom)
 
  • Like
Reactions: Arf
Upvote 0

Arf

Well-Known Member
Licensed User
Longtime User
Awesome, it works - thank you very much.
So I gather my code wasnt working because I should have set the size of the buttons before positioning them.
 
Upvote 0

RandomCoder

Well-Known Member
Licensed User
Longtime User
Awesome, it works - thank you very much.
So I gather my code wasnt working because I should have set the size of the buttons before positioning them.
No it is in fact because the ButtonPanel.HorizontalCenter and VerticalCenter positions are returning the value from the Parent View. It took me a moment to work out as I don't normally use the Designer or its scripts although I intend to on my latest project. Here is your code but with the HorizontalCenter and VerticalCenter values replaced with the ButtonPanel Width and Height...
B4X:
'All variants script
AutoScaleAll
'Variant specific script: 961x552,scale=1
BackPanel.SetLeftAndRight(0%x, 100%x)
BackPanel.SetTopAndBottom(0%y, 100%y)

ButtonPanel.SetTopAndBottom(10%y, 90%y)
ButtonPanel.SetLeftAndRight(50%x - ButtonPanel.Height/2,50%x + ButtonPanel.Height/2)

ForcedButton.SetLeftAndRight(0dip, ButtonPanel.Width/2)
ForcedButton.SetTopAndBottom(0dip, ButtonPanel.Height/2)
PatientsButton.SetLeftAndRight(ButtonPanel.Width/2, ButtonPanel.Width)
PatientsButton.SetTopAndBottom(0dip, ButtonPanel.Height/2)
SettingsButton.SetLeftAndRight(0dip, ButtonPanel.Width/2)
SettingsButton.SetTopAndBottom(ButtonPanel.Height/2, ButtonPanel.Height)
CalibrationButton.SetLeftAndRight(ButtonPanel.Width/2, ButtonPanel.Width)
CalibrationButton.SetTopAndBottom(ButtonPanel.Height/2, ButtonPanel.Height)
 
  • Like
Reactions: Arf
Upvote 0
Top