IntelliJ IDEA 13.1 Web Help

A layout defines the user interface of an activity or an app widget (fragment). Layouts are declared in XML resource definition files. See the topic Creating Resources to find out how to create resource folders and resource definition files.

Use this dedicated tool window to build the design of your application without editing the layout definition files manually and check how the application design is rendered in various target environments without running the application of any physical or even virtual devices.

Note

Alternatively, edit the layout definition files manually, possibly using Android-specific refactoring provided by %product, and preview the changes that are immediately reflected in the dedicated Preview tool window, where you can adjust the layout to various platforms and devices. To switch to the manual mode, click the Text tab or choose Go To Declaration from the context menu in the Design pane or in the Component Tree.

The Android UI designer consists of the following panes:

android_ui_designer.png

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:

android_ui_designer_switch_modes.png

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 or Shift+DeleteCtrl+X or Shift+DeleteCtrl+X or Shift+DeleteCtrl+X or Shift+DeleteShift+Delete or Alt+XCtrl+X or Shift+DeleteCtrl+X or Shift+DeleteCtrl+X or Shift+DeleteCtrl+X or Shift+DeleteCommand X or Shift DeleteCommand X or Shift DeleteCommand X or Shift Delete Choose this option to cut the component selected in the canvas.
Copy Ctrl+C or Ctrl+InsertCtrl+C or Ctrl+InsertCtrl+C or Ctrl+InsertCtrl+C or Ctrl+InsertCtrl+Insert, Alt+C or Escape, WCtrl+C or Ctrl+InsertCtrl+C or Ctrl+InsertCtrl+C or Ctrl+InsertCtrl+C or Ctrl+InsertCommand C or Command InsertCommand C or Command InsertCommand C or Command Insert Choose this option to copy the component selected in the canvas to the clipboard.
Paste Ctrl+V or Shift+InsertCtrl+V or Shift+InsertCtrl+V or Shift+InsertCtrl+V or Shift+InsertAlt+P, Shift+Insert or Ctrl+YCtrl+V or Shift+InsertCtrl+V or Shift+InsertCtrl+V or Shift+InsertCtrl+V or Shift+InsertCommand V or Shift InsertCommand V or Shift InsertCommand V or 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 DeleteDeleteDeleteDeleteDelete or Ctrl+DDeleteDeleteDeleteDeleteDelete or BackspaceDeleteDelete or Backspace Choose this option to remove the selected component from the canvas and from the layout.
Select Parent EscapeEscapeEscapeEscapeEscape, Escape or Ctrl+GEscapeEscapeEscapeEscapeEscapeEscapeEscape 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+ACtrl+ACtrl+ACtrl+X, HCtrl+ACtrl+ACtrl+ACtrl+ACommand ACommand ACommand 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+B, Ctrl+Button1 Click or Button2 ClickCtrl+B, Ctrl+Button1 Click or Button2 ClickCtrl+B, Ctrl+Button1 Click or Button2 ClickCtrl+B, Ctrl+Button1 Click or Button2 ClickCtrl+Alt+G, Escape, Period, Alt+Period or Ctrl+Button1 ClickCtrl+B, Ctrl+Button1 Click or Button2 ClickF12, Shift+F2, Ctrl+B, Ctrl+Button1 Click or Button2 ClickCtrl+B, Ctrl+Button1 Click or Button2 ClickF3 or Ctrl+Button1 ClickCommand B, Command Button1 Click or Button2 ClickCommand B, Command Button1 Click or Button2 ClickF3 or Control Button1 Click 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
android_ui_designer_warning.png 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.
android_ui_designer_change_orientation.png/
android_ui_designer_change_orientation_to_horizontal.png
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.
android_ui_designer_gravity.png 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.

android_ui_designer_profile_dropdown.png

  • 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
