Android Tutorial Designer anchors - Video example

This short video demonstrates how anchors can be used to build a flexible interface.
The small white arrows show the anchors settings.


This layout will properly scale to any screen size.

Recommended video tutorial:

 

[George Anifantakis]

Hi,
If i add a new control like a textbox using code can, i set the anchors of the textbox by code. I can't find any method to use.

Thanks.

 

[Erel]

No. The anchors is a designer only feature.

You can however add the new view based on the location of an existing one that was added with the designer.

 

[George Anifantakis]

What do you mean by that. I will create for instance an edit text box (txt1) with the designer and then using code I will create another one with top, left, width and height same with the one added with the designer (txt1)?

 

[Erel]

Something like this. The values don't need to be exactly the same. You can put it above or below the designer view for example.

 

[MiguelCZ]

How do I select all the layout like that so I can stretch everything at the same time

Edit: oh I see. using a panel

 

[LucaMs]

This short video demonstrates how anchors can be used to build a flexible interface.

I think that your layout scales "well" (EditText1 could become too large or too small) because the buttons are placed in the corners.

If you had a layout like this:

and you wanted that the central buttons (5-6-7) to stay at the center? How do you anchor them? You can't, I think; and this is because there is not an "anchor NONE" setting.

As you know, MS .Net has this setting (NONE) and it has also two other very useful settings: MaximumSize and MinimumSize.
I think that without these three settings, you can not scale well a layout automatically.

Finally, it has the possibility to anchor controls at runtime (but I think those three settings are more important).

Hi,
If i add a new control like a textbox using code can, i set the anchors of the textbox by code. I can't find any method to use.

Thanks.

 

[MaFu]

Finally, it has the possibility to anchor controls at runtime

On Windows i can resize my window anytime so this is a must.
On Android i have a fixed screen size, no need for anchors at runtime.
If i really need a view to stay in center i can use designer script.

Microsoft VisualStudio:
Anchor "None" is the same as anchor "top/left"
MaximumSize/MinimumSize: no need on Android (fixed screen size without resize on runtime).

 

[Erel]

and you wanted that the central buttons (5-6-7) to stay at the center? How do you anchor them?

You should use the designer script to center a control in the middle:

Button5.HorizontalCenter = 50%x

 

[LucaMs]

You should use the designer script to center a control in the middle:

Button5.HorizontalCenter = 50%x

Thank you, I know, but I was talking to automate the adaptation of the layout.

I could use

Button5.HorizontalCenter = 50%x

like I could use

Button1.top = 0 : button1.left = 0

to "anchor" button1

 

[LucaMs]

Anchor "None" is the same as anchor "top/left"

 

[LucaMs]

On Windows i can resize my window anytime so this is a must.
On Android i have a fixed screen size, no need for anchors at runtime.

If so, you should not have the need to anchor them in the Designer.

It is not so. You resize the layout when you "install your layout" on different devices (different resolutions)

MaximumSize/MinimumSize: no need on Android (fixed screen size without resize on runtime).

Same as above.


Also, If you had the possibilty of anchor views in a panel at runtime and this panel will be resized at runtime (by code or by user actions)...!

 

[MaFu]

If so, you should not have the need to anchor them in the Designer.

It is not so. You resize the layout when you "install your layout" on different devices (different resolutions)

So what's the problem? This case is actually handled.

 

[LucaMs]

No problems, I just wanted to say that you use anchors (and that you could have the need to use them also in your code), given that your layouts "are not fixed".

Set anchor to None and MinimumSize - MaximumSize could be useful.

Through them you could maintain views in their positions relative to the edges of the layout (anchor None) and prevent a button become too small or too big (min...max...).

This was not my "Wish", but I was still trying things with the Designer.

 

[sorex]

I finally had some time to test feature.

I must admit that it is hard to master and only seems suitable for special occasions.

doing an evenly spaced/sized 3x3 seems to be impossible with this?

when setting something to a right anchor makes it glued to the right border of the parent panel.
but when you change its size it goes beyond that panel border.

I had to force .right to 100%x in the designer script to get it right.

Is this normal behaviour?

 

[LucaMs]

but when you change its size it goes beyond that panel border.

I had to force .right to 100%x in the designer script to get it right.

When (and where) do you change its size? Right alignment due to the anchor, if you increase the size of a view, should work only in Designer, not at runtime.

(sorry for this bad animated gif )

 

[Erel]

I must admit that it is hard to master and only seems suitable for special occasions.

I don't agree. Once you understand how anchors work, and it is a very standard feature, you will see that most layouts should use anchors.

doing an evenly spaced/sized 3x3 seems to be impossible with this?

That's true. For this you should use designer script.

when setting something to a right anchor makes it glued to the right border of the parent panel.
but when you change its size it goes beyond that panel border.

How are you changing its size?

 

[sorex]

I change the width in the designer script as it didn't size it to 33% (size of a 3x3 grid cell)

 

[Erel]

The anchors are applied before the script starts (with a small exception related to auto scale).

As I wrote, to create a 3 x 3 grid you should use the designer script.