Display Issue

grant1842

Active Member
Licensed User
Longtime User
I am doing a project in Landscape only not to worry about portrait .

I am trying to get all the button views to take up the whole space of panel 1 on all devices.




As you can see from the image the 4" phone has everything to the left side and some free space on the right.

On th Kindle Fire there is free space to the left and right.

I am trying to use the designer scripts to position everything ,
but I am having problems getting everything to display symmetrical and using all the available screen space on the device.

B4X:
'Variant specific script: 800x480,scale=1

Button16.SetTopAndBottom(0,100%Y)
Button16.Right=85%x


Button15.SetTopAndBottom(0,100%Y)
Button15.Right=21%x



Button14.Right=36%x
Button14.VerticalCenter= 50%y

Button7.HorizontalCenter=52%x
Button7.VerticalCenter=33%y


Button10.HorizontalCenter=52%x
Button10.VerticalCenter=68%y

Button13.Top= Panel1.Top
Button13.Right=34%x




Button8.Top= Panel1.Top
Button8.Right=49%x




Button9.Top= Panel1.Top
Button9.Right=64%x


Button11.Top= Panel1.Top
Button11.Right=80%x



Button1.Right=30%x
Button1.VerticalCenter=50%y


Button2.Right=65%x
Button2.VerticalCenter=50%y


Button3.HorizontalCenter=73%x
Button3.VerticalCenter= 50%y



Button4.Bottom=Panel1.Bottom
Button4.Right= 35%x


Button5.Bottom=Panel1.Bottom
Button5.right= 50%x



Button6.Bottom=Panel1.Bottom
Button6.Right= 65%x



Button12.Right= 80%x
Button12.Bottom=Pane

I have exported the project and attached it .

Thanks for any help.
 

Attachments

  • project.zip
    41.7 KB · Views: 152

Erel

B4X founder
Staff member
Licensed User
Longtime User
If you want to stretch the UI then it will be easier to implement it with code such as:
B4X:
Sub StretchUI
   Dim stretchX = 100%x / 480dip, stretchY = 100%y / 320dip As Float
   For Each v As View In Panel1
      v.Left = v.Left * stretchX
      v.Width = v.Width * stretchX
      v.Top = v.Top * stretchY
      v.Height = v.Height * stretchY
   Next
End Sub

You should move all the views to the panel (currently two buttons are not on the panel) and use the designer to create a single variant with the following values: 480x320, scale=1.

Remove the whole script except of the Panel1 calls.
 
Upvote 0
Cookies are required to use this site. You must accept them to continue using the site. Learn more…