Android Question [SOLVED]Visual Designer..arranging multiple buttons.. not arranging in the correct position??

eric19740521

Member
Licensed User
Longtime User
Visual Designer.. arranging multiple buttons.. not arranging in the correct position??

I use two Layouts to do..one for display. one for button function

I use script to calculate all button positions..for example 20%y,40%y,60%y,80%y

I noticed that the button position is not as I thought..

i think. it might be in decimal point
100%y=977
977*0.40=390.8
977*0.60=586.2
977*0.80=781.6

attach my source code

Visual Designer Script:
'Variant specific script: 320x480,scale=1
'c 2 3 4
btn1.SetTopAndBottom(0,20%y)
btn2.SetTopAndBottom(0,20%y)
btn3.SetTopAndBottom(0,20%y)
btn4.SetTopAndBottom(0,20%y)
btn1.SetLeftAndRight(0%x,25%x)
btn2.SetLeftAndRight(25%x,50%x)
btn3.SetLeftAndRight(50%x,75%x)
btn4.SetLeftAndRight(75%x,100%x)

'7 8 9
num7.SetTopAndBottom(20%y ,40%y)
num8.SetTopAndBottom(20%y ,40%y)
num9.SetTopAndBottom(20%y ,40%y)
btn5.SetTopAndBottom(20%y ,40%y)
num7.SetLeftAndRight(0%x,25%x)
num8.SetLeftAndRight(25%x,50%x)
num9.SetLeftAndRight(50%x,75%x)
btn5.SetLeftAndRight(75%x,100%x)

'4 5 6
num4.SetTopAndBottom(40%y,60%y)
num5.SetTopAndBottom(40%y,60%y)
num6.SetTopAndBottom(40%y,60%y)
btn6.SetTopAndBottom(40%y,60%y)
num4.SetLeftAndRight(0%x,25%x)
num5.SetLeftAndRight(25%x,50%x)
num6.SetLeftAndRight(50%x,75%x)
btn6.SetLeftAndRight(75%x,100%x)

'1 2 3
num1.SetTopAndBottom(60%y,80%y)
num2.SetTopAndBottom(60%y,80%y)
num3.SetTopAndBottom(60%y,80%y)
btn7.SetTopAndBottom(60%y,100%y)
 
num1.SetLeftAndRight(0%x,25%x)
num2.SetLeftAndRight(25%x,50%x)
num3.SetLeftAndRight(50%x,75%x)
btn7.SetLeftAndRight(75%x,100%x)

'0 & .
num0.SetTopAndBottom(80%y,100%y)
num10.SetTopAndBottom(80%y,100%y)
num0.SetLeftAndRight(0%x,50%x)
num10.SetLeftAndRight(50%x,75%x)
'btn7.SetTopAndBottom(75%x,100%x)
 

Attachments

  • 2022-03-07_194240.jpg
    2022-03-07_194240.jpg
    82.4 KB · Views: 97
  • 2022-03-07_194748.jpg
    2022-03-07_194748.jpg
    90.7 KB · Views: 93

eric19740521

Member
Licensed User
Longtime User
thanks,Erel.

I have put..
AutoScaleAll is disabled,

Then,I wrote log.

To Display the "num4 bottom" and "num1 top" values

b4a code:
 Log("100%y= "& (100%y) )
 Log("num4 bottom= "& (num4.Top + num4.Height) )
 Log("num1 top= "& num1.Top )

100%y= 704
num4 bottom= 294
num1 top= 295

"num4 bottom" and "num1 top" should be the same value.



VisualDesigner Script:
num4.SetTopAndBottom(40%y,60%y)
num1.SetTopAndBottom(60%y,80%y)

In "VisualDesigner Script", I don't understand 60%y and 40%y, why would it cause a problem??
This is my first attempt to design with "VisualDesigner Script"
 
Upvote 0

Sagenut

Well-Known Member
Licensed User
Longtime User
Post your project if possible so there will be chance to check for other issues.
 
Upvote 0

eric19740521

Member
Licensed User
Longtime User
Sorry! I thought I posted... I added the source code

Where it happens will be different on different phones!!

Suppose there are three mobile phones. (horizontal normal, vertical abnormal) or (horizontal abnormal, vertical normal) ...
or (horizontal normal, vertical normal) ...

The file is as follows:

Calculator B4A Source Code

Buttons and labels use CustomView ..xyzUI Lib(xyzButton.xyzLabel ) ..B4J Source Code,
 
Last edited:
Upvote 0

Sagenut

