IntelliJ IDEA 2017.1 Help

Designing 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 Creating Resources for instructions on how to create resource folders and resource definition files.

In this topic:

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 and drop 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 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.


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 on the context menu of the Design pane, or by clicking the /help/img/idea/2017.1/jumpToSourceIcon.png 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 pop-up list.
    • On the main menu, choose Navigate | Related Symbol.
  • 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 Symbol.

See Also

Last modified: 18 July 2017