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.

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 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.
  • Compose the layout in the dedicated Designer tool window: drag and drop layout elements from the Palette pane and specify their properties in the Properties pane. In this mode, all the changes are also reflected immediately in the preview that is displayed right in the editor. In other words, the functionality of the dedicated Preview tool window is provided in the editor.

    This functionality at the IntelliJ IDEA level is provided through the Android Designer bundled plugin, which is by default enabled. If not, enable it in the Plugin Configuration Wizard or the Plugins page of the Settings dialog box.

Toggling between the Design and the Text Modes

You can toggle between these modes by switching between the Design and Text tabs in the editor where the layout definition file is opened.

android_ui_designer_switch_modes.png

Just keep in mind, 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. However, most of the

In the Design mode, you can switch to the manual mode by choosing Go to Declaration on the context menu of the Design pane.

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 onw of the following:
    • Click the classTypeXml icon in the gutter area and choose the layout definition file in the Go To Related Files pop-up list.
    • On the main menu, choose Navigate | Related File.
  • 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 classTypeJavaClass icon in the gutter area.
    • On the main menu, choose Navigate | Related File.

See Also

Procedures:

Reference:

External Links:

Web Resources: