Design layout of Android application
A layout defines the user interface of an activity or an app widget (fragment). Layouts are declared in XML resource definition files. See Create resources for instructions on how to create resource folders and resource definition files.
In this topic:
- Layout Editing Modes
- Toggling between the Design and the Text Modes
- Navigating between an activity or a fragment and its related layout definition file
Layout Editing Modes
IntelliJ IDEA suggests two main ways to design the user interface of your Android application:
Edit the layout definition files manually, possibly using the Android-specific refactoring provided by IntelliJ IDEA, 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.
Compose the layout in the dedicated Designer tool window: drag layout elements from the Palette pane and specify their properties in the Properties pane. In this mode, all changes are also reflected immediately in the preview that is displayed right in the editor.
At the IntelliJ IDEA level, this functionality is provided through the bundled Android Support plugin, which is enabled by default. If not, enable it in the Plugins page of the Settings/Preferences dialog.
Toggling between the Design and the Text Modes
Note that the set of available panes and tool windows depends on the current layout editing mode: the Designer tool window with its panes is available in the Design mode, while the Preview tool window is available in the Text mode.
In the Design mode, you can switch to the manual mode by choosing Go to Declaration from the context menu of the Design pane, or by clicking the icon in the Preview window Toolbar.
Navigating between an activity or a fragment and its related layout definition file
You can jump from the source code of an activity or a fragment to the layout definition file which represents its content view and vice versa, from the layout definition to the source code.
To jump from a component to its related layout definition, open the source code of the component, and do one of the following:
Click the icon in the gutter area and choose the layout definition file in the Go To Related Symbol list.
On the main menu, choose.
To jump from a layout definition to the source code of the corresponding component, open the layout definition file in the text mode and do one of the following:
Click the icon in the gutter area.
On the main menu, choose.