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:
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:
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.
Item | Shortcut | Description |
---|---|---|
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. |
Select | N/A | Choose this option to select one of the following:
|
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 Screenshot | N/A | Choose 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.
Item | Tooltip | Description |
---|---|---|
Zoom to Fit | Toggle this button to have IntelliJ IDEA compress or expand the preview so it fits the target screen size. | |
Reset Zoom to 100% | Click this button to have IntelliJ IDEA reset the zoom to preview the actual size. | |
Zoom In | Click this button to have IntelliJ IDEA expand the preview. | |
Zoom Out | Click this button to have IntelliJ IDEA compress the preview. | |
Jump to Source | Click this button to switch to the Text tab where you can edit the application layout in the source .xml file. | |
Refresh | Click this button to have IntelliJ IDEA update the preview so that it reflects on-the-fly changes to the current layout definition. | |
Save Screenshot | Click this button to take a screenshot of the application preview. This button is only available from the Text tab of the layout preview window. | |
Options | Click this button to configure the appearance and behavior of the tool window.
|
Controls
Use the controls in this area to preview your layout in different configurations.
Item | Tooltip | Description |
---|---|---|
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:
| |
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). | |
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. | |
Theme | Click this button to select a theme from the Select Theme dialog. | |
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. | |
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). | |
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 |
---|---|---|
Expand All Ctrl+NumPad Plus | Click this button to expand all nodes in the Component Tree view. | |
Collapse All Ctrl+NumPad - | Click this button to collapse all nodes in the Component Tree view. | |
N/A | Click this button to open the context menu and configure the pane viewing mode. | |
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
Item | Tooltip and Shortcut | Description |
---|---|---|
Show documentation Ctrl+Q | Click this button to have IntelliJ IDEA display a brief documentation for the selected property from the Android reference. | |
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 is released. 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 in bold. However, you can have IntelliJ IDEA display the entire set of properties for the selected component to enable advanced component configuration.
|
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 |
---|---|---|
N/A | Click this button to open the context menu and configure the pane viewing mode. | |
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:
Components | Description |
---|---|
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:
|