Part 1 - Designer Basics

PDF for offline use:

Let us know how you feel about this.


0/250
Thanks for the feedback!

last updated: 2015-11

Part 1 introduces Designer features, explains how to launch the Designer, describes the Design Surface, and details how to use the Properties pane to edit widget properties.

Launching the Designer

The Designer is launched automatically when a layout is created, or it can be launched by double-clicking an existing .axml file. For example, double-clicking Main.axml in the Resources > Layout folder will load the Designer as shown below:

Likewise, you can add a new layout by right-clicking the layout folder in the Solution Pad and selecting Add > New File > Android > Layout:

Likewise, you can add a new layout by right-clicking the layout folder in the Solution Explorer and selecting Add > New Item... > Android Layout:

This creates a new .axml file and loads it onto the Design Surface.

Designer Features

The Designer is composed of several sections that support its various features, as shown in the following screenshot:

When you edit a layout in the Designer, you use the following features to create and shape your design:

  • Design Surface – Facilitates the visual construction of the user interface by giving you an editable representation of how the layout will appear on the device.

  • Toolbar – Displays a list of selectors: Device, Version, Theme, layout configuration, and Action Bar settings. The Toolbar also includes icons for launching the Theme Editor and for enabling the Material Design Grid.

  • Toolbox – Provides a list of widgets and layouts that you can drag and drop onto the Design Surface.

  • Property Pad – Lists the properties of the selected widget for viewing and editing.

  • Document Outline – Displays the tree of widgets that compose the layout. You can click an item in the tree to cause it to be selected in the Designer. Also, clicking an item in the tree loads the item's properties into the Property Pad.

  • Design Surface – Facilitates the visual construction of the user interface by giving you an editable representation of how the layout will appear on the device.

  • Toolbar – Displays a list of selectors: Device, Version, Theme, layout configuration, and Action Bar settings. The Toolbar also includes icons for launching the Theme Editor and for enabling the Material Design Grid.

  • Toolbox – Provides a list of widgets and layouts that you can drag and drop onto the Design Surface.

  • Properties Window – Lists the properties of the selected widget for viewing and editing.

  • Document Outline – Displays the tree of widgets that compose the layout. You can click an item in the tree to cause it to be selected in the Designer. Also, clicking an item in the tree loads the item's properties into the Properties window.

Toolbar

The Toolbar (positioned above the Design Surface) presents configuration selectors and tool menus:

The Toolbar provides access to the following features:

  • Alternative Layout Selector – Allows you to select from different layout versions.

  • Device Selector – Defines a set of qualifiers associated with a particular device such as screen size, resolution, and keyboard availability. You can also add and delete new devices.

  • Android Version Selector – The Android version that the layout is targeting. The Designer will render the layout according to the selected Android version.

  • Theme Selector – Selects the UI theme for the layout.

  • Configuration Selector – Selects the device configuration, such as portrait or landscape.

  • Resource Qualifier Options – Opens a dialog that presents drop-down menus for selecting Language, UI Mode, Night Mode, and Round Screen options.

  • Action Bar Settings – Configures the Action Bar settings for the layout.

  • Theme Editor – Opens the Theme Editor, which makes it possible for you to customize elements of the selected theme.

  • Material Design Grid – Enables or disables the Material Design Grid. The drop-down menu item adjacent to the Material Design Grid opens a dialog that enables you to customize the grid.

Each of these features is explained in more detail in parts 2-4:

Part 2 - Resource Qualifiers and Visualization Options provides detailed information about the Device Selector, Android Version Selector, Theme Selector, Configuration Selector, Resource Qualifications Options, and Action Bar Settings.

Part 3 - Alternative Layout Views explains how to use the Alternative Layout Selector.

Part 4 - Material Design Features provides a comprehensive overview of the Theme Editor and the Material Design Grid.

Design Surface

The Designer makes it possible for you to drag and drop widgets from the toolbox onto the Design Surface. When you interact with widgets in the Designer (by either adding new widgets or repositioning existing ones), vertical and horizontal lines are displayed to mark the available insertion points. In the following example, a new Button widget is being dragged to the Design Surface:

Additionally, widgets can be copied: you can use copy and paste to copy a widget, or you can drag and drop an existing widget while pressing the Ctrl key.

Context Menu Commands

A context menu is available both in the Design Surface and in the Document Outline. This menu displays commands that are available for the selected widget and its container, making it easier for you to perform operations on containers (which are not always easy to select on the Design Surface). Here is an example of a context menu:

In this example, right-clicking a TextBox opens a context menu that provides several options:

  • RelativeLayout – opens a submenu for editing the RelativeLayout parent of the TextBox.

  • LinearLayout – opens a submenu for editing the LinearLayout parent of the RelativeLayout.

  • Delete, Copy, and Cut – operations that apply to the right-clicked TextBox.

Zoom Controls

The Design Surface supports zooming via several controls as shown:

These controls make it easier to see certain areas of the user interface in the Designer:

  • Highlight Containers – Highlights containers on the Design Surface so that they are easier to locate while zooming in and out.

  • Normal Size – Renders the layout pixel-for-pixel so that you can see how the layout will look at the resolution of the selected device.

  • Fit to Window – Sets the zoom level so that the entire layout is visible on the Design Surface.

  • Zoom In – Zooms in incrementally with each click, magnifying the layout.

  • Zoom Out – Zooms out incrementally with each click, making the layout appear smaller on the Design Surface.

