{"id":38008,"date":"2018-09-24T01:01:52","date_gmt":"2018-09-24T05:01:52","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=38008"},"modified":"2019-03-25T14:06:14","modified_gmt":"2019-03-25T22:06:14","slug":"split-view-android-designer","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/split-view-android-designer\/","title":{"rendered":"Using the Android Designer Split View"},"content":{"rendered":"

\t\t\t\tThe ability to see the\u00a0design view and\u00a0layout XML at the same time, side by side, was one of\u00a0our\u00a0most requested features for the\u00a0Android Designer. With Split View<\/a>, new in the Visual Studio 2017 version 15.8 release<\/strong>, you can switch back & forth\u00a0freely\u00a0between both modes of working. Edit the layout XML to see the changes immediately previewed\u00a0in the designer or make changes in the designer and see the XML update.\u00a0(Note: Split View is currently just available on Windows, not yet on Visual Studio for Mac.)<\/span><\/p>\n

Using\u00a0<\/span><\/span>Split View<\/span><\/span><\/h2>\n

By\u00a0default, Split View appears with the designer on the left and\u00a0editor on the right.\u00a0If you prefer\u00a0the editor on the left, hit the Swap Panes<\/strong>\u00a0button at the top of the vertical splitter bar. To make the designer pane narrower, so it has less whitespace and the editor has more room, drag the splitter.<\/p>\n

You can also split the UI horizontally or go back to the old tabbed UI. Use the buttons at the bottom of the splitter bar to do this on a per-file basis.<\/span><\/span><\/p>\n

\"\"<\/a><\/p>\n

Sticky Layouts<\/h3>\n

The split view\u00a0<\/span><\/span>window\u00a0<\/span><\/span>layout is\u00a0<\/span><\/span>sticky.\u00a0<\/span><\/span>It is remembered on a per file basis, so once you get the layout just right it will be\u00a0<\/span><\/span>used\u00a0<\/span><\/span>next time you open that same .<\/strong><\/span><\/span>axml<\/span><\/span><\/strong>\u00a0file.<\/span><\/span>\u00a0The WPF\/UWP XAML designer\u00a0<\/span><\/span>and 15.8\u00a0<\/span><\/span>Xamarin.Forms<\/span><\/span>\u00a0Previewer all work\u00a0<\/span><\/span>the same. They\u00a0<\/span><\/span>all\u00a0<\/span><\/span>share the same split view UI code.<\/span><\/span>\u00a0<\/span>
<\/span>\u00a0<\/span>
<\/span>Those per-file\u00a0<\/span><\/span>sticky\u00a0<\/span><\/span>settings\u00a0<\/span><\/span>are\u00a0<\/span><\/span>remembered\u00a0<\/span><\/span>in the hidden .vs<\/strong>\u00a0directory,\u00a0<\/span><\/span>next to the solution<\/span><\/span>\u2019s<\/span><\/span>\u00a0.<\/strong><\/span><\/span>sln<\/span><\/span><\/strong>\u00a0file.\u00a0<\/span><\/span>If you ever want to\u00a0<\/span><\/span>forget those\u00a0<\/span><\/span>sticky\u00a0<\/span><\/span>settings\u00a0<\/span><\/span>and have the window layouts reset to their default,\u00a0<\/span><\/span>exit Visual Studio and delete the .vs<\/strong> directory. It will be recreated<\/span><\/span>.<\/span><\/span><\/p>\n

Split View Preferences<\/h2>\n

To change the default window layout settings for all .<\/strong><\/span><\/span>axml<\/span><\/span><\/strong>\u00a0files, go to Tools -> Options -> Xamarin -> Android UI Designer<\/strong>.\u00a0 Note that sticky per-file settings override these global defaults, so you may want\u00a0<\/span><\/span>t<\/span><\/span>o delete the .vs<\/strong> directory\u00a0<\/span><\/span>to\u00a0<\/span><\/span>see everything switch to the new defaults.<\/span><\/span><\/p>\n

\"\"<\/a><\/p>\n

Document Outline<\/h2>\n

Although the Android designer\u00a0Document Outline<\/a> is not a new feature, it’s a little hidden so you may not know about it. It\u2019s a\u00a0very handy\u00a0feature especially when your page has a lot of controls.\u00a0<\/span><\/p>\n

Click on the\u00a0Document Outline<\/strong> vertical tab on the left\u00a0to show\u00a0the\u00a0outline. If that\u00a0tab does not appear, you may have closed the outline\u00a0window\u00a0earlier.\u00a0Use the View -> Other Windows -> Document Outline<\/strong> menu item to show it again.<\/p>\n

\"\"<\/a><\/p>\n

On<\/span><\/span>c<\/span><\/span>e the Document Outline is visible you may want to\u00a0<\/span><\/span>doc<\/span><\/span>k<\/span><\/span>\u00a0it below the\u00a0<\/span><\/span>T<\/span><\/span>oolbox\u00a0<\/span><\/span>window, like shown below. U<\/span><\/span>se the Document Outline to see all the controls in your layout.\u00a0<\/span><\/span>Drag to reorder them,\u00a0<\/span><\/span>select to change\u00a0<\/span><\/span>their\u00a0<\/span><\/span>properties, or\u00a0<\/span><\/span>cut\/copy\/paste\/delete them.<\/span><\/span>\u00a0It\u2019s a great alternative to manipulating controls on the designer surface.<\/span><\/span><\/p>\n

\"\"<\/a><\/p>\n

Upcoming Split View Features<\/h2>\n

Beyond what is\u00a0currently shipped in 15.8, we have been working on more\u00a0Android UI\u00a0creation\u00a0tooling\u00a0enhancements, especially continuing to improve the text editor experience. Here’s a sampling of what’s coming:<\/p>\n

\"\"<\/a><\/p>\n