Android Studio Design Tools UX changes — split view

In this article, we would like to introduce the new behavior of the Design Editor in Android Studio 3.6, dive into some of the details of what motivated the UX changes, and show cool new things you can do with it. The following post was written by Amaury Medeiros (Software Engineer) and Paris Hsu (UX Designer) on behalf of the Layout Editor team.

Introducing Design Tools Split View

In Android Studio 3.6, we’re changing how you switch editing modes for design files. Instead of choosing between “Text” and “Design” editors (Figure 1) by selecting the corresponding tab on the bottom-left corner, we now open design files only in the Design editor, which has three different modes (Figure 2). Keep reading to find out the changes we’ve made and the motivation behind them.

Figure 1 — Design / Text view (Before)

Figure 2 — Split view (After)

You can select the following modes by clicking on the corresponding buttons on the top-right corner of the editor or by using the keyboard shortcuts (Ctrl + Shift + Left/Right Arrow if you are on a Mac, or Alt + Shift + Left/Right Arrow otherwise):

• Code: provides the functionality of an XML text editor.
• Design: consists of a view containing the design editor (e.g. navigation graph, layout) that can be used to edit the file graphically.
• Split: displays both Code and Design side-by-side, so you can preview your design while editing the text.

Users of previous versions might find the new Split view experience similar to simply editing XML files with the preview window open. There are some key differences, however, that we’re going to explain in this section.

Preserving the state of each file

As mentioned above, Split view shows the Design of a file next to its corresponding Code. If you are previewing a resource file using Split view and then switch to Design mode to edit the resource using our graphical tools, we’re now preserving the state of the design editor, such as zoom level and selection.

We know that editing multiple resource files in parallel is a common scenario. Every file has different needs, so you might want to edit one particular file in Design mode, another in Split mode, and yet another in Code mode (Figure 3). The editor now preserves the editor state of each file, so you can switch between files without worrying about losing preview state.

Figure 3 — Switching files that are different modes

In previous versions, the Preview window state would be reset any time you switched files. Imagine you were editing some file A in Text mode and had zoomed in on the Preview window, then switched to edit file B in Design mode. Switching back to file A would reset the Preview state, even though file B didn’t use it (Figure 4).

Figure 4 — Preview panel losing zoom level on file switch

The Preview tool window has been removed

You can preview your resource file using the newly added Split view, so we no longer need the Preview tool window. Before, we displayed this tool window every time you opened a resource file using the Text editor. If you changed the editor to Design or opened a non-resource file, we would hide the tool window (Figure 5). Since no other tool windows in Android Studio / IntelliJ don’t share the same behavior, this could be confusing.

Figure 5 — Preview tool window disappearing on file switch

Split view has all the tool windows

Speaking of tool windows, the Split view contains all the tool windows you see in Design mode. In previous versions, the Preview tool window offered only the Palette tool window, which meant that you needed to switch back and forth from Text + Preview to Design to see your component tree, for example.

Navigation Editor support

In addition to the usability changes mentioned above, we wanted to improve the preview support for more types of resource files. We’re happy to announce that you can open navigation graph files using the new Split mode and edit these files while previewing the result simultaneously in the Navigation Editor. This is particularly useful for large and complex graphs. For instance, if you have multiple layers of nested graphs, you’d likely need to switch between “Design” and “Text” editors a few times to match a particular fragment in your code with its corresponding graphical portion, as illustrated in Figure 6. Now you only need to click the <fragment> tag on the XML portion to display the fragment in the graphical portion, even if it’s inside a nested graph, as shown in Figure 7. Similarly, you can easily find elements in large navigation graphs by selecting the component of interest in the graphical portion of the editor. The text selection jumps to the corresponding XML tag.

Figure 6 — Finding target (before)

Figure 7 — Finding target (after)

Drawables support

We now provide the option to open a drawable in Design mode so the text editor does not occupy valuable UI space. This is useful, for instance, if you need to zoom in a lot to inspect a particular asset.

Previously, you could only open drawables using the XML editor, where we would provide the option of previewing the drawable using the Preview window. Figure 8 and Figure 9 show an example of verifying a vector drawable path in detail before and after we introduced the UX changes to the design editor, respectively.

Figure 8 — Drawable example (before)

Figure 9 — Drawable example (after)

Support for alternative usages

We know that many developers have a setup where it isn’t immediately clear how to best incorporate the UX changes introduced in Android Studio 3.6. Here we walk you through some scenarios.

Text Editor + Preview

For developers who currently use Text + Preview panel as the default setup when developing UI, we believe that the new Split mode provides a very similar experience.

Floating Preview Window

For developers who used the Preview panel in a floating window, you can achieve a similar experience by doing the following (Figure 10):

1. In the editor, right-click the tab of the file you want to float.
2. In the context menu, click on Split Vertically. Another instance of the file opens in a separate tab in a vertical split configuration.
3. Drag the new tab outside of Android Studio to create a floating window.
4. In the new tab, select Design mode to make this window act as your floating preview.

Figure 10 — Split as floating window

Vertical Preview Window

Finally, for those who used the Preview panel vertically by attaching it to the bottom of the text editor (particularly useful in vertical monitors). You can achieve a similar experience now by doing the following (Figure 11):

1. In the editor, right-click the tab of the file you want to preview.
2. In the context menu, click on Split Horizontally.
3. In the new tab, select Design mode.

Figure 11 — Split vertically

We want your feedback

We are always striving to provide the best experience for our users! Tell us what you think, and let us know if there is anything we can do to improve your workflow. Also, consider signing up for our research studies.

If you encounter any issues with the new UX changes, or if you have an idea for how we can further improve your productivity, please file a bug. We will continue to optimize performance, fix bugs, and incorporate your suggestions and feedback. Thank you!