diff options
author | Katie McCormick <kmccormick@google.com> | 2014-03-14 16:28:18 +0000 |
---|---|---|
committer | Android Git Automerger <android-git-automerger@android.com> | 2014-03-14 16:28:18 +0000 |
commit | 8e142bbbe19c2f485033eace102d2e950ceeb4fb (patch) | |
tree | 71d3a9de2e12ec39277de31f1943e097e88c5378 | |
parent | 75985bbe2f04519cc663db7ad54e8e69f3eabfc0 (diff) | |
parent | b681794d2583e06693c23eec1af4e282b067abd9 (diff) | |
download | frameworks_base-8e142bbbe19c2f485033eace102d2e950ceeb4fb.zip frameworks_base-8e142bbbe19c2f485033eace102d2e950ceeb4fb.tar.gz frameworks_base-8e142bbbe19c2f485033eace102d2e950ceeb4fb.tar.bz2 |
am b681794d: am 07c0ad97: Merge "Doc update: new doc studio layout editor" into klp-docs
* commit 'b681794d2583e06693c23eec1af4e282b067abd9':
Doc update: new doc studio layout editor
-rw-r--r-- | docs/html/images/tools/as-camera-icon.png | bin | 0 -> 416 bytes | |||
-rw-r--r-- | docs/html/images/tools/as-error.png | bin | 0 -> 18169 bytes | |||
-rw-r--r-- | docs/html/images/tools/as-fr-device.png | bin | 0 -> 34519 bytes | |||
-rw-r--r-- | docs/html/images/tools/as-fr-icon.png | bin | 0 -> 668 bytes | |||
-rw-r--r-- | docs/html/images/tools/as-frag-ex.png | bin | 0 -> 56380 bytes | |||
-rw-r--r-- | docs/html/images/tools/as-grid-layout.png | bin | 0 -> 57531 bytes | |||
-rw-r--r-- | docs/html/images/tools/as-i18n-icon.png | bin | 0 -> 749 bytes | |||
-rw-r--r-- | docs/html/images/tools/as-preview-chrome.png | bin | 0 -> 30890 bytes | |||
-rw-r--r-- | docs/html/images/tools/as-preview-icon.png | bin | 0 -> 502 bytes | |||
-rw-r--r-- | docs/html/images/tools/as-preview-nochrome.png | bin | 0 -> 6953 bytes | |||
-rw-r--r-- | docs/html/images/tools/as-theme-db.png | bin | 0 -> 35427 bytes | |||
-rw-r--r-- | docs/html/images/tools/as-theme-icon.png | bin | 0 -> 735 bytes | |||
-rw-r--r-- | docs/html/sdk/installing/studio-layout.jd | 148 | ||||
-rw-r--r-- | docs/html/tools/tools_toc.cs | 4 |
14 files changed, 151 insertions, 1 deletions
diff --git a/docs/html/images/tools/as-camera-icon.png b/docs/html/images/tools/as-camera-icon.png Binary files differnew file mode 100644 index 0000000..419a88d --- /dev/null +++ b/docs/html/images/tools/as-camera-icon.png diff --git a/docs/html/images/tools/as-error.png b/docs/html/images/tools/as-error.png Binary files differnew file mode 100644 index 0000000..8865f54 --- /dev/null +++ b/docs/html/images/tools/as-error.png diff --git a/docs/html/images/tools/as-fr-device.png b/docs/html/images/tools/as-fr-device.png Binary files differnew file mode 100644 index 0000000..aec3bce --- /dev/null +++ b/docs/html/images/tools/as-fr-device.png diff --git a/docs/html/images/tools/as-fr-icon.png b/docs/html/images/tools/as-fr-icon.png Binary files differnew file mode 100644 index 0000000..9252ca1 --- /dev/null +++ b/docs/html/images/tools/as-fr-icon.png diff --git a/docs/html/images/tools/as-frag-ex.png b/docs/html/images/tools/as-frag-ex.png Binary files differnew file mode 100644 index 0000000..775fa5e --- /dev/null +++ b/docs/html/images/tools/as-frag-ex.png diff --git a/docs/html/images/tools/as-grid-layout.png b/docs/html/images/tools/as-grid-layout.png Binary files differnew file mode 100644 index 0000000..41b933a --- /dev/null +++ b/docs/html/images/tools/as-grid-layout.png diff --git a/docs/html/images/tools/as-i18n-icon.png b/docs/html/images/tools/as-i18n-icon.png Binary files differnew file mode 100644 index 0000000..d35568f --- /dev/null +++ b/docs/html/images/tools/as-i18n-icon.png diff --git a/docs/html/images/tools/as-preview-chrome.png b/docs/html/images/tools/as-preview-chrome.png Binary files differnew file mode 100644 index 0000000..716b8d7 --- /dev/null +++ b/docs/html/images/tools/as-preview-chrome.png diff --git a/docs/html/images/tools/as-preview-icon.png b/docs/html/images/tools/as-preview-icon.png Binary files differnew file mode 100644 index 0000000..59c7644 --- /dev/null +++ b/docs/html/images/tools/as-preview-icon.png diff --git a/docs/html/images/tools/as-preview-nochrome.png b/docs/html/images/tools/as-preview-nochrome.png Binary files differnew file mode 100644 index 0000000..1011e08 --- /dev/null +++ b/docs/html/images/tools/as-preview-nochrome.png diff --git a/docs/html/images/tools/as-theme-db.png b/docs/html/images/tools/as-theme-db.png Binary files differnew file mode 100644 index 0000000..beade0d --- /dev/null +++ b/docs/html/images/tools/as-theme-db.png diff --git a/docs/html/images/tools/as-theme-icon.png b/docs/html/images/tools/as-theme-icon.png Binary files differnew file mode 100644 index 0000000..0e5fdf0 --- /dev/null +++ b/docs/html/images/tools/as-theme-icon.png diff --git a/docs/html/sdk/installing/studio-layout.jd b/docs/html/sdk/installing/studio-layout.jd new file mode 100644 index 0000000..f0e5d59 --- /dev/null +++ b/docs/html/sdk/installing/studio-layout.jd @@ -0,0 +1,148 @@ +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> diff --git a/docs/html/tools/tools_toc.cs b/docs/html/tools/tools_toc.cs index a8424e6..382165c 100644 --- a/docs/html/tools/tools_toc.cs +++ b/docs/html/tools/tools_toc.cs @@ -34,7 +34,9 @@ Migrating from Eclipse</a></li> <li><a href="<?cs var:toroot ?>sdk/installing/studio-tips.html"> Tips and Tricks</a></li> - </ul> + <li><a href="<?cs var:toroot ?>sdk/installing/studio-layout.html"> + Using the Layout Editor</a></li> + </ul> </li> <li><a href="<?cs var:toroot ?>sdk/exploring.html"> <span class="en">Exploring the SDK</span></a></li> |