Android Question Weird layout with anchor

[Lucas Siqueira]

Why using anchoring does my layout look weird?
In the preview screen I have three buttons that are anchored on the left and right, if you notice they have a horizontal space between them, but on the real device the screen looks weird, has no spacing. What am I doing wrong?

When I use the percentage script, it works perfect!

My phone is a Xiaomi Redmi 5 Plus.

 

[Peter Simpson]

@Lucas Siqueira,

Have you watched this tutorial video?

Enjoy...

 

[emexes]

I've found it useful to do layouts in B4J, where you can resize the WYSIWYG window to get immediate feedback on what will (likely) happen on device screens with different aspect ratios and sizes (to a lesser degree, if using AutoScale).

The new copy controls between different platforms feature will probably make this process easier. Having said that, what I actually do is run a B4J program that generates Designer Script from a variety of aesthetic master variants, that I then paste into the script area of the corresponding B4A/B4I layout, which works a treat but is obviously a bit tedious.

 

[Lucas Siqueira]

I've found it useful to do layouts in B4J, where you can resize the WYSIWYG window to get immediate feedback on what will (likely) happen on device screens with different aspect ratios and sizes (to a lesser degree, if using AutoScale).

The new copy controls between different platforms feature will probably make this process easier. Having said that, what I actually do is run a B4J program that generates Designer Script from a variety of aesthetic master variants, that I then paste into the script area of the corresponding B4A/B4I layout, which works a treat but is obviously a bit tedious.

View attachment 83112

View attachment 83120

View attachment 83121

View attachment 83122

Emeses, to put 5 buttons on the same line using the anchor would be messy?

 

[klaus]

You need to do it in the Designer Script.
Then, it depends on what you want:
- adjust spaces for given widths?
- adjust widths for given spaces?
- adjust both proportionally?

Attached a small B4J project showing the differences.

 

[emexes]

to put 5 buttons on the same line using the anchor would be messy?

Depends what you want to happen with them when the layout is scaled to fit the phone screen.

If you space them out evenly, all anchored to the left, and if for example the phone screen is 1.3 times larger than your layout, then all the positions and sizes are multiplied by 1.3, and your buttons will still be evenly spaced across the screen. Ditto with vertical alignments.

But if the aspect ratios of the phone and the layout are not the same, then things would begin not lining up on the right edge or bottom edge. I read a lot about how anchors are the answer, but my experience has been that they are only the answer if you have one or two things across the width or height of the layout, and there was a mention in the video above at 8:04 that alluded to the same limit.

The solution to that is Designer Scripting, per the above video from 9:42. That example is vertical rather than horizontal, but the same concepts apply.

 

[emexes]

I was going to suggest asking Klaus aka Master of Bending Layouts To His Will, but I thought best leave him in peace until the going gets tough... happily he has weighed in anyway

 

[Lucas Siqueira]

I was going to suggest asking Klaus aka Master of Bending Layouts To His Will, but I thought best leave him in peace until the going gets tough... happily he has weighed in anyway

Thank you all!
I'm using anchor for simple layouts, but I use the script for more detailed layouts! Thank you all!