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:
In the dedicated Preview tool window, when editing the layout manually.
The tool window appears when you open a layout definition file and switch to the Text tab to edit the file manually. The tool window remains on the screen until you close it manually by clicking the Preview tool window button or switch to the Design tab to compose the layout in the UI Designer. After that it remains hidden until you switch to the manual mode again.
- Right in the editor, when editing the layout using Android UI designer.
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:
- Accessing layout preview
- Previewing layout
- Configuring a device emulation profile
- Adjusting the preview appearance
- Open the required layout definition file in the editor.
- Choose the editing mode:
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:
- Target device which presents a combination of Screen size and screen density. If no device is chosen, IntelliJ IDEA displays an error message and provides a link to the dialog box where you can configure it.
- Screen orientation.
- Target Android platform to adjust the application to.
- Dock mode.
- Night mode.
- Normally, the preview changes on-the-fly as you update the definition file. If it does not, click the Refresh button button to have IntelliJ IDEA update the preview.
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.
In the Edit Profiles dialog box that opens, configure a list of target environment profiles.
- To define a new profile, click the Add button 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 .
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 .
- To have IntelliJ IDEA compress or expand the preview so it fits the Preview tool window size, click the Zoom to Actual Size button .
- To expand or compress the preview, use the Zoom In and Zoom Out buttons respectively.