Designer Tool Window

Design Pane

The Design pane is located in the central part of the UI Designer (assuming the default tool window layout and visibility). When you open a layout definition file for editing, the pane appears in the editor tab by default. If you were editing the layout definition file manually and then switched to the visual mode by clicking the Design tab, the pane opens on the tab where the edited layout definition file is opened,

To toggle between the manual and visual editing modes, use the Text and Design tabs in the bottom of the pane/editor:

The pane shows a rectangular canvas that is synchronized with the current layout definition file and with the Component Tree view, so any changes to the canvas are reflected there accordingly.

To add a component to the canvas, click the component in the Palette pane and then click the relevant area within the canvas, or just drag-and-drop the component. Every component added in this way is also added to the Component Tree and is declared in the layout definition file.

You can also specify the most essential properties for a component right in the canvas, without switching to the Properties pane. To do that, select the component in question, double click the selected area, and fill in the fields in the pop-up dialog box that opens.

The canvas has a context menu that provides access to the clipboard, layout actions, refactoring, and more.

You can view how the built layout will look on various devices: configure the target environment emulation using the controls on the toolbar of the pane.

Context Menu

The context menu is available from any position in the Design pane, both inside the canvas and outside it. All the actions are synchronized with the Component Tree and the XML definition files, so the action results are immediately reflected in them. And last but not the least, all the actions are available from the context menu of the Component Tree pane.

Item	Shortcut	Description
Cut	Ctrl+X; Shift+DeleteCtrl+X; Shift+Delete	Choose this option to cut the component selected in the canvas.
Copy	Ctrl+C; Ctrl+InsertCtrl+C; Ctrl+Insert	Choose this option to copy the component selected in the canvas to the clipboard.
Paste	Ctrl+V; Shift+InsertCtrl+V; Shift+Insert	Choose this option to insert the component from the clipboard inside the selected parent component in the canvas. Note The action is available only when a parent component is actually selected.
Delete	DeleteDelete	Choose this option to remove the selected component from the canvas and from the layout.
Select Parent	EscapeEscape	Choose this option to select the parent component of the selected component. If nothing is currently selected in the canvas, the entire screen is selected.
Select All	Ctrl+ACtrl+A	Choose this option to have all the components on the canvas selected separately.
Morphing		Choose this option to transform the selected component into a component of another type without losing the specified properties but preserving the properties that are common for both types. When you choose this option, IntelliJ IDEA shows a list of compatible component types, that is, the types into which the selected component can be converted.
Refactor		Choose this option to apply one of the available refactorings to the current XML layout definition file. The XML code will be optimized while the layout itself will not be affected. The list of available refactorings depends on the type of the selected component.
Go To Declaration	Ctrl+BCtrl+B	Choose this option to navigate to the definition of the selected component in the XML layout definition file. Note Choosing this option automatically brings you to the manual layout editing mode. To return to the design mode, switch to the Design tab the bottom of the editor.

Toolbar

Use the controls of this area to configure the emulation of the target environment.

Item	Tooltip	Description
	Warnings	This drop-down list appears as soon as IntelliJ IDEA detects any discrepancy in the code generated according to the designed layout. Open the list to view the warnings, the number of warnings is shown on top.
/	Convert orientation to vertical/horizontal	Click this button to have the selected component rotated so it is oriented vertically or horizontally without changing the screen orientation.
	Gravity	Use this drop-down list to change the alignment of the selected component. The available options depend on the selected orientation. If the orientation is horizontal, the gravity options are: Left Right Center Fill: choose this option to have the component occupy the entire width of the screen. If the orientation is vertical, the gravity options are: Top Bottom Center Fill: choose this option to have the component occupy the entire height of the screen. Tip Combine the options from the Orientation and Gravity fields to find the optimum location for the selected component.
Profile		Use this drop-down list to choose a target device emulation profile or configure a new one. Each profile is a combination of target environment settings, such as platform, orientation, theme, dock mode, etc. Edit Profiles: choose this option to configure a new profile in the Edit Profiles dialog box that opens. Full: this item is by default selected when no profiles are configured at all
Device		From this drop-down list, choose the combination of screen size and screen density of the target device. If no device is chosen, IntelliJ IDEA displays an error message and provides a link to the dialog box where you can configure it.
Screen orientation		The available options are: Portrait Landscape
Platform		From this drop-down list, choose the target Android platform to adjust the application to. The list of supported target platforms depend on the Android SDK used in the project.
Locale		From this drop-down list, choose a combination of the target country and language to have the dates and some other data presented in accordance to the local rules or preferences.
Dock mode		The available options are: Normal: Car dock: Desk dock: Television:
Day/Night time		The available options are: Day time: choose this option to have the preview emulate the standard brightness. Night time: choose this option to have the preview emulate the screen dimmed down, as if in the night mode. For more details, see http://developer.android.com/reference/android/app/UiModeManager.html.
Theme		From this drop-down box, choose the style defined and applied to the entire activity or application.

Component Tree Pane

