1 page.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"> 10 Getting Started with Android Studio</a></li> 11 <li><a href="{@docRoot}sdk/installing/studio-tips.html"> 12 Android Studio Tips and Tricks</a></li> 13 <li><a href="{@docRoot}sdk/installing/migrate.html"> 14 Migrating from Eclipse</a></li> 15 </div> 16 </div> 17 18 <a class="notice-developers-video" 19 href="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 27 into 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 30 you edit the XML file as text, and the <strong>Design</strong> view. Just click the 31 appropriate 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 36 some 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 41 by opening the <strong>Preview</strong> pane available on the right side of the window. 42 Within the <strong>Preview</strong> pane, you can modify the preview by changing various 43 options at the top of the pane, including the preview device, layout theme, platform 44 version and more. To see a preview of how your app would look with a particular device 45 skin, click the preview icon 46 <img src="{@docRoot}images/tools/as-preview-icon.png" style="vertical-align:bottom;margin:0;height:19px" /> 47 and 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 53 Screen Sizes</strong> from the device drop-down. </p> 54 55 <p>When you click in the preview image, the layout editor highlights the corresponding 56 section 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 61 typos and offers assistance.</p> 62 63 <p>For example, suppose you are adding a button, and you misspell it as "Buttonn". 64 Android Studio helps you to correct it by displaying an error such as the following, 65 where 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 72 start adding a fragment to your layout XML file. First of all, Android Studio displays 73 auto-complete suggestions as you type. Once it becomes clear that you are adding a fragment, 74 Android Studio displays an error panel with links that you can click to supply the missing 75 attributes. Clicking "Automatically add all missing attributes" in this case 76 does 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 89 particular theme and/or select one from the list on the right hand side. The theme you 90 choose 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 99 localization icon 100 <img src="{@docRoot}images/tools/as-i18n-icon.png" style="vertical-align:bottom;margin:0;height:19px" />, 101 you can select a particular locale, add and edit translations, preview the locales your 102 app supports (all locales or just a single locale), and preview right-to-left layout for 103 languages that are RTL.</p> 104 105 <p>See <a href="{@docRoot}training/basics/supporting-devices/languages.html">Supporting 106 Different 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" /> 109 locale:</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 117 bottom of the window. While editing in the <strong>Design</strong> view, you can show and 118 hide the widgets available to drag-and-drop by clicking <strong>Palette</strong> on the 119 left side of the window. Clicking <strong>Designer</strong> on the right side of the 120 window reveals a panel with a layout hierarchy and a list of properties for each view in 121 the layout.</p> 122 123 <p>When you drag a widget into the graphical layout for your app, the display changes to 124 help you place the widget. What you see depends on the type of layout. For example, if 125 you're dragging a widget into a {@link android.widget.FrameLayout}, it displays a grid to 126 help 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 133 the 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 138 the camera icon 139 <img src="{@docRoot}images/tools/as-camera-icon.png" style="vertical-align:bottom;margin:0;height:19px" /> 140 to the left of the logging 141 panel (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 144 choice. You can also specify whether you want the image to have screen glare and/or a drop 145 shadow. 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 148 camera icon in the preview area and follow the steps for adding a device skin.</p> 149
