IntelliJ IDEA 12.1.0 Web Help

11.0+

With IntelliJ IDEA, you can preview the output of the currently opened layout definition file without launching a physical or virtual device. The preview changes dynamically, as you update the layout definition file. Using the layout preview, you can adjust the appearance of your application to various Android platforms, to devices with various screen sizes, orientations, doc modes, night/notnight modes, locales, etc. You can emulate the target configuration by choosing various settings from the corresponding controls.

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

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. In the Preview tool window, this is done using the toolbar buttons.

When you edit the layout in the UI Designer, the preview is already displayed in the editor tab, so there is no need in adjusting its appearance.

If you are editing layout in the UI Designer, you can configure target device emulation profiles. Each profile is a combination of target environment settings, such as platform, orientation, theme, dock mode, etc. After that you can switch among the defined profiles instead of setting up the environment emulation every time anew.

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. The current editor tab no longer shows the text definition but displays a preview, just like in the Preview tool window.\

      android_ui_designer_switch_modes.png

To preview layout, perform these general steps:

  • Use the controls of the Preview tool window or the Design tab to emulate the target configuration to run the application in.

    Specify the alternative resources to configure the target environment using the controls:
  • Normally, the preview changes on-the-fly as you update the definition file. If it does not, click the Refresh button refresh.png button to have IntelliJ IDEA update the preview.
To configure a device emulation profile
  1. In the Design tab of the Designer tool window, choose Edit Profiles from the Profile drop-down list in the top-left corner of the Design tab toolbar. By default, the Full item is selected unless no profiles are configured at all.

    android_ui_designer_profile_dropdown.png

  2. In the Edit Profiles dialog box that opens, configure a list of target environment profiles.
    • To define a new profile, click the Add button add.png and specify the profile name and the alternative resources.
    • To have the control for configuring an environment setting hidden when the profile is selected, clear the Visible check box next to the setting. By default, the controls for all settings are configured as visible.
    • To discard a profile, select it in the list and click the Remove button delete.png.
To adjust the preview appearance, perform these general steps:

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.

  • Adjust the preview appearance using the toolbar buttons:
    • To have IntelliJ IDEA compress or expand the preview so it fits the specified screen size, toggle the Zoom to Fit button collapseAll.png.
    • To have IntelliJ IDEA compress or expand the preview so it fits the Preview tool window size, click the Zoom to Actual Size button erDiagramIconActualSize.png.
    • To expand or compress the preview, use the Zoom In erDiagramIconZoomIn.png  and Zoom Out erDiagramIconZoomOut.png buttons respectively.

See Also

Reference:

Android:

Web Resources: