From 88b5384969365d0146c89e31d7f9576c008e42f3 Mon Sep 17 00:00:00 2001 From: Katie McCormick Date: Wed, 12 Feb 2014 15:07:14 -0800 Subject: Doc update: new doc studio layout editor Change-Id: Iaeb99dca97086540e7d10f9de9e2978439ddebd9 --- docs/html/images/tools/as-camera-icon.png | Bin 0 -> 416 bytes docs/html/images/tools/as-error.png | Bin 0 -> 18169 bytes docs/html/images/tools/as-fr-device.png | Bin 0 -> 34519 bytes docs/html/images/tools/as-fr-icon.png | Bin 0 -> 668 bytes docs/html/images/tools/as-frag-ex.png | Bin 0 -> 56380 bytes docs/html/images/tools/as-grid-layout.png | Bin 0 -> 57531 bytes docs/html/images/tools/as-i18n-icon.png | Bin 0 -> 749 bytes docs/html/images/tools/as-preview-chrome.png | Bin 0 -> 30890 bytes docs/html/images/tools/as-preview-icon.png | Bin 0 -> 502 bytes docs/html/images/tools/as-preview-nochrome.png | Bin 0 -> 6953 bytes docs/html/images/tools/as-theme-db.png | Bin 0 -> 35427 bytes docs/html/images/tools/as-theme-icon.png | Bin 0 -> 735 bytes docs/html/sdk/installing/studio-layout.jd | 148 +++++++++++++++++++++++++ docs/html/tools/tools_toc.cs | 4 +- 14 files changed, 151 insertions(+), 1 deletion(-) create mode 100644 docs/html/images/tools/as-camera-icon.png create mode 100644 docs/html/images/tools/as-error.png create mode 100644 docs/html/images/tools/as-fr-device.png create mode 100644 docs/html/images/tools/as-fr-icon.png create mode 100644 docs/html/images/tools/as-frag-ex.png create mode 100644 docs/html/images/tools/as-grid-layout.png create mode 100644 docs/html/images/tools/as-i18n-icon.png create mode 100644 docs/html/images/tools/as-preview-chrome.png create mode 100644 docs/html/images/tools/as-preview-icon.png create mode 100644 docs/html/images/tools/as-preview-nochrome.png create mode 100644 docs/html/images/tools/as-theme-db.png create mode 100644 docs/html/images/tools/as-theme-icon.png create mode 100644 docs/html/sdk/installing/studio-layout.jd diff --git a/docs/html/images/tools/as-camera-icon.png b/docs/html/images/tools/as-camera-icon.png new file mode 100644 index 0000000..419a88d Binary files /dev/null and b/docs/html/images/tools/as-camera-icon.png differ diff --git a/docs/html/images/tools/as-error.png b/docs/html/images/tools/as-error.png new file mode 100644 index 0000000..8865f54 Binary files /dev/null and b/docs/html/images/tools/as-error.png differ diff --git a/docs/html/images/tools/as-fr-device.png b/docs/html/images/tools/as-fr-device.png new file mode 100644 index 0000000..aec3bce Binary files /dev/null and b/docs/html/images/tools/as-fr-device.png differ diff --git a/docs/html/images/tools/as-fr-icon.png b/docs/html/images/tools/as-fr-icon.png new file mode 100644 index 0000000..9252ca1 Binary files /dev/null and b/docs/html/images/tools/as-fr-icon.png differ diff --git a/docs/html/images/tools/as-frag-ex.png b/docs/html/images/tools/as-frag-ex.png new file mode 100644 index 0000000..775fa5e Binary files /dev/null and b/docs/html/images/tools/as-frag-ex.png differ diff --git a/docs/html/images/tools/as-grid-layout.png b/docs/html/images/tools/as-grid-layout.png new file mode 100644 index 0000000..41b933a Binary files /dev/null and b/docs/html/images/tools/as-grid-layout.png differ diff --git a/docs/html/images/tools/as-i18n-icon.png b/docs/html/images/tools/as-i18n-icon.png new file mode 100644 index 0000000..d35568f Binary files /dev/null and b/docs/html/images/tools/as-i18n-icon.png differ diff --git a/docs/html/images/tools/as-preview-chrome.png b/docs/html/images/tools/as-preview-chrome.png new file mode 100644 index 0000000..716b8d7 Binary files /dev/null and b/docs/html/images/tools/as-preview-chrome.png differ diff --git a/docs/html/images/tools/as-preview-icon.png b/docs/html/images/tools/as-preview-icon.png new file mode 100644 index 0000000..59c7644 Binary files /dev/null and b/docs/html/images/tools/as-preview-icon.png differ diff --git a/docs/html/images/tools/as-preview-nochrome.png b/docs/html/images/tools/as-preview-nochrome.png new file mode 100644 index 0000000..1011e08 Binary files /dev/null and b/docs/html/images/tools/as-preview-nochrome.png differ diff --git a/docs/html/images/tools/as-theme-db.png b/docs/html/images/tools/as-theme-db.png new file mode 100644 index 0000000..beade0d Binary files /dev/null and b/docs/html/images/tools/as-theme-db.png differ diff --git a/docs/html/images/tools/as-theme-icon.png b/docs/html/images/tools/as-theme-icon.png new file mode 100644 index 0000000..0e5fdf0 Binary files /dev/null and b/docs/html/images/tools/as-theme-icon.png differ 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 + +
+ +
+ + +
+

