diff options
Diffstat (limited to 'docs/html/sdk/installing/studio-layout.jd')
| -rw-r--r-- | docs/html/sdk/installing/studio-layout.jd | 148 |
1 files changed, 0 insertions, 148 deletions
diff --git a/docs/html/sdk/installing/studio-layout.jd b/docs/html/sdk/installing/studio-layout.jd deleted file mode 100644 index f0e5d59a4d4a..000000000000 --- a/docs/html/sdk/installing/studio-layout.jd +++ /dev/null @@ -1,148 +0,0 @@ -page.title=Using the Layout Editor - -@jd:body - -<div id="qv-wrapper"> -<div id="qv"> -<h2>See also</h2> -<ul> -<li><a href="{@docRoot}sdk/installing/studio.html"> -Getting Started with Android Studio</a></li> -<li><a href="{@docRoot}sdk/installing/studio-tips.html"> -Android Studio Tips and Tricks</a></li> -<li><a href="{@docRoot}sdk/installing/migrate.html"> -Migrating from Eclipse</a></li> -</div> -</div> - -<a class="notice-developers-video" -href="https://developers.google.com/events/io/sessions/324603352"> -<div> - <h3>Video</h3> - <p>What's New in Android Developer Tools</p> -</div> -</a> - -<p>Android Studio offers an advanced layout editor that allows you to drag-and-drop widgets -into your layout and preview your layout while editing the XML.</p> - -<p>Within the layout editor, you can switch between the <strong>Text</strong> view, where -you edit the XML file as text, and the <strong>Design</strong> view. Just click the -appropriate tab at the bottom of the window to display the desired editor.</p> - -<h2>Editing in the Text View</h2> - -<p>You can use the <strong>Text</strong> view to edit your layout file. This section describes -some of the features that are available in the <strong>Text</strong> view.</p> - -<h3>Preview</h3> - -<p>While editing in the <strong>Text</strong> view, you can preview the layout on devices -by opening the <strong>Preview</strong> pane available on the right side of the window. -Within the <strong>Preview</strong> pane, you can modify the preview by changing various -options at the top of the pane, including the preview device, layout theme, platform -version and more. To see a preview of how your app would look with a particular device -skin, click the preview icon -<img src="{@docRoot}images/tools/as-preview-icon.png" style="vertical-align:bottom;margin:0;height:19px" /> -and choose the desired device, such as Nexus 4:</p> - -<img src="{@docRoot}images/tools/as-preview-chrome.png" alt="" /> -<p class="img-caption"><strong>Figure 1.</strong> Previewing your app.</p> - -<p>To preview the layout on multiple devices simultaneously, select <strong>Preview All -Screen Sizes</strong> from the device drop-down. </p> - -<p>When you click in the preview image, the layout editor highlights the corresponding -section in the XML, and vice-versa.</p> - -<h3>Interactive error detection and recovery</h3> - -<p>As you edit the <strong>Text</strong> view of your layout XML file, Android Studio flags -typos and offers assistance.</p> - -<p>For example, suppose you are adding a button, and you misspell it as "Buttonn". -Android Studio helps you to correct it by displaying an error such as the following, -where you can click on "Change to Button" to fix the error in the XML file:</p> - -<img src="{@docRoot}images/tools/as-error.png" alt="" /> - -<p class="img-caption"><strong>Figure 2.</strong> Flagging errors.</p> - -<p>Android Studio also prompts you to supply missing information. For example, suppose you -start adding a fragment to your layout XML file. First of all, Android Studio displays -auto-complete suggestions as you type. Once it becomes clear that you are adding a fragment, -Android Studio displays an error panel with links that you can click to supply the missing -attributes. Clicking "Automatically add all missing attributes" in this case -does just that—it completes the fragment definition in your layout XML file:</p> - -<img src="{@docRoot}images/tools/as-frag-ex.png" alt="" /> - -<p class="img-caption"><strong>Figure 3.</strong> Supplying missing information</p> - -<h3>Picking a theme</h3> - -<p>To pick a theme for your app, click the Theme icon -<img src="{@docRoot}images/tools/as-theme-icon.png" style="vertical-align:bottom;margin:0;height:19px" />. -</p> - -<p>This displays the <strong>Select Theme</strong> dialog, where you can search for a -particular theme and/or select one from the list on the right hand side. The theme you -choose will be reflected in the previewed image.</p> - -<img src="{@docRoot}images/tools/as-theme-db.png" alt="" /> - -<p class="img-caption"><strong>Figure 4.</strong> Specifying a theme.</p> - -<h3>Localization</h3> - -<p>Android Studio provides built-in localization support. When you click the -localization icon -<img src="{@docRoot}images/tools/as-i18n-icon.png" style="vertical-align:bottom;margin:0;height:19px" />, -you can select a particular locale, add and edit translations, preview the locales your -app supports (all locales or just a single locale), and preview right-to-left layout for -languages that are RTL.</p> - -<p>See <a href="{@docRoot}training/basics/supporting-devices/languages.html">Supporting -Different Languages</a> for a description of how to support different locales in your app.</p> -<p>For example, here is a preview of a "Hello World" app for the -<img src="{@docRoot}images/tools/as-fr-icon.png" style="vertical-align:bottom;margin:0;height:19px" /> -locale:</p> - -<img src="{@docRoot}images/tools/as-fr-device.png" alt="" /> -<p class="img-caption"><strong>Figure 5.</strong> Previewing locales.</p> - -<h2>Editing in the Design View</h2> - -<p>You can switch to the graphical editor by clicking <strong>Design</strong> at the -bottom of the window. While editing in the <strong>Design</strong> view, you can show and -hide the widgets available to drag-and-drop by clicking <strong>Palette</strong> on the -left side of the window. Clicking <strong>Designer</strong> on the right side of the -window reveals a panel with a layout hierarchy and a list of properties for each view in -the layout.</p> - -<p>When you drag a widget into the graphical layout for your app, the display changes to -help you place the widget. What you see depends on the type of layout. For example, if -you're dragging a widget into a {@link android.widget.FrameLayout}, it displays a grid to -help you place the widget, as shown in figure 6:</p> - -<img src="{@docRoot}images/tools/as-grid-layout.png" alt="" /> - -<p class="img-caption"><strong>Figure 6.</strong> Using the grid layout to place a widget.</p> - -<p>Within the graphical editor, you can rearrange your app's UI by dragging widgets to -the desired location.</p> - -<h3>Taking a snapshot</h3> - -<p>When you run your app on a connected device, you can take a snapshot of it by clicking -the camera icon -<img src="{@docRoot}images/tools/as-camera-icon.png" style="vertical-align:bottom;margin:0;height:19px" /> -to the left of the logging -panel (at the bottom of the window by default). This takes a snapshot of your running app -(or whatever is currently displayed on your device) and displays it in a window. Check -<strong>Frame Screenshot</strong> to show your screenshot within the device skin of your -choice. You can also specify whether you want the image to have screen glare and/or a drop -shadow. Once you have the desired effect, you can save the image.</p> - -<p>You can use the same process to create a snapshot of your app's preview. Just click the -camera icon in the preview area and follow the steps for adding a device skin.</p> |