Android Question How to get 4 buttons to size evenly over the width of an activity?

[IanMc]

How would I do this?

I have 4 buttons

b1 b2 b3 b4

and I'd like to use designer script to get them to size evenly over the width of the activity (or panel).

Things I've tried so far just get the last button to stretch to fill the remaining space.

Any ideas?

 

[eps]

Surely it's a matter of using 25%x or similar with spacing involved...

 

[IanMc]

ha! you'd think so wouldn't you

but this:

Button1.Width = 25%x
Button2.Width = 25%x
Button3.Width = 25%x
Button4.Width = 25%x

produces some interesting results when you send to the UI Cloud

ah, this is better..... is it the correct way? it seems to look a lot better on the UI Cloud:

Button1.SetLeftAndRight(0, 25%x)
Button2.SetLeftAndRight(Button1.Right, 50%x)
Button3.SetLeftAndRight(Button2.Right, 75%x)
Button4.SetLeftAndRight(Button3.Right, 100%x)

and this puts a little gap between the buttons:

Button1.SetLeftAndRight(1, 25%x - 1)
Button2.SetLeftAndRight(Button1.Right + 1, 50%x - 1)
Button3.SetLeftAndRight(Button2.Right + 1, 75%x - 1)
Button4.SetLeftAndRight(Button3.Right + 1, 100%x - 1)

 

[Erel]

Use 1dip instead of 1.

 

[IanMc]

Ah, cool, thanks Erel

 

[canalrun]

spc = (Activity.Width - (b1.Width + b2.Width + b3.width + b4.Width)) / 5
b1.Left = spc
b2.Left = b1.Left + b1.Width + spc
b3.Left = b2.Left + b2.Width + spc
b4.Left = b3.Left + b3.Width + spc

 

[IanMc]

@canalrun

Interesting algorithm.

Unfortunately it goes horribly wrong and all the buttons are bunched up and overlap on the left.

There is no provision in your algorithm to change the width of the buttons but I can see that it could be useful to have a way to compute the values, not just for buttons but for other views too.

 

[canalrun]

Hello,
Sorry, you are right. My answer was good, unfortunately to a different question
My answer would equally space four buttons within the width of the Activity as long as the sum of the button widths is less than the Activity width.

I have attached a small test project and image showing this solution.

If you want to compute the max size of the buttons and have spaces between the buttons equal to one third the size of the buttons, you could compute:

f = 4 + 5 * 0.33 ' 4 buttons, 5 spaces
sz = Round(Activity.width / f)

sz is now the max button width in pixels. Set each button width equal to sz then feed that in to my previous algorithm. Doing it this way rather than multiplying sz by 0.33 avoids truncation errors.

B1.width = sz
B2.width = sz
B3.width = sz
B4.width = sz

spc = (Activity.Width - (b1.Width + b2.Width + b3.width + b4.Width)) / 5

b1.Left = spc
b2.Left = b1.Left + b1.Width + spc
b3.Left = b2.Left + b2.Width + spc
b4.Left = b3.Left + b3.Width + spc

Barry.

 

[IanMc]

Ah, thanks Barry!

All good stuff.

I'm trying to create a screen with lots of views on it that will look good on all devices.

I've done quite well however on a tablet there is still a lot of unused real-estate on the bottom but I have a secret weapon, the user of my BTInterface will be able to move some of the components

It's handy to see code like this to know exactly what's possible with the designer script code.