Adding and Editing Layout Components Using Android UI Designer
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.
With IntelliJ IDEA, you can 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.
Designing your layout in the visual mode is performed in the Design pane of the Android UI Designer tool window. The 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,
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. If IntelliJ IDEA detects any discrepancy in the code, a warning is displayed.
Note that intention actions and quick fixes are available in the design mode in the same way as when you edit the layout definition files manually. The intetion action icon or the quick-fix icon is displayed on the canvas, in the Component Tree or in the Properties pane.
To build the design of an Android application, perform the following basic operations:
- Add predefined components from the Palette
- Add user-defined components and components from Android SDK
- Arrange the components
- Specify component properties
- Convert components into other types preserving the common properties
To add a predefined 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.
- Click the required element in the Palette pane and then click the Component Tree where you want this element to be positioned.
Every component added in either way is also added to the Component Tree and is declared in the layout definition file.
To add a component defined either in your project or in the Android SDK
- Expand the Custom area in the Palette pane.
- Do one of the following:
- To embed a layout, click the Include icon. 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.
- To add a combination of components, click Fragment and choose the fragment to embed in the Resources dialog box that opens.
- To add a user-defined view, click CustomView and choose the view to insert in the dialog box that opens.
To place a component in the right position
The canvas is synchronized with the Component Tree, so you can arrange components by moving them in either of these in either pane.
Select the required component on the canvas or in the Component Tree and drag it to the right position or copy and paste it using the context menu.
To specify component properties
You can set the values for the mandatory component properties right in the canvas, or switch to the Properties pane for a more in-depth configuration.
- To assign the values for the essential properties in the canvas, double-click the component in question and specify the values in the pop-up dialog box that appears.
- For an in-depth configuration of the component properties, select the component in the canvas or in the Component Tree, switch to the Properties pane, and specify the values for the properties of your choice.
Click the right column in the Properties pane to start editing a property. You can click the Browse button the appears on the right to select or project or a system resource.
- By default, the pane shows only a standard set of properties, and the most frequently used ones are displayed in bold. To have the pane display all properties that are defined for the selected component according to the specification, click the Show expert properties button on the toolbar.
- To view a brief documentation for the selected property from Android reference, click the Show documentation button on the toolbar or press Ctrl+Q.
- Properties with updated values are highlighted in blue. To discard the changes you have made and return to the default value, select the property and click the Restore default value button on the toolbar.
To convert a component into another type
In some cases, you may need to transform an already fully configured component into a component of another type. With IntelliJ IDEA, you can do it without losing the specified properties: all properties that are common for both types will be preserved in the new component. This operation is referred to as morphing.
- Select the component that you want to convert in the canvas or in the in the Component Tree and choose Morphing on the context menu of the selection.
- IntelliJ IDEA displays the list of compatible component types, i.e. the types into which the selected component can be converted. Choose the target type and configure the properties that were not configured in the original component.