collapseAll.png Collapse All Ctrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCtrl+NumPad -Ctrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCtrl+NumPad - or Ctrl+MinusCommand NumPad - or Command MinusCommand NumPad - or Command MinusCommand NumPad - or Command Minus Click this button to have all the nodes in the component tree view collapsed.
expandAll.png Expand All Ctrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCtrl+NumPad+ or Ctrl+EqualsCommand NumPad or Command EqualsCommand NumPad or Command EqualsCommand NumPad or Command Equals Click this button to have all the nodes in the component tree view expanded.
viewMode.png Click this button to open the context menu and configure the viewing mode of the pane by turning the menu items on or off.
hideSide.png Hide Shift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift EscapeShift 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 or Shift+DeleteCtrl+X or Shift+DeleteCtrl+X or Shift+DeleteCtrl+X or Shift+DeleteShift+Delete or Alt+XCtrl+X or Shift+DeleteCtrl+X or Shift+DeleteCtrl+X or Shift+DeleteCtrl+X or Shift+DeleteCommand X or Shift DeleteCommand X or Shift DeleteCommand X or Shift Delete Choose this option to cut the selected component.
Copy Ctrl+C or Ctrl+InsertCtrl+C or Ctrl+InsertCtrl+C or Ctrl+InsertCtrl+C or Ctrl+InsertCtrl+Insert, Alt+C or Escape, WCtrl+C or Ctrl+InsertCtrl+C or Ctrl+InsertCtrl+C or Ctrl+InsertCtrl+C or Ctrl+InsertCommand C or Command InsertCommand C or Command InsertCommand C or Command Insert Choose this option to copy the selected component to the clipboard.
Paste Ctrl+V or Shift+InsertCtrl+V or Shift+InsertCtrl+V or Shift+InsertCtrl+V or Shift+InsertAlt+P, Shift+Insert or Ctrl+YCtrl+V or Shift+InsertCtrl+V or Shift+InsertCtrl+V or Shift+InsertCtrl+V or Shift+InsertCommand V or Shift InsertCommand V or Shift InsertCommand V or 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 DeleteDeleteDeleteDeleteDelete or Ctrl+DDeleteDeleteDeleteDeleteDelete or BackspaceDeleteDelete or Backspace Choose this option to remove the selected component from the tree and from the layout.
Select Parent EscapeEscapeEscapeEscapeEscape, Escape or Ctrl+GEscapeEscapeEscapeEscapeEscapeEscapeEscape 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+ACtrl+ACtrl+ACtrl+X, HCtrl+ACtrl+ACtrl+ACtrl+ACommand ACommand ACommand 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+B, Ctrl+Button1 Click or Button2 ClickCtrl+B, Ctrl+Button1 Click or Button2 ClickCtrl+B, Ctrl+Button1 Click or Button2 ClickCtrl+B, Ctrl+Button1 Click or Button2 ClickCtrl+Alt+G, Escape, Period, Alt+Period or Ctrl+Button1 ClickCtrl+B, Ctrl+Button1 Click or Button2 ClickF12, Shift+F2, Ctrl+B, Ctrl+Button1 Click or Button2 ClickCtrl+B, Ctrl+Button1 Click or Button2 ClickF3 or Ctrl+Button1 ClickCommand B, Command Button1 Click or Button2 ClickCommand B, Command Button1 Click or Button2 ClickF3 or Control Button1 Click 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
help.png Show documentation
Ctrl+Q or Alt+Button2 ClickCtrl+Q or Alt+Button2 ClickCtrl+Q or Alt+Button2 ClickCtrl+Q or Alt+Button2 ClickCtrl+Q or Alt+Button2 ClickCtrl+Q or Alt+Button2 ClickCtrl+QCtrl+Q or Alt+Button2 ClickAlt+Button2 Click, Ctrl+Shift+Space or F2F1, Control J or Control Button2 ClickControl J or Control Button2 ClickAlt Button2 Click or F2
Click this button to have IntelliJ IDEA display a brief documentation for the selected property from the Android reference.
resetProfileToDefault2.png Restore default value
DeleteDeleteDeleteDeleteDelete or Ctrl+DDeleteDeleteDeleteDeleteDelete or BackspaceDeleteDelete or Backspace
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 filter.png is released.

Note

The button is available only if you have re-defined the value of the selected property.

filter.png 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 hideSide.png 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
viewMode.png Click this button to open the context menu and configure the viewing mode of the pane by turning the menu items on or off.
hideSide.png Hide Shift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift+EscapeShift EscapeShift 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.

See Also

Procedures:

Reference:

External Links:

Web Resources: