In this article, we’ll introduce you to the new features of the Design Editor in Android Studio 3.6, share some of the details that make these changes to your experience possible, and show you what interesting new things you can do with it. The following article was written by Amaury Medeiros, software engineer, and Paris Hsu, UX designer on the Layout Editor team.
This section describes Split View in Design Tools
In Android Studio 3.6, we made some changes to the editing mode of the Design file. Instead of switching between Text or Design in the lower left corner (Figure 1), we consolidated it into a unified Design editor with three editing mode options (Figure 2). Read on to learn about the changes we’ve made.
- Code: provides XML file editor functionality;
- Design: Consists of a view containing a Design editor (such as a navigation bar, a layout bar) that can be used to edit files in a WYSIWYG manner;
- Split: Displays Code and Design at the same time, so you can preview your renderings while editing the text.
Users of previous versions may find the experience of using the new Split View similar to that of editing an XML file while opening a preview window. But we’ll talk about the differences later.
Save the state of each file
As mentioned above, the Split view shows the Code view on one side and the corresponding Design view on the other. If you preview a resource file using a Split view, then switch to Design mode and edit the resource file using wySIWYG, we leave the state of the Design Editor, such as the zoom level and selected items.
We also learned that it is common to edit multiple resource files in parallel, with each file having different editing needs; for example, you might need to edit one file in Design mode, another in Split mode, and a third file in Code mode. The editor now saves the edit state of each file, so you can switch freely between files without worrying about losing the preview state.
Remove the Preview tool window
You can now Preview resource files using the newly added “Split view “, so the Preview tool window (in Text mode) is no longer needed. We previously displayed this panel every time we opened a resource file in Text mode. If we switch the editor to Design mode or open a non-resource file, we will hide the tool window (Figure 5). Since there is no tool window for similar functionality in Android Studio/IntelliJ, this feature can be confusing to users.
Speaking of tool Windows, the Split view contains all the tools available in Design mode. In previous versions, if you wanted to see the entire component tree, you might have toggled back and forth between the Text mode + Preview tool window and the Design mode to do so.
Support for Navigation Editor
In addition to the usability changes mentioned above, we also hope to improve our preview functionality to support more types of resource files. You can now use the new Split mode to open and edit navigation bar files while also previewing them. This is especially useful for editing large and complex graphics. For example, if you want to clip a graph that has multiple layers of nesting, you may need to switch back and forth between the “Design” and “Text” editors several times to match a particular fragment of code with its corresponding graphic portion, as shown in Figure 6.
Now, you can simply click the label on the XML section to display the snippet on the graphical interface, even if it is inside a nested layer, as shown in Figure 7. Similarly, you can easily locate the corresponding element in the navigation diagram by selecting a component in the editor’s graph. The selection of text jumps to the corresponding XML tag.
Support for drawing
We now provide an option to open a draw object in Design mode so that the text editor doesn’t take up valuable UI space. Such changes are especially useful when you need to zoom in on a resource for review.
Previously, you could only open drawable objects using the XML editor. We will provide an option to Preview drawable objects using the Preview window. Figures 8 and 9 show the difference between validation vector drawable paths before and after introducing UX changes into the editor, respectively.
Support for alternative usage
We know that many developers aren’t quite sure how to take advantage of the UX changes introduced in Android Studio 3.6, and here are some of the options.
The Text Editor and Preview
For developers who currently use the Text + Preview panel as their default UI configuration, we think the new Split mode will provide a very similar experience.
Floating Preview window
For developers using the Preview panel in a floating window, you can get a similar experience by doing the following (Figure 10) :
- In the editor, right – click the file TAB you want to float;
- In the context menu, click Split Vertically. Another instance of the file is opened in a separate TAB as a vertical split;
- Drag the new TAB out of the Android Studio interface to create a floating window.
- In the new TAB, select Design mode to make the window look like a floating preview.
Vertical preview window
Finally, for developers who use the Preview panel by attaching it to the bottom of the file editor (especially useful in vertical monitors), you can now get a similar experience by doing the following (Figure 11) :
- In the editor, right – click the TAB bar of the file you want to preview.
- In the context menu, select Split Horizontally;
- In the new TAB bar, select Design mode.
Looking forward to your feedback
We are always trying to provide the best user experience for our users. Tell us what you think and let us know what else we can do to improve your workflow. If you are interested in this, you can participate in our user experience improvement research project.
If you have any questions about the new UX changes, or if you have further ideas to improve your productivity, please contact us. We will continue to optimize performance and fix bugs based on your suggestions and feedback. Thank you very much!
Click here toLearn more about Android Studio
