Sei sulla pagina 1di 20

Features of the Mono for Android Designer

Designer Overview

Xamarin Inc.

BRIEF
This article covers the features of the Mono for Android designer. It covers designer basics, showing how to use the designer to layout controls visually and how to edit properties. It also shows how to use the designer to work with user interfaces and resources across various configurations, such as themes, languages and device configurations, as well as how to design for alternative views like landscape and portrait. Related Articles:

Designer Walkthrough

Overview
Mono for Android supports both a declarative style of user interface design based in XML files, as well as programmatic user interface creation in code. When using the declarative approach, XML files can be either hand-edited or modified visually using the Mono for Android designer. Having a designer allows immediate feedback during UI creation, speeding up development and making the process of UI creation less laborious. This article surveys the many features of the Mono for Android designer. First it covers the basics of using the designer and the various parts that make up the designer. It explains how to load an Android layout into the designer, how to add controls, and how to edit their properties. Next it examines how to work with various resources and devices configurations. Finally, it shows how to modify a user interface for alternative views such as landscape and portrait, as well as how to handle conflicts that may arise when doing so.

Designer Basics
Launching the Designer
The designer can be launched by either double-clicking on an existing .axml file, or will automatically be launched when a layout is created. For example, doubleclicking 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 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 outlined below: Design Surface - Shown in the document area. Allows the visual construction of user interfaces. Toolbox - Shows a list of widgets and layouts you can drag and drop into the design surface. Property Pad - Shows the properties for the selected widget. Outline View - 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 with the Alt key pressed. CONTEXT MENU COMMANDS A context menu is available both in the designer surface and the outline view. The 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 what control is select in the designer surface, as shown below:

PROPERTY PAD SECTIONS The properties of a control can be changed in the Property Pad, which contains several sections to make it easier to locate the properties, as outlined below:

Widget - Main properties of the control, such as

id, visibility, text, etc. Properties for managing the controls content are usually placed here.

Style - Properties that change the visual appearance of the control, such as
text color, background,

font,

etc.

Layout - Properties that set the location and size of the control. Scroll - Scrolling properties. Behavior - Flags that set how the control behaves.
DEFAULT VALUES Most controls properties will be blank in the Property Pad because their value is inherited from the Android theme being used. The Property Pad will only show values explicitly set for the selected control. It will not show values inherited from the theme. REFERENCING RESOURCES Some properties can reference resources defined in other files. The most common cases 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 images resources to choose from is shown:

BOOLEAN PROPERTY REFERENCES

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

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 on 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 on 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 mention 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:
wrap_content: match_parent:

Resizes the control to match the contents. Resizes the control to fill all the available space in the parent.

As with margins, double-clicking on 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.

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 to select view groups, which are not always easy to select on 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 n the designer surface.

Resource Qualifiers and Visualization Options


Android supports defining resources to be used only when some qualifier values are matched. The simplest examples are language-qualified string resources. A string resource can be defined as the default, with other alternative resources to be used for additional languages. All resource types can be qualified, including the layout itself. At the top of the designer there is a toolbar that allows selecting resource qualifier

values. The designer will render the layout taking into account the current selection of qualifiers. For example if Spanish is selected, Spanish string and image resources will be shown:

The following list describes the selectors available in the toolbar:

Device - Every entry in the devices combo box defines a set of qualifiers of a
device, such as screen size, resolution and keyboard availability. The user can also enter new devices.

Device configuration - A device can have different configurations. The most common configurations are Portrait and Landscape, but there are devices with other configurations, such as Landscape with sliding keyboard open. Android version - Android version that the layout is targeting. The designer will
render the layout using the selected android version.

Language / Region - User interface language and region. The selector only displays
languages for which there are resources defined, but there is an option that allows adding a language to the list.

Dock mode - Car, desk, television. Day/Night mode Country / Network code - The selector only displays countries and network codes
for which there are resources defined, but there is an option which allows adding a country / network to the list.

Alt Layouts - This is the alternative layout selector. Theme - UI theme. Not a real resource qualifier, it just allows selecting the visual
theme to be used to display the layout in the designer. There are many different types of qualifiers. A complete list is available in the Android SDK documentation.

Custom Device Configurations


At the bottom of the menu under the device selector, which is the first selector in the toolbar described above, is a Customize option, as shown below:

Selecting Customize displays a dialog that allows browsing through all device configurations, as well as creating new ones:

The dialog displays the following information for each device configuration Device name - shown in the list on the left and in the toolbar selector. Vertical and horizontal pixel density. Default tab with several qualifier values. One tab for each configuration, which shows the same qualifiers, but with configuration-specific values. Devices pre-configured in the designer cannot be modified. However, new devices can be added by clicking on the plus (+) button. The fields for a custom device are the same as for a stock device. Unlike built-in device configurations, custom device fields are editable, as shown in the following screenshot:

Additionally, custom devices can have several configurations. The Add/Remove configuration buttons can be used to manage them. When a new configuration is added, a new tab is added to the dialog. The only additional data in the configuration tab is the entry for setting the configuration name. This tab can be used to set configuration-specific values. The following screenshot shows the Landscape configuration added for a Galaxy Nexus:

Language and Region


The designer will show string resources for the selected language. It is important to note, if a string is modified, it will only be modified for the selected language. The Language and Region selector only shows languages that have resources defined. However, there is an option that allows adding a language to the list, as shown below:

