1page.title=Using the Layout Editor 2 3@jd:body 4 5<div id="qv-wrapper"> 6<div id="qv"> 7<h2>See also</h2> 8<ul> 9<li><a href="{@docRoot}sdk/installing/studio.html"> 10Getting Started with Android Studio</a></li> 11<li><a href="{@docRoot}sdk/installing/studio-tips.html"> 12Android Studio Tips and Tricks</a></li> 13<li><a href="{@docRoot}sdk/installing/migrate.html"> 14Migrating from Eclipse</a></li> 15</div> 16</div> 17 18<a class="notice-developers-video" 19href="https://developers.google.com/events/io/sessions/324603352"> 20<div> 21 <h3>Video</h3> 22 <p>What's New in Android Developer Tools</p> 23</div> 24</a> 25 26<p>Android Studio offers an advanced layout editor that allows you to drag-and-drop widgets 27into your layout and preview your layout while editing the XML.</p> 28 29<p>Within the layout editor, you can switch between the <strong>Text</strong> view, where 30you edit the XML file as text, and the <strong>Design</strong> view. Just click the 31appropriate tab at the bottom of the window to display the desired editor.</p> 32 33<h2>Editing in the Text View</h2> 34 35<p>You can use the <strong>Text</strong> view to edit your layout file. This section describes 36some of the features that are available in the <strong>Text</strong> view.</p> 37 38<h3>Preview</h3> 39 40<p>While editing in the <strong>Text</strong> view, you can preview the layout on devices 41by opening the <strong>Preview</strong> pane available on the right side of the window. 42Within the <strong>Preview</strong> pane, you can modify the preview by changing various 43options at the top of the pane, including the preview device, layout theme, platform 44version and more. To see a preview of how your app would look with a particular device 45skin, click the preview icon 46<img src="{@docRoot}images/tools/as-preview-icon.png" style="vertical-align:bottom;margin:0;height:19px" /> 47and choose the desired device, such as Nexus 4:</p> 48 49<img src="{@docRoot}images/tools/as-preview-chrome.png" alt="" /> 50<p class="img-caption"><strong>Figure 1.</strong> Previewing your app.</p> 51 52<p>To preview the layout on multiple devices simultaneously, select <strong>Preview All 53Screen Sizes</strong> from the device drop-down. </p> 54 55<p>When you click in the preview image, the layout editor highlights the corresponding 56section in the XML, and vice-versa.</p> 57 58<h3>Interactive error detection and recovery</h3> 59 60<p>As you edit the <strong>Text</strong> view of your layout XML file, Android Studio flags 61typos and offers assistance.</p> 62 63<p>For example, suppose you are adding a button, and you misspell it as "Buttonn". 64Android Studio helps you to correct it by displaying an error such as the following, 65where you can click on "Change to Button" to fix the error in the XML file:</p> 66 67<img src="{@docRoot}images/tools/as-error.png" alt="" /> 68 69<p class="img-caption"><strong>Figure 2.</strong> Flagging errors.</p> 70 71<p>Android Studio also prompts you to supply missing information. For example, suppose you 72start adding a fragment to your layout XML file. First of all, Android Studio displays 73auto-complete suggestions as you type. Once it becomes clear that you are adding a fragment, 74Android Studio displays an error panel with links that you can click to supply the missing 75attributes. Clicking "Automatically add all missing attributes" in this case 76does just that—it completes the fragment definition in your layout XML file:</p> 77 78<img src="{@docRoot}images/tools/as-frag-ex.png" alt="" /> 79 80<p class="img-caption"><strong>Figure 3.</strong> Supplying missing information</p> 81 82<h3>Picking a theme</h3> 83 84<p>To pick a theme for your app, click the Theme icon 85<img src="{@docRoot}images/tools/as-theme-icon.png" style="vertical-align:bottom;margin:0;height:19px" />. 86</p> 87 88<p>This displays the <strong>Select Theme</strong> dialog, where you can search for a 89particular theme and/or select one from the list on the right hand side. The theme you 90choose will be reflected in the previewed image.</p> 91 92<img src="{@docRoot}images/tools/as-theme-db.png" alt="" /> 93 94<p class="img-caption"><strong>Figure 4.</strong> Specifying a theme.</p> 95 96<h3>Localization</h3> 97 98<p>Android Studio provides built-in localization support. When you click the 99localization icon 100<img src="{@docRoot}images/tools/as-i18n-icon.png" style="vertical-align:bottom;margin:0;height:19px" />, 101you can select a particular locale, add and edit translations, preview the locales your 102app supports (all locales or just a single locale), and preview right-to-left layout for 103languages that are RTL.</p> 104 105<p>See <a href="{@docRoot}training/basics/supporting-devices/languages.html">Supporting 106Different Languages</a> for a description of how to support different locales in your app.</p> 107<p>For example, here is a preview of a "Hello World" app for the 108<img src="{@docRoot}images/tools/as-fr-icon.png" style="vertical-align:bottom;margin:0;height:19px" /> 109locale:</p> 110 111<img src="{@docRoot}images/tools/as-fr-device.png" alt="" /> 112<p class="img-caption"><strong>Figure 5.</strong> Previewing locales.</p> 113 114<h2>Editing in the Design View</h2> 115 116<p>You can switch to the graphical editor by clicking <strong>Design</strong> at the 117bottom of the window. While editing in the <strong>Design</strong> view, you can show and 118hide the widgets available to drag-and-drop by clicking <strong>Palette</strong> on the 119left side of the window. Clicking <strong>Designer</strong> on the right side of the 120window reveals a panel with a layout hierarchy and a list of properties for each view in 121the layout.</p> 122 123<p>When you drag a widget into the graphical layout for your app, the display changes to 124help you place the widget. What you see depends on the type of layout. For example, if 125you're dragging a widget into a {@link android.widget.FrameLayout}, it displays a grid to 126help you place the widget, as shown in figure 6:</p> 127 128<img src="{@docRoot}images/tools/as-grid-layout.png" alt="" /> 129 130<p class="img-caption"><strong>Figure 6.</strong> Using the grid layout to place a widget.</p> 131 132<p>Within the graphical editor, you can rearrange your app's UI by dragging widgets to 133the desired location.</p> 134 135<h3>Taking a snapshot</h3> 136 137<p>When you run your app on a connected device, you can take a snapshot of it by clicking 138the camera icon 139<img src="{@docRoot}images/tools/as-camera-icon.png" style="vertical-align:bottom;margin:0;height:19px" /> 140to the left of the logging 141panel (at the bottom of the window by default). This takes a snapshot of your running app 142(or whatever is currently displayed on your device) and displays it in a window. Check 143<strong>Frame Screenshot</strong> to show your screenshot within the device skin of your 144choice. You can also specify whether you want the image to have screen glare and/or a drop 145shadow. Once you have the desired effect, you can save the image.</p> 146 147<p>You can use the same process to create a snapshot of your app's preview. Just click the 148camera icon in the preview area and follow the steps for adding a device skin.</p> 149
