How to align controls vertically?

Question

I have several elements on screen in XML file

<layout:VerticalLayout xmlns:layout="sap.ui.layout" xmlns="sap.m">
  <Input />
  <Button />
  <!-- ... -->
</layout:VerticalLayout>

How can I add something like layout gravity or align the controls vertically? E.g. I want the elements in the center of the screen.

Answer 1

Since you're using the sap.m library anyway, I would recommend to use the sap.m.VBox control (or sap.m.HBox for horizontal layouts) The VBox does exactly the same as the VerticalLayout and more (you can specify alignment, justification in a truly flexible way).

The VBox and HBox inherit from sap.m.FlexBox, see these examples on what you can do: https://sdk.openui5.org/entity/sap.m.FlexBox