Part 1 - Designer Basics

Xamarin Inc.

Launching the Designer

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

Likewise, adding a new layout by right-clicking on the layout folder in the Solution Pad, and then selecting Add > New File > Mono for Android > Android Layout in the dialog shown below, will create the .axml file and load it into the designer:

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

1. Design Surface ? Shown in the document area. Allows the visual construction of user interfaces.

2. Toolbox ? Shows a list of widgets and layouts that you can drag and drop into the design surface. 3. Property Pad ? Shows the properties for the selected widget. 4. Document Outline ? Shows the tree of widgets that compose the layout you are editing. You can click on an item in the tree to select it in the designer and see the properties in the Property Pad.

Layout Editing
The designer allows controls from the toolbox to be dragged and dropped onto the designer surface. When you interact with controls on the designer either to add new ones or reposition existing ones, vertical and horizontal lines are shown to mark the available insertion points where the controls can be added, as shown below:

Additionally, controls can be copied either with copy and paste or by dragging and dropping a control while pressing the Alt key. Context Menu Commands A context menu is available both in the designer surface and the outline view. This menu shows commands available for the selected control as well as its container, making it possible to run commands on containers, which are not easy to select on the designer surface. The menu is shown below:

Zoom Controls
The designer surface supports zooming via several controls as shown:

These controls change the zoom level, making it easier to see certain areas of the user interface in the designer. They do not affect the user interface of the application at runtime.

Editing Properties in the Property Pad

In addition to visually changing layouts, the designer supports editing control properties through the Property Pad. The available properties change based upon which control is selected in the designer surface, as shown below:

Property Pad Sections

The properties of a control can be changed in the Property Pad. As outlined below, the Property Pad is split into several sections, which makes it easier to locate the properties: 1. Widget ? Main properties of the control, such as id, visibility, text, etc. Properties for managing the control?s content are usually placed here. 2. Style ? Properties that change the visual appearance of the control, such as font, text color, background, etc. 3. Layout ? Properties that set the location and size of the control. 4. Scroll ? Scrolling properties. 5. Behavior ? Flags that set how the control behaves.

Default Values
The properties of most controls will be blank in the Property Pad because their values are inherited from the Android theme that?s being used. The Property Pad will only show values that are explicitly set for the selected control. It will not show values that are inherited from the theme.

Referencing resources
Some properties can reference resources that are defined in other files. The most common cases of this type are string resources and drawables. However, references can also be used for other resources, such as Boolean values and dimensions. When a property supports resource references, a browse button is shown next to the text

entry for the property. This button will show a resource selector when clicked. For example, the following screenshot shows the resources available to choose from when selecting the button to the right of the text field for a Button control in the Property Pad:

Likewise, for the Src property of an ImageView, a dialog with image resources to choose from is shown:

Boolean Property References

Boolean properties are usually shown as a check box in the Property Pad. When a Boolean property supports resource references, a small button is shown next to the check box. Clicking the button replaces the check box with a text entry, in which you can manually enter the reference, as shown below:

Grouped Properties
Some controls have multi-value properties that are grouped together, such as Padding and Shadow, for example. These properties? values are listed in the Property Pad in a single, expandable row. Clicking the ellipsis (?) shows the individual values, as shown in the screenshot below:

Additionally, some properties can be edited directly in the grouped row, such as the Padding property shown below:

Editing Properties Inline

In addition to the Property Pad, the Mono for Android designer supports direct editing of certain properties inline on the designer surface. Properties that can be edited in line include Text, Margin, and Size.

Text
Text properties of some controls, such as buttons and text entries, can be edited directly in the designer surface. Double-clicking on a control will put it into edit mode, as shown: If the text property is referencing a resource, the resource itself will be edited?as opposed to the value in the control. If you want to change the resource reference, press Tab, which will display a tooltip like the one shown below:

At this point, you can either enter a new resource reference, or enter a new resource name. Entering a new name causes the resource to be created when the changes are saved.

Margin
When a control is selected, the designer displays handles that allow changing the size or margin of the control interactively. Clicking on the control while it is selected switches between margin-editing mode and size editing. When you click on a control for the first time, margin handles are displayed. If you move the mouse to one of the handles, it will show the property that the handle is going to 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:

To enter a value for a margin, double-click a handle and enter the value in the text box that is displayed, as shown in the following screenshot for the Button control:

Size As mentioned earlier, you can switch to size-editing mode by clicking on a control while it is already selected. The size handle will appear as follows:

Together with the handle, there are two small buttons shaped like arrows. These allow setting two special values for the size property, as described below: 1. wrap_content: Resizes the control to match the contents. 2. match_parent: Resizes the control to fill all the available space in the parent. As with margins, double-clicking a handle can be used to manually edit the value of a size property. However, not all containers allow editing the size of a control. For example, notice that in the screenshot below, with the LinearLayout selected, the resize handles do not appear:

Outline View
In addition to the designer surface, the control hierarchy that composes the layout can also be viewed in an outline view. This outline is available by selecting the Document Outline tab, as shown below:

The selected control in the outline view stays in sync with the selected control on the designer surface. This is useful for selecting view groups, which are not always easy to select in the designer surface. The outline view supports both copy and paste, and drag and drop. Drag and drop is supported from the outline view to the designer as well as from the designer to the outline view. Also, right-clicking on an item in the outline view will show the context menu for the item, as when right-clicking on the control in the designer surface.

Source URL: http://xamarin.alley.ws/guides/android/user_interface/designer_overview/part_1__designer_basics