Note that the chosen zoom setting does not affect the user interface of the application at runtime.

Property Pad

The Designer supports the editing of widget properties through the Property Pad. The properties listed in the Property Pad change depending on which widget is selected in the Designer surface. When the Button in the previous example is selected, the properties for that Button widget are shown:

Property Pad Sections

The Property Pad is divided into several sections that group similar properties together – this makes it easier to locate properties of interest:

  • Widget – Main properties of the widget, such as id, visibility, text, etc. Properties for managing the widget's content are usually placed here.

  • Style – Properties that change the visual appearance of the widget, such as font, text color, background, etc.

  • Layout – Properties that set the location and size of the widget.

  • Scroll – Scrolling properties.

  • Behavior – Flags that set how the widget behaves.

Properties Window

The Designer supports the editing of widget properties through the Properties Window. The properties listed in the Properties window change depending on which widget is selected on the Design Surface. When the Button in the previous example is selected, the properties for that Button widget are shown:

Default Values

The properties of most widgets will be blank in the Property Pad because their values inherit from the selected Android theme. The Property Pad will only show values that are explicitly set for the selected widget; it will not show values that are inherited from the theme.

The properties of most widgets will be blank in the Properties window because their values inherit from the selected Android theme. The Properties window will only show values that are explicitly set for the selected widget; it will not show values that are inherited from the theme.

Referencing Resources

Some properties can reference resources that are defined in files other than the layout .axml file. The most common cases of this type are string and drawable resources. However, references can also be used for other resources, such as Boolean values and dimensions. When a property supports resource references, a browse icon (an ellipsis, …) is shown next to the text entry for the property. This button opens a resource selector when clicked.

For example, the following screenshot shows the resources available when clicking the ellipsis to the right of the text field for a Button widget in the Property Pad:

For example, the following screenshot shows the resources available when clicking the ellipsis to the right of the text field for a Button widget in the Properties window:

The next example illustrates the resource selector for the Src property of an ImageView:

Boolean Property References

Boolean properties are normally shown as a check box in the Property Pad. When a Boolean property supports resource references, a small check box appears next to the property. A checked checkbox means true and an empty box means false. You can also directly enter a value such as true or false. Hovering your mouse over the input brings up a small text field icon. You can click on it if you wish to enter the value manually.

Boolean properties are normally chosen from a pull-down menu in the Properties window. You can select a true or false value, or you can select a property reference by clicking Select Resource.... You can also directly enter a value such as true or false.

Grouped Properties

Some widgets have multi-value properties that are grouped together (such as Padding, for example). These property values are listed in the Property Pad in a single, expandable row. Some of these properties can be edited directly in the grouped row, such as the Padding property shown below:

Editing Properties Inline

The Android Designer supports direct editing of certain properties on the Design Surface (so you don't have to search for these properties in the property list). Properties that can be directly edited include text, margin, and size.

Text

The text properties of some widgets (such as Button and TextView), can be edited directly on the Design Surface. Double-clicking a widget will put it into edit mode, as shown below:

You can enter a new text value or you can enter a new resource string. In the following example, the @string/hello resource is being replaced with the text, CLICK THIS BUTTON:

This change is stored in the widget's text property; it does not modify the value assigned to the @string/hello resource. When you key in a new text string, you can press Shift + Enter to automatically link the entered text to a new resource.

Margin

When you select a widget, the Designer displays handles that allow you to change the size or margin of the widget interactively. Clicking the widget while it is selected toggles between margin-editing mode and size-editing mode.

When you click a widget for the first time, margin handles are displayed. If you move the mouse to one of the handles, the Designer displays the property that the handle will change (as shown below for the layout_marginLeft property):

If a margin has already been set, dotted lines are displayed, indicating the space that the margin occupies:

Size

As mentioned earlier, you can switch to size-editing mode by clicking a widget while it is already selected. Click the triangular handle to set the size for the indicated dimension to wrap_content:

Clicking the Wrap Content handle shrinks the widget in that dimension so that is no larger than necessary to wrap the enclosed content. In this example, the button text shrinks horizontally as shown in the next screenshot.

When the size value is set to Wrap Content, the Designer displays a triangular handle pointing in the opposite direction for changing the size to match_parent:

Clicking the Match Parent handle restores the size in that dimension so that it is the same as the parent widget.

Also, you can drag the circular resize handle (as shown in the above screenshots) to resize the widget to an arbitrary dp value. When you do so, both Wrap Content and Match Parent handles are presented for that dimension:

Not all containers allow editing the Size of a widget. For example, notice that in the screenshot below with the LinearLayout selected, the resize handles do not appear:

Document Outline

The Document Outline displays the widget hierarchy of the layout. In the following example, the containing LinearLayout widget is selected:

The outline of the selected widget (in this case, a LinearLayout) is also highlighted on the Design Surface. The selected widget in the Document Outline stays in sync with its counterpart on the Design Surface. This is useful for selecting view groups, which are not always easy to select on the Design Surface.

The Document Outline supports copy and paste, or you can use drag and drop. Drag and drop is supported from the Document Outline to the Design Surface as well as from the Design Surface to the Document Outline. Also, right-clicking an item in the Document Outline displays the context menu for that item (the same context menu that appears when you right-click that same widget on the Design Surface).

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.