IntelliJ IDEA 2017.2 Help

Designer Tool Window

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 on any physical or virtual devices.

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

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). When you open a layout definition file for editing, the pane appears in the editor tab by default. If you are editing the layout definition file manually and then switch to the visual mode by clicking the Design tab, the pane opens in 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, do one of the following:

  • Select the required element in the Palette pane and drag and drop it to the canvas in the Design pane.
  • Click the required element in the Palette pane and then click an area on the canvas.

Every component added in either 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 what the built layout will look like on various devices: configure the target environment emulation using the controls on the Controls.

For details on different configuration options available from the Design pane, refer to the following sections:

Context Menu

The context menu is available from any area in the Design pane, both inside the canvas and outside it. All actions are synchronized with the Component Tree and the XML definition files, so all changes are immediately reflected in them. The same actions are also available from the context menu of the Component Tree pane.

ItemShortcutDescription
Cut Ctrl+X Choose this option to cut the selected component.
Copy Ctrl+C Choose this option to copy the selected component to the clipboard.
Paste Ctrl+V Choose this option to insert the component from the clipboard inside the selected parent component in the canvas.

This action is available only when a parent component is selected.

Delete Delete Choose this option to remove the selected component from the canvas and from the layout.
SelectN/AChoose this option to select one of the following:
  • Select Parent: choose this option to select the parent component of the selected component.
  • Select Siblings: choose this option to select the components located on the same level as the selected component.
  • Select Same Type: choose this option to select the components of the same type as the selected component.
  • Select All: choose this option to select all components on the canvas.
  • Deselect All: choose this option to deselect all selected components.
Morphing N/A Choose this option to convert the selected component into a component of another type 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.
Save ScreenshotN/AChoose this option to take a screenshot of the current layout.
Refactor N/A 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 Choose this option to navigate to the definition of the selected component in the XML layout definition file.

Choosing this option automatically brings you to the manual layout editing mode. To return to the design mode, switch to the Design tab in the bottom of the editor.

Toolbar

Use the controls in this area to adjust the appearance of the layout preview.

ItemTooltipDescription
collapseAllZoom to FitToggle this button to have IntelliJ IDEA compress or expand the preview so it fits the target screen size.
erDiagramIconActualSizeReset Zoom to 100%Click this button to have IntelliJ IDEA reset the zoom to preview the actual size.
erDiagramIconZoomInZoom InClick this button to have IntelliJ IDEA expand the preview.
erDiagramIconZoomOutZoom OutClick this button to have IntelliJ IDEA compress the preview.
jumpToSourceIconJump to SourceClick this button to switch to the Text tab where you can edit the application layout in the source .xml file.
refreshRefreshClick this button to have IntelliJ IDEA update the preview so that it reflects on-the-fly changes to the current layout definition.
takeScreenshotSave ScreenshotClick this button to take a screenshot of the application preview.

This button is only available from the Text tab of the layout preview window.

projectToolWindowSettingsIconOptionsClick this button to configure the appearance and behavior of the tool window.
  • Hide for non-layout files: select this option to have IntelliJ IDEA temporarily close the tool window when the focus in the editor switches to a non-layout file. As soon as the same or another layout definition file is in focus, the tool window re-appears automatically.
  • Include Device Frames (if available): select this option to make the preview look like it is going to appear on the actual device.
  • Show Lighting Effect: select this option to display lighting effects to make the preview look more natural.

Controls

Use the controls in this area to preview your layout in different configurations.

Item Tooltip Description
AndroidLayoutConfig Configuration to render this layout in the IDE From this drop-down list, select a layout configuration that you want to preview and edit, create a new layout configuration, or select different preview options. The available options are:
  • Create Landscape Variation: select this option to create a landscape version of your layout. The corresponding layout definition file will be generated in the res\layout-land folder. Once this variation is created, this menu option will be replaced with the Switch to layout-land option that opens the layout-land\<layout_file_name>.xml file for editing.
  • Create layout-xlarge Variation: select this option to create a variation of your layout for an extra large screen size (at least 960x720 dp). The corresponding layout definition file will be generated in the res\layout-xlarge folder. Once this variation is created, this menu option will be replaced with the Switch to layout-xlarge option that opens the layout-xlarge\<layout_file_name>.xml file for editing.
  • Switch to layout: this option is only available if you have created multiple layout versions. Select it to return to the original layout definition file.
  • Create Other: select this option to create another variation of your layout. In the Select Layout Directory dialog that opens, specify the folder where the layout definition will be stored and select resource qualifiers that determine a specific device configuration. Select the relevant qualifier and click icon InsertReplace. Then specify the value of the qualifier in the dialog box that opens. The qualifier is added to the Chosen qualifiers list.
  • Preview Representative Sample select this option to display multiple device configurations and preview the layout on the most important screen sizes.
  • Preview All Screen Sizes: select this option to display multiple device configurations and preview the layout on all available screen sizes.
  • Preview All Locales: select this option to preview the layout in all locales where your application is going to be used.
  • Preview Right-to-Left Layout: select this option to preview the layout in both directions (left-to-right and right-to-left) side by side.
  • Preview Android Versions: select this option to preview the layout on all installed Android API versions.
  • Preview Included: select this option to preview your layout nested in another layout. This option is only available if the current layout is included into another layout.
  • Preview Layout Versions: select this option to display multiple device configurations and preview the layout in all available variations.
  • None: select this option to return to the default view.
  • Toggle Layout Mode: select this option to switch between different preview options.
