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 0000000000000..419a88dd8ed94 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 0000000000000..8865f548a2c44 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 0000000000000..aec3bcee279f3 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 0000000000000..9252ca1ed5f7c 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 0000000000000..775fa5ee6a9df 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 0000000000000..41b933aa89da3 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 0000000000000..d35568f2b4965 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 0000000000000..716b8d75f0c62 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 0000000000000..59c764470d2a3 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 0000000000000..1011e087881a0 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 0000000000000..beade0d9e3d59 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 0000000000000..0e5fdf095fdf7 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 0000000000000..f0e5d59a4d4a5 --- /dev/null +++ b/docs/html/sdk/installing/studio-layout.jd @@ -0,0 +1,148 @@ +page.title=Using the Layout Editor + +@jd:body + +
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.
+ +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.
+ +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.
+ +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
+ +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.
+ +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.
+ +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.
+ +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 a8424e62e10fd..382165c30e35a 100644 --- a/docs/html/tools/tools_toc.cs +++ b/docs/html/tools/tools_toc.cs @@ -34,7 +34,9 @@ Migrating from Eclipse