The pane shows a hierarchy of components in the current layout with the Device Screen root node. The pane is synchronized with the Design pane and the layout definition file, so any changes in them are reflected in the tree view.

The context menu provides access to the clipboard, layout actions, refactoring, morphing, etc.

Title Bar

Item	Tooltip and Shortcut	Description
	Collapse All Ctrl+Subtract; Ctrl+MinusCtrl+Subtract; Ctrl+Minus	Click this button to have all the nodes in the component tree view collapsed.
	Expand All Ctrl+Add; Ctrl+EqualsCtrl+Add; Ctrl+Equals	Click this button to have all the nodes in the component tree view expanded.
		Click this button to open the context menu and configure the viewing mode of the pane by turning the menu items on or off.
	Hide Shift+EscapeShift+Escape	Click this button to hide the pane.

Context Menu

The context menu is available from any item in the position in the Component Tree. All the actions are synchronized with the Design pane and the XML definition files, so the action results are immediately reflected in them. And last but not the least, all the actions are available from the context menu of the Design pane.

Item	Shortcut	Description
Cut	Ctrl+X; Shift+DeleteCtrl+X; Shift+Delete	Choose this option to cut the selected component.
Copy	Ctrl+C; Ctrl+InsertCtrl+C; Ctrl+Insert	Choose this option to copy the selected component to the clipboard.
Paste	Ctrl+V; Shift+InsertCtrl+V; Shift+Insert	Choose this option to insert the component from the clipboard inside the selected parent component in the tree. Note The action is available only when a parent component is actually selected.
Delete	DeleteDelete	Choose this option to remove the selected component from the tree and from the layout.
Select Parent	EscapeEscape	Choose this option to select the parent component of the selected component. If nothing is currently selected in the tree, the root node ot the tree is selected.
Select All	Ctrl+ACtrl+A	Choose this option to have all the components in the tree selected.
Morphing		Choose this option to transform the selected component into a component of another type without losing the specified properties but preserving the properties that are common for both types. When you choose this option, IntelliJ IDEA shows a list of compatible component types, that is, the types into which the selected component can be converted.
Refactor		Choose this option to apply one of the available refactorings to the current XML layout definition file. The XML code will be optimized while the layout itself will not be affected. The list of available refactorings depends on the type of the selected component.
Go To Declaration	Ctrl+BCtrl+B	Choose this option to navigate to the definition of the selected component in the XML layout definition file. Note Choosing this option automatically brings you to the manual layout editing mode. To return to the design mode, switch to the Design tab the bottom of the editor.

Properties Pane

In this pane, specify the values of the properties for the component that is currently selected in the canvas or in the component tree view. Most frequently used properties are displayed bold, "expert" properties are shown in italic, properties with updated values are highlighted blue.

Title Bar

Item	Tooltip and Shortcut	Description
	Show documentation Ctrl+QCommand J	Click this button to have IntelliJ IDEA display a brief documentation for the selected property from the Android reference.
	Restore default value DeleteDelete	For any newly added component, the pane shows the default property values. After you edit the value of a property, the property is displayed blue. Click this button to remove the value you specified for the selected property and return to the default value. When you edit the default value of an expert property, the property is also highlighted blue and will remain on the list when the Show expert properties toggle button is released. Note The button is available only if you have re-defined the value of the selected property.
	Show expert properties	By default, the pane shows only a standard set of properties, and the most frequently used ones are displayed bold. However, you can have IntelliJ IDEA display the entire set of properties for the selected component to enable advanced component configuration. Toggle this button on to have the pane display all the properties that are defined for the selected component according to the specification. All the "expert" properties are displayed italic. Release this button to have only the standard set of properties shown. If the value of an expert properties has been updated, the property will still remain on the list.

Palette Pane

The Palette pane appears by default at the right side of the tool window, next to the Design tab with the canvas. To close the pane, click the button on the toolbar. To have the pane opened again, choose View | Tool Widows | Palette on the main menu.

Title Bar

Item	Tooltip and Shortcut	Description
		Click this button to open the context menu and configure the viewing mode of the pane by turning the menu items on or off.
	Hide Shift+EscapeShift+Escape	Click this button to hide the pane.

Components

The pane contains UI components which you can visually place in the canvas. The available components are shown in groups. To hide the contents of a group, click the group title and vice versa.

• Layouts
• Widgets
• Containers
• Date and Time
• Expert: this group contains extra predefined components in addition to the set of most frequent components grouped above.
• Custom: use this area to choose and add components defined either in your project or in your project Android SDK. You can insert elaborate combinations of widgets or even embed entire layouts into the current layout. $product$ checks for a resource definition of the appropriate type in the project itself and and in the project Android SDK.
  • Include: click this item to choose the layout to embed. In the Resources dialog box that opens, click the Project tab to search among your layout definitions or click the System tab to search in the SDK.
  • Fragment: click this item to choose the fragment to embed in the Resources dialog box that opens.
  • Custom View: click this item to choose a user-defined view to insert in the dialog box that opens.