Android Tutorial Designer anchors - Video example

Discussion in 'Tutorials & Examples' started by Erel, Jan 8, 2014.

  1. Erel

    Erel Administrator Staff Member Licensed User

    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.
     
    pesquera, GudEvil, manasak19 and 2 others like this.
  2. George Anifantakis

    George Anifantakis Member Licensed User

    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.
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    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.
     
  4. George Anifantakis

    George Anifantakis Member Licensed User

    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)?
     
  5. Erel

    Erel Administrator Staff Member Licensed User

    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.
     
  6. MiguelCZ

    MiguelCZ Member Licensed User

    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
     
  7. LucaMs

    LucaMs Expert Licensed User

    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:
    upload_2015-9-17_0-26-27.png

    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).
     
    Last edited: Sep 17, 2015
  8. MaFu

    MaFu Well-Known Member Licensed User

    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).
     
  9. Erel

    Erel Administrator Staff Member Licensed User

    You should use the designer script to center a control in the middle:
    Code:
    Button5.HorizontalCenter = 50%x
     
  10. LucaMs

    LucaMs Expert Licensed User

    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
     
  11. LucaMs

    LucaMs Expert Licensed User

    upload_2015-9-17_9-52-6.png

    upload_2015-9-17_10-30-45.png
     
    Last edited: Sep 17, 2015
  12. LucaMs

    LucaMs Expert Licensed User

    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)



    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)...!
     
    Last edited: Sep 17, 2015
  13. MaFu

    MaFu Well-Known Member Licensed User

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

    LucaMs Expert Licensed User

    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.
     
    Last edited: Sep 18, 2015
  15. sorex

    sorex Expert Licensed User

    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?
     
  16. LucaMs

    LucaMs Expert Licensed User


    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.
    Anchor.gif

    (sorry for this bad animated gif :))
     
  17. Erel

    Erel Administrator Staff Member Licensed User

    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.

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

    How are you changing its size?
     
    Jmu5667 likes this.
  18. sorex

    sorex Expert Licensed User

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

    Erel Administrator Staff Member Licensed User

    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.
     
Loading...