Well-Known Member
Licensed User
Longtime User
Share your project using the Attach File command of the forum posting.
 
Upvote 0

eric19740521

Member
Licensed User
Longtime User
Calculator.Zip ==> Calculator B4A Source Code

xyzUI.zip ==> Buttons and labels use CustomView ..xyzUI Lib(xyzButton.xyzLabel ) ..
 

Attachments

  • xyzUI.zip
    13.4 KB · Views: 53
  • Calculator.zip
    11.6 KB · Views: 58
Upvote 0

Sagenut

Well-Known Member
Licensed User
Longtime User
The project is missing the .BAL Designer files.
Did you exported it using the EXPORT AS ZIP function of the B4A IDE?
 
Upvote 0

eric19740521

Member
Licensed User
Longtime User
No...Sorry
After the file is compressed, the .zip file is large. So some of them were deleted by me
I checked, bal was deleted by me
 

Attachments

  • Calculator.zip
    11.6 KB · Views: 61
Upvote 0

Sagenut

Well-Known Member
Licensed User
Longtime User
It looks like the same example without BAL has been attached.
Sorry but I am calling myself out.
 
Upvote 0

eric19740521

Member
Licensed User
Longtime User

klaus:​

thx..I use b4a packaging tool. Re-upload .I download the file. And check if it contains bal...(layout.bal,func.bal)

Sagenut:​

sorry..I have checked.. but the uploaded files are always missing..
 

Attachments

  • Calc.zip
    16.2 KB · Views: 59
Last edited:
Upvote 0

klaus

Expert
Licensed User
Longtime User
On my device it does not look as on yours.
But I see too a small difference in the line.
I replaced for the left buttons the code like below and it seems to look better:
num4.SetTopAndBottom(y4,y6)
by
num4.Height = y2
num4.Top = num7.Bottom

and for the bottom ones.
num0.Height = 100%y - num1.Bottom
num0.Top = num1.Bottom

Try the same code to see if it looks better on your devices.
I checked only for the left row of buttons, you need to modify the code for the others.
 
Upvote 0

eric19740521

Member
Licensed User
Longtime User

klaus:​

1.I tried your method. There is still something abnormal on a certain mobile phone..
625.jpg


So I changed the way...Increase the spacing size

626.jpg

2.

I give up the power of Visual Designer..​

I try to write in B4A

No problem with this.. but need to take some care to maintain various equipment sizes
B4A set top and bottom:
    '按鈕
    btn1.Height = PaneFunc.Height /5
    btn1.Width = PaneFunc.Width /4
  
    btn1.Top = 0
    btn2.Top = 0
    btn3.Top = 0
    btn4.Top = 0
    btn1.Height = PaneFunc.Height /5
    btn2.Height = btn1.Height
    btn3.Height = btn1.Height
    btn4.Height = btn1.Height
  
  
  
  
    num7.Top = btn1.Top + btn1.Height
    num8.Top = num7.Top
    num9.Top = num7.Top
    btn5.Top = num7.Top
    num7.Height = btn1.Height
    num8.Height = btn1.Height
    num9.Height = btn1.Height
    btn5.Height = btn1.Height

    num4.Top = num7.Top + num7.Height
    num5.Top = num4.Top
    num6.Top = num4.Top
    btn6.Top = num4.Top
    num4.Height = btn1.Height
    num5.Height = btn1.Height
    num6.Height = btn1.Height
    btn6.Height = btn1.Height
  
    num1.Top = num4.Top + num4.Height
    num2.Top = num1.Top
    num3.Top = num1.Top
    btn7.Top = num1.Top
    num1.Height = btn1.Height
    num2.Height = btn1.Height
    num3.Height = btn1.Height
    btn7.Height = 100%y-num1.Top
  
    num0.Top = num1.Top + num1.Height
    num10.Top = num0.Top
    num0.Height = PaneFunc.Height - num0.Top
    num10.Height = num0.Height
  
  

    btn1.Left = 0
    btn2.Left = btn1.Left+btn1.Width
    btn3.Left = btn2.Left+btn1.Width
    btn4.Left = btn3.Left+btn1.Width
    btn2.Width = btn1.Width
    btn3.Width = btn1.Width
    btn4.Width = btn1.Width
  
    num7.Left = 0
    num8.Left = btn1.Left+btn1.Width
    num9.Left = btn2.Left+btn1.Width
    btn5.Left = btn3.Left+btn1.Width
    num7.Width = btn1.Width
    num8.Width = btn1.Width
    num9.Width = btn1.Width
    btn5.Width = btn1.Width

    num4.Left = 0
    num5.Left = btn1.Left+btn1.Width
    num6.Left = btn2.Left+btn1.Width
    btn6.Left = btn3.Left+btn1.Width
    num4.Width = btn1.Width
    num5.Width = btn1.Width
    num6.Width = btn1.Width
    btn6.Width = btn1.Width
  
    num1.Left = 0
    num2.Left = btn1.Left+btn1.Width
    num3.Left = btn2.Left+btn1.Width
    btn7.Left = btn3.Left+btn1.Width
    num1.Width = btn1.Width
    num2.Width = btn1.Width
    num3.Width = btn1.Width
    btn7.Width = btn1.Width
  
    num0.Left = 0
    num10.Left = num3.left
    num0.Width = btn1.Width+btn2.Width
    num10.Width = btn1.Width

