1. Automate
2. Documentation
3. Custom interface layout

Custom interface layout

Experimental! The custom layout feature is a work in progress, breaking changes may be necessary, don't use in production. A layout editor is planned, so is support for more UI elements where possible, and custom layout dialogs.

A graphical user interface (GUI) layout, as used by the Interface layout update and Notification show blocks, is declared as an XML document containing view elements representing the UI components drawn on screen. A document has a single (root) element that itself may contain other views (elements) that it draw.

The XML element (tag) name is its UI component class name. The XML attributes must be in the http://schemas.android.com/apk/res/android namespace, usually prefixed android: but not necessarily so use a: for less typing. See available attribute value types.

The following XML elements, UI component class names, are available:

• AdapterViewFlipper
• AnalogClock
• Button
• CheckBox
• Chronometer
• FrameLayout
• GridLayout
• GridView
• ImageButton
• ImageView
• LinearLayout
• ListView
• ProgressBar
• RadioButton
• RadioGroup
• StackView
• Switch
• TextClock
• TextView
• ViewFlipper

Examples

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello world"
    android:textColor="#F00"/>
  <Button
    android:id="@android:id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me"/>
</LinearLayout>

The xmlEncode function, in expression mode, can be used to declare the same layout as JSON:

xmlEncode({
  "#xmlns": { "http://schemas.android.com/apk/res/android": "android" },
  "name": "LinearLayout",
  "@android:layout_width": "match_parent",
  "@android:layout_height": "match_parent",
  "children": [
    {
      "name": "TextView",
      "@android:layout_width": "wrap_content",
      "@android:layout_height": "wrap_content",
      "@android:text": "Hello world",
      "@android:textColor": "#F00"
    },
    {
      "name:": "Button",
      "@android:id": "@android:id/button1",
      "@android:layout_width": "wrap_content",
      "@android:layout_height": "wrap_content",
      "@android:text": "Click me"
    }
  ]
}, "1")