IntelliJ IDEA 2016.2 Help

Previewing Output of Layout Definition Files

With IntelliJ IDEA, you can preview the output of the currently opened layout definition file without launching a physical or a virtual device. The preview changes dynamically as you update the layout definition file. Using the layout preview, you can adjust your application to different Android platforms, devices, orientations, dock modes, locales, etc.

Depending on the mode in which you are designing the application layout, you can preview the output in different ways:

On this page:

To access layout preview

  1. Open the required layout definition file in the editor.
  2. Choose the editing mode:
    • To edit the layout manually, switch to the Text tab. The Preview tool window opens.
    • To edit the layout in the Designer tool window, switch to the Design tab. In this tab you can edit the layout in the visual mode without editing the text definition file.
      android_ui_designer_switch_modes.png

To preview a layout in different environments

Use the controls of the Preview tool window or the Design tab to emulate the target configuration to run the application in. The table below lists all available options:

Item Tooltip Description
AndroidLayoutConfig 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:
  • Create Landscape Variation: select this option to create a landscape version of your layout. The corresponding layout definition file will be generated in the res\layout-land folder. Once this variation is created, this menu option will be replaced with the Switch to layout-land option that opens the layout-land\<layout_file_name>.xml file for editing.
  • Create layout-xlarge Variation: select this option to create a variation of your layout for an extra large screen size (at least 960x720 dp). The corresponding layout definition file will be generated in the res\layout-xlarge folder. Once this variation is created, this menu option will be replaced with the Switch to layout-xlarge option that opens the layout-xlarge\<layout_file_name>.xml file for editing.
  • Switch to layout: this option is only available if you have created multiple layout versions. Select it to return to the original layout definition file.
  • Create Other: select this option to create another variation of your layout. In the Select Layout Directory dialog that opens, specify the folder where the layout definition will be stored and select resource qualifiers that determine a specific device configuration. Select the relevant qualifier and click icon_InsertReplace. Then specify the value of the qualifier in the dialog box that opens. The qualifier is added to the Chosen qualifiers list.
  • Preview Representative Sample select this option to display multiple device configurations and preview the layout on the most important screen sizes.
  • Preview All Screen Sizes: select this option to display multiple device configurations and preview the layout on all available screen sizes.
  • Preview All Locales: select this option to preview the layout in all locales where your application is going to be used.
  • Preview Right-to-Left Layout: select this option to preview the layout in both directions (left-to-right and right-to-left) side by side.
  • Preview Android Versions: select this option to preview the layout on all installed Android API versions.
  • Preview Included: select this option to preview your layout nested in another layout. This option is only available if the current layout is included into another layout.
  • Preview Layout Versions: select this option to display multiple device configurations and preview the layout in all available variations.
  • None: select this option to return to the default view.
  • Toggle Layout Mode: select this option to switch between different preview options.
AndroidDevice 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).
AndroidLayoutOrientation 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.
AndroidLayoutTheme Theme Click this button to select a theme from the Select Theme dialog.
AndroidAssociateLayout 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.
AndroidLocale 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).
AndroidAPIVersion 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.

To adjust the preview appearance

When you preview the layout output in the Preview tool window and design the layout manually in the editor, you may need to move the bounds of the tool window so more space is available in the editor. In this case it may be helpful to compress the preview so it fits the tool window size but still reflects the layout output in the emulated environment.

Use the controls in the toolbar to adjust the appearance of the layout preview:

ItemTooltipDescription
collapseAll.png Zoom to Fit Toggle this button to have IntelliJ IDEA compress or expand the preview so it fits the target screen size.
erDiagramIconActualSize.png Reset Zoom to 100% Click this button to have IntelliJ IDEA reset the zoom to preview the actual size.
erDiagramIconZoomIn.png Zoom In Click this button to have IntelliJ IDEA expand the preview.
erDiagramIconZoomOut.png Zoom Out Click this button to have IntelliJ IDEA compress the preview.
jumpToSourceIcon 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.png Refresh Click this button to have IntelliJ IDEA update the preview so that it reflects on-the-fly changes to the current layout definition.
takeScreenshot.png Save Screenshot Click this button to take a screenshot of the application preview.
projectToolWindowSettingsIcon.png Options Click this button to configure the appearance and behavior of the tool window.
  • Hide for non-layout files: select this option to have IntelliJ IDEA temporarily close the tool window when the focus in the editor switches to a non-layout file. As soon as the same or another layout definition file is in focus, the tool window re-appears automatically.
  • Include Device Frames (if available): select this option to make the preview look like it is going to appear on the actual device.
  • Show Lighting Effect: select this option to display lighting effects to make the preview look more natural.

See Also

Last modified: 23 November 2016