627.jpg
 

Attachments

  • Calc.zip
    17.2 KB · Views: 42
  • xyzUI.zip
    20.9 KB · Views: 48
Last edited:
Upvote 0

eric19740521

Member
Licensed User
Longtime User

@klaus:​

1.I tried your method. There is still something abnormal on a certain mobile phone..
I'm sure all buttons are modified

I'll check again tomorrow
625.jpg
 
Upvote 0

eric19740521

Member
Licensed User
Longtime User

klaus:​

thx.Test several devices. The screen buttons are arranged normally

687.jpg


I refer to klaus' opinion...
Because of the location. I try not to use SetTopAndBottom and SetLeftAndRight

Visual Designer has a good design method. It takes more thought to adopt traditional design. Visual Designer can do preview. And he is more comfortable

Below is the correction I made
B4A VD Code:
'
btn1.Height = 20%y
btn1.Width = 25%x
H1 = btn1.Height         '<------
W1 = btn1.Width          '<-----
'c 2 3 4
btn1.SetTopAndBottom(0,H1)
btn2.SetTopAndBottom(0,H1)
btn3.SetTopAndBottom(0,H1)
btn4.SetTopAndBottom(0,H1)


'7 8 9
num7.Top = btn1.Bottom
num7.Height = H1
num8.Top = btn1.Bottom
num8.Height = H1
num9.Top = btn1.Bottom
num9.Height = H1
btn5.Top = btn1.Bottom
btn5.Height = H1
 

'4 5 6
num4.Top = num7.Bottom
num4.Height = H1
num5.Top = num7.Bottom
num5.Height = H1
num6.Top = num7.Bottom
num6.Height = H1
btn6.Top = num7.Bottom
btn6.Height = H1
 

'1 2 3
num1.Top = num4.Bottom
num1.Height = H1
num2.Top = num4.Bottom
num2.Height = H1
num3.Top = num4.Bottom
num3.Height = H1
btn7.Top = btn6.Bottom
btn7.Height = 100%y- btn7.Top
 

'0 & .
num0.Top = num1.Bottom
num0.Height = 100%y-num0.Top
num10.Top = num1.Bottom
num10.Height = 100%y-num0.Top
 
'C 7 4 1 0
'btn1.SetLeftAndRight(0%x,W1)
'num7.SetLeftAndRight(0%x,W1)
'num4.SetLeftAndRight(0%x,W1)
'num1.SetLeftAndRight(0%x,W1)
'num0.SetLeftAndRight(0%x,W1)
btn7.Left = 0%x
num7.Left = 0%x
num4.Left = 0%x
num1.Left = 0%x
'num0.Left = 0%x

btn7.Width = W1
num7.Width = W1
num4.Width = W1
num1.Width = W1
'num0.Width = W1

'/ 8 5 2
btn2.Left = btn1.Right
num8.Left = num7.Right
num5.Left = num4.Right
num2.Left = num1.Right
btn2.Width = W1
num8.Width = W1
num5.Width = W1
num2.Width = W1

'X 9 6 3
btn3.Left = btn2.Right
num9.Left = num8.Right
num6.Left = num5.Right
num3.Left = num2.Right
btn3.Width = W1
num9.Width = W1
num6.Width = W1
num3.Width = W1

'<- - + =
btn4.Left = btn3.Right
btn5.Left = num9.Right
btn6.Left = num6.Right
btn7.Left = num3.Right
btn4.Width = W1
btn5.Width = W1
btn6.Width = W1
btn7.Width = W1

'
num0.Left = num1.Left
num0.Width = num2.Right
'num0.Right = num2.Right     'this is false
num10.Left = num0.Right
num10.Width = W1
 

Attachments

  • Calc.zip
    16.3 KB · Views: 45
Upvote 0
Top