Video

+

What's New in Android Developer Tools

+
+ + +

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.

+ +

Within the layout editor, you can switch between the Text view, where +you edit the XML file as text, and the Design view. Just click the +appropriate tab at the bottom of the window to display the desired editor.

+ +

Editing in the Text View

+ +

You can use the Text view to edit your layout file. This section describes +some of the features that are available in the Text view.

+ +

Preview

+ +

While editing in the Text view, you can preview the layout on devices +by opening the Preview pane available on the right side of the window. +Within the Preview 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 + +and choose the desired device, such as Nexus 4:

+ + +

Figure 1. Previewing your app.

+ +

To preview the layout on multiple devices simultaneously, select Preview All +Screen Sizes from the device drop-down.

+ +

When you click in the preview image, the layout editor highlights the corresponding +section in the XML, and vice-versa.

+ +

Interactive error detection and recovery

+ +

As you edit the Text view of your layout XML file, Android Studio flags +typos and offers assistance.

+ +

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:

+ + + +

Figure 2. Flagging errors.

+ +

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:

+ + + +

Figure 3. Supplying missing information

+ +

Picking a theme

+ +

To pick a theme for your app, click the Theme icon +. +

+ +

This displays the Select Theme 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.

+ + + +

Figure 4. Specifying a theme.

+ +

Localization

+ +

Android Studio provides built-in localization support. When you click the +localization icon +, +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.

+ +

See Supporting +Different Languages for a description of how to support different locales in your app.

+

For example, here is a preview of a "Hello World" app for the + +locale:

+ + +

Figure 5. Previewing locales.

+ +

Editing in the Design View

+ +

You can switch to the graphical editor by clicking Design at the +bottom of the window. While editing in the Design view, you can show and +hide the widgets available to drag-and-drop by clicking Palette on the +left side of the window. Clicking Designer 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.

+ +

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:

+ + + +

Figure 6. Using the grid layout to place a widget.

+ +

Within the graphical editor, you can rearrange your app's UI by dragging widgets to +the desired location.

+ +

Taking a snapshot

+ +

When you run your app on a connected device, you can take a snapshot of it by clicking +the camera icon + +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 +Frame Screenshot 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.

+ +

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.

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
  • Tips and Tricks
    • - +
  • + Using the Layout Editor
    • +
  • Exploring the SDK
    • -- cgit v1.1