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:
- In the dedicated Preview tool window, when editing the layout definition file manually. The tool window appears when you open a layout definition file and switch to the Text tab.
- Right in the editor, when editing the layout using Android UI designer.
On this page:
To access layout preview
- Open the required layout definition file in the editor.
- Choose the editing mode:
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:
|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:
|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).|
|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.|
|Theme||Click this button to select a theme from the Select Theme dialog.|
|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.|
|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).|
|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:
|Zoom to Fit||Toggle this button to have IntelliJ IDEA compress or expand the preview so it fits the target screen size.|
|Reset Zoom to 100%||Click this button to have IntelliJ IDEA reset the zoom to preview the actual size.|
|Zoom In||Click this button to have IntelliJ IDEA expand the preview.|
|Zoom Out||Click this button to have IntelliJ IDEA compress the preview.|
|Jump to Source||Click this button to switch to the Text tab where you can edit the application layout in the source |
|Refresh||Click this button to have IntelliJ IDEA update the preview so that it reflects on-the-fly changes to the current layout definition.|
|Save Screenshot||Click this button to take a screenshot of the application preview.|
Click this button to configure the appearance and behavior of the tool window.