AndroidDevice The virtual device to render the layout with From this drop-down list, select a virtual or a physical device to preview what your application will look like on this device. To add a new virtual device, select Add Device Definition and configure an emulator in the Android Virtual Device (AVD) Manager that opens (for instructions refer to Managing Virtual Devices).
AndroidLayoutOrientation Go to next state From this drop-down list, select the preview orientation (portrait or landscape), the UI mode (Normal, Car Dock, Desk Dock, Television, Appliance) and switch between the Night (dimmed screen) and Not Night (standard brightness) modes. For details on UI modes refer to UiModeManager.
AndroidLayoutTheme Theme Click this button to select a theme from the Select Theme dialog.
AndroidAssociateLayout N/A Click this button to associate the layout with an activity. Select Associate with <activity_name> to associate it with the current activity, or Associate with Other Activity to display a list of available activities to select from.
AndroidLocale Locale to render layout with in the IDE From this drop-down list, select an existing locale or add a locale for your application. A locale is a combination of the target country and language to have the dates and some other data presented in accordance with the local rules and preferences. You can also preview the layout in all available locales and in both directions (left-to-right and right-to-left).
AndroidAPIVersion Android version to use when rendering layouts in the IDE From this drop-down list, select an API version or use the Automatically Pick Best option to render the layout using the most suitable Android version. You can also preview the layout on all installed Android API versions.

Component Tree

This 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 to them are reflected in the tree view on-the-fly.

For details on different configuration opions available from the Component Tree, refer to the following sections:

Context Menu

The context menu is available from any area in the Component Tree pane. All actions are synchronized with the Design Pane and the XML definition files, so all changes are immediately reflected in them. The actions available from the Component Tree context menu are identical with those of the Design Pane context menu.

Toolbar

Item Tooltip and Shortcut Description
expandAll.png Expand All Ctrl+NumPad Plus Click this button to expand all nodes in the Component Tree view.
collapse all Collapse All Ctrl+NumPad - Click this button to collapse all nodes in the Component Tree view.
viewMode.png N/A Click this button to open the context menu and configure the pane viewing mode.
hideSide.png Hide Shift+Escape Click this button to hide the pane.

Properties

In this pane, specify property values of the component that is currently selected in the canvas or in the component tree view. The most frequently used properties are displayed in bold, "expert" properties are shown in italic, properties whose values have been updated are highlighted in blue.

Toolbar

ItemTooltip and ShortcutDescription
icon help Show documentation
Ctrl+Q
Click this button to have IntelliJ IDEA display a brief documentation for the selected property from the Android reference.
resetProfileToDefault2.png Restore default value
Delete
For any newly added component, the default property values are set. After you edit a property value, this property is highlighted in blue. Click this button to discard the changes and restore the default value.

When you edit the default value of an expert property, the property is also highlighted in blue and will remain in the list when the Show expert properties toggle button filter is released.

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

filter Show expert properties By default, the pane shows only a standard set of properties, and the most frequently used ones are displayed in bold. However, you can have IntelliJ IDEA display the entire set of properties for the selected component to enable advanced component configuration.
  • Click this button on to have the pane display all properties that are defined for the selected component according to the specification. All "expert" properties are displayed in Italic.
  • Release this button to have only the standard set of properties displayed. If the value of an expert property has been updated, the property will still remain in the list.

Palette

The Palette pane contains a number of pre-built UI elements that you can drag-and-drop to the canvas to design the layout of your application. For detailed instructions refer to Designing Layout of Android Application.

For details on different opions available from the Palette pane, refer to the following sections:

Toolbar

Item Tooltip and Shortcut Description
viewMode.png N/A Click this button to open the context menu and configure the pane viewing mode.
hideSide.png Hide Shift+Escape Click this button to hide the pane.

UI Components

This pane contains UI components which you can place in the canvas. The available components are grouped into categories. To hide/expand the contents of a group, click the group title. The following groups of UI components are available:

ComponentsDescription
Layouts Android Layouts definee the visual structure of your application's interface. They are a class that determines the way its children appear on the screen.
Widgets Android widgets are interactive components in a user interface. You can select from a variety of widgets, such as buttons, check boxes, test fields, etc.
Text Fields A text field allows the user to enter text into the application, such as name, password, number, etc.
Containers Containers are composite views that are comprised of multiple other views.
Date & Time This section provides predesigned UI elements related to date and time, such as different types of clocks, a date and time picker controls, etc.
Expert This section contains extra predefined UI elements in addition to the most frequently used components.
Custom In this section, you can choose and add UI components defined either in your project, or in the Android SDK. You can insert elaborate combinations of widgets, or even embed entire layouts into the current layout. IntelliJ IDEA checks for a resource definition of the appropriate type in the project and in the Android SDK. The following options are available:
  • include: click this item to choose the layout that you want to embed. In the Resources dialog box that opens, select the Project tab to pick a layout definition from within your project, or the System tab to search in the SDK.
  • fragment: click this item to choose the fragment that you want to embed.
  • requestFocus: click this item to include the requestFocus element in a view object. The requestFocus element gives its parent initial focus on the screen.
  • CustomView: click this item to choose a user-defined view that you want to embed.
Last modified: 29 November 2017

See Also