Layout in RenderScript

Layout decides where each element sits and how big it is. Every element has a position and a size, and a composition can arrange its elements for you. The same ideas are explained with pictures in Position and size and Auto layout.

Position and size

Every element sits in a parent: the template, or a composition.

• x and y place the element's anchor in its parent, measured from the parent's left and top edges.
• x_anchor and y_anchor choose the anchor, as a percentage of the element's own size. 0% and 0% is its top left corner.
• width and height set its size.

x, y, x_anchor and y_anchor all default to 50%, so an element is centered until you say otherwise. Shapes are the exception: their anchors default to null. A shape with a width and height then behaves as if they were 50%, and a shape sized by its path ignores them (see Shape properties). width and height default to 100%, except for text and shapes, where they default to null.

This example puts a label in the top right corner:

{
  "output_format": "jpg",
  "width": 1280,
  "height": 720,
  "elements": [
    {
      "type": "text",
      "text": "New",
      "x": "95%",
      "y": "5%",
      "x_anchor": "100%",
      "y_anchor": "0%",
      "font_size": "8 vmin",
      "fill_color": "#ffffff"
    }
  ]
}

Units and null

A number without a unit is in pixels. With a unit, it is measured against something:

• %: the parent's width or height.
• vw and vh: 1% of the output's width or height.
• vmin and vmax: 1% of the output's shorter or longer side.

A width or height of null makes the element as big as its content: a text as big as its words, a composition as big as the elements in its auto layout, and an image or video by its own proportions.

Auto layout

A composition can arrange its elements in a column or a row, one after another. In RenderScript these properties are named flow:

Example

A card that grows with its text. The card's height is null, and both texts join its layout with a y of null:

{
  "output_format": "jpg",
  "width": 1280,
  "height": 720,
  "fill_color": "#e8ecf3",
  "elements": [
    {
      "type": "composition",
      "name": "Card",
      "width": "60%",
      "height": null,
      "x_padding": "6 vmin",
      "y_padding": "6 vmin",
      "fill_color": "#ffffff",
      "border_radius": "3 vmin",
      "flow_direction": "vertical",
      "flow_gap": "3 vmin",
      "elements": [
        {
          "type": "text",
          "name": "Title",
          "y": null,
          "width": "100%",
          "height": null,
          "text": "Open house this Sunday",
          "font_weight": "700",
          "font_size": "7 vmin",
          "fill_color": "#111111"
        },
        {
          "type": "text",
          "name": "Body",
          "y": null,
          "width": "100%",
          "height": null,
          "text": "Three bedrooms, a garden and parking. Doors open at ten.",
          "font_size": "4 vmin",
          "fill_color": "#555555"
        }
      ]
    }
  ]
}

With a longer title, the same RenderScript gives a taller card, and the text below it moves down:

Good to know

• Elements are placed in the order of their track, lowest first. Without a track, that is the order they are written in.
• In a composition that hugs, a % size in that direction is a share of the space inside the composition, worked out together with everything else: an element of 100 px beside one of 50% makes the composition 200 px, and the second element 100 px. A % gap works the same way. Keep the shares under 100% in total. At 100% or more, each element fits its own content and a shape gets no size at all, which is also why an image or composition without a size fits its content there. Padding takes px, vmin, vw or vh, never %.
• Only elements that are visible at that moment take up room, so the layout changes as elements start and end. An element with an opacity of 0% still takes its room.
• A keyframed x or y takes the element out of the layout. To animate an element in, use animations.

Compared with CSS flexbox

Auto layout follows the same model as CSS flexbox. If you know flexbox, this is how the two line up:

Two things work differently:

• Elements never wrap onto a next row or column.
• There is no align-items. Each element is aligned on its own, through its other coordinate and its anchor.