The Region field in the dialog is optional since languages can be added without specific regions. Whenever a project is opened, the language / region selector is reset. If you add a language and no new resources are created for it, the language will not be shown the next time you open the project.

Country and Network Code


Country / Network codes work just like language / region codes. The selector only shows countries and networks for which there are resources defined. Similarly, there is an option for adding new codes to the list.

Themes

The theme drop-down shows all the themes defined in the project by default. Selecting More Themes opens a dialog with a list of all themes available in the Android SDK, as shown below:

When a theme is selected, the designer surface is updated to show the new theme, however the change is only made permanent if the OK button is clicked in the dialog. Once a theme has been selected, it will be shown in the theme drop-down as shown below:

Android Version
The Android version selector allows choosing the Android version that will be used to render the layout in the designer. The selector shows all versions that are greater or equal to the target framework version of the project, as shown:

The target framework version can be set in the projects settings under Project Options > Build > General section.

The list of controls available in the toolbox, as well as the properties available in the property pad, is determined by the target framework version of the project. It is not determined by the version selected in the toolbar. For example, if you set the target version of the project to 2.2, you can still select 4.0 in the toolbar version selector to see how it looks like in 4.0, but you wont be able to add controls that are specific to 4.0, only those available in 2.2.

Alternative Layout Views


As with other types of resources, layouts can be versioned using resource qualifiers. For example, there can be a version of a layout that is only used when the device is in landscape mode and one that is only for portrait. Editing layouts with multiple versions can be problematic since each layout version is a complete description of the whole layout, so once a specific layout is forked from the default layout, changes done in the default layout will have to be applied to all other layouts. To simplify the maintenance of multiple layout versions, the designer has a special mode that allows synchronized editing of all layout views, and allows introducing qualifier-specific changes when necessary. The designer automatically manages alternative layouts, creating and deleting them when required.

Introducing qualifier-specific changes


To change the design of the layout depending on a qualifier, or set of qualifiers, the qualifier can be locked. To lock on a qualifier, click on the lock button next to the corresponding qualifier selector. If the selector is bound to several qualifiers, a drop down menu will display all the qualifiers, where the one to lock can be selected, as shown below:

Once a qualifier is locked, changes done in the designer will be specific to that qualifier. For example, consider this layout:

To change the label from Portrait mode to Landscape mode when the device

changes to landscape, select the Landscape configuration and click the lock button next to it. A message will appear indicating that the changes will only be applied for the selected qualifiers, as shown below:

Double-clicking on the label and changing the text causes a red frame to appear, indicating that the control has changes that are specific to the current view, landscape in this case. Also, the Hide Changes button at the top-right allows hiding/showing the local change markers. The following screenshot shows the label changed for landscape:

Handling Conflicts
The designer automatically propagates changes done in the default layout to all other layout views. However, if you modify a control for which there is a specific version in another view, the designer detects the conflict and reports it. PROPERTY CONFLICTS For example, if changing the color of the label in the default layout to green, a conflict warning is shown at the bottom because there is a local change for landscape that conflicts with this change, as shown:

Clicking on the conflict description causes the control that caused the conflict to be highlighted along with a conflict box showing information about the conflict as shown below:

The conflict box shows the list of properties that have changed and their values. Clicking on a property will apply that property to the widget. If all property changes are applied, the conflict will automatically be discarded. VIEW GROUP CONFLICTS Property changes are not the only source of conflicts. Conflicts can be detected when moving, inserting or removing controls. Consider an example of changing the order of controls when in landscape mode. To accomplish this, lock the Landscape qualifier and drag and drop the label over the button. When the control is dropped into place, a change marker is displayed around the main LinearLayout to indicate the layout has local changes, as shown below:

However, the button itself has no change marker. Even though its position has changed, the button control has no changes applied specific to the landscape configuration. Switch to portrait mode and add a CheckBox to the layout as shown below:

Adding the CheckBox causes a conflict because the landscape view has changes in the LinearLayout that contains it. Clicking on the conflict message again shows the conflict box. However, in this case it shows the control that was just inserted while in portrait mode. It also switches to landscape as shown below:

Having the control in the conflict box allows it to be dragged and dropped into the layout where the control is missing, landscape in this case, to resolve the conflict. The image below shows the conflict resolved after the CheckBox is added to the landscape view:

As with the Button earlier, the CheckBox does not have a red change marker because only the LinearLayout has changes applied specific to landscape. IGNORING CONFLICTS Also, clicking the Ignore button next to the conflict message or in the conflict box can ignore any conflict. DISPLAYING THE CONFLICT BOX The conflict box will appear automatically when a conflict message is selected as shown in the previous sections. However, a conflict box can be displayed at any time by selecting a control that has a conflict and clicking on the ellipsis that appears to the right of the control, as shown below:

CONFLICT PERSISTENCE Conflicts are persisted in the layout file as XML comments as shown here:
<!-- Widget Inserted Conflict | id:__root__ | @+id/checkBox1 -->

Therefore, when a project is closed and reopened, all the conflicts will still be there.

Summary
This article discussed the feature set of the Mono for Android designer. It showed how to get started with the designer, explaining its various parts. It described how to load a layout, as well as how to add and modify controls, both using the Property Pad, as well as inline on the designer surface. It also explained how to work with various resources and devices configurations. Finally, it examined how to use the designer to develop user interfaces specifically for alternative views, such as landscape and portrait, as well as how to resolve conflicts that may arise between such views.

Potrebbero piacerti anche