Merge "Docs: Help page for Theme Editor, introduced in Android Studio 1.5" into mnc-docs
diff --git a/docs/html/tools/help/theme-editor.jd b/docs/html/tools/help/theme-editor.jd
new file mode 100644
index 0000000..653f303
--- /dev/null
+++ b/docs/html/tools/help/theme-editor.jd
@@ -0,0 +1,166 @@
+page.title=Theme Editor
+parent.title=Tools
+parent.link=index.html
+page.tags=theme
+@jd:body
+
+<div id="qv-wrapper">
+<div id="qv">
+ <h2>In this document</h2>
+<ol>
+ <li><a href="#basics">Theme Editor Basics</a></li>
+ <li><a href="#themes">Themes and Colors</a></li>
+ <li><a href="#device">Device-Specific Configurations</a></li>
+</ol>
+
+
+ <h2>Dependencies and Prerequisites</h2>
+ <ul>
+ <li>Android Studio 1.4.1 or higher</li>
+ </ul>
+
+</div>
+</div>
+
+<p>
+The Theme Editor is a visual assistant that helps you:
+</p>
+ <li>Create and modify
+<a href="{@docRoot}guide/topics/ui/themes.html">
+themes</a> for your app.</li>
+ <li>Adjust themes for different resource classifiers.</li>
+ <li>Visualize the effect of color changes on common UI elements.</li>
+
+<p>
+This page introduces the fundamental tasks that you can perform with the Theme
+Editor, and explains how to do so.
+</p>
+
+
+<h2 id="basics">Theme Editor Basics</h2>
+
+<p>
+This section describes how to access the Theme Editor, and how it is laid out.
+</p>
+
+<h3>Accessing the Theme Editor</h3>
+
+<p>There are two ways to open the Theme Editor:</p>
+
+<li>From an open {@code styles.xml} file, click <strong>Open editor</strong> near the top-right
+of the file window.</li>
+
+<li>From the <strong>Tools</strong> menu, select <strong>Android</strong> >
+<strong>Theme Editor</strong>.</p>
+
+<h3 id="layout">Navigating the Theme Editor</h3>
+<p>
+The Theme Editor's main screen is divided into two sections. The left side of the editor
+shows what specific UI elements, such as the app bar or a raised button, look like
+when you apply the current theme to them. The right side of the editor displays
+the settings for the color resources, such as <strong>Theme parent</strong> and
+<strong>colorPrimary</strong>, that comprise the current theme. You can modify design
+themes by changing these resource settings.
+</p>
+
+<h2 id="themes">Themes and Colors</h2>
+
+<p>
+The Theme Editor allows you to create new themes, modify existing ones, and manage the
+colors that make up the themes.
+</p>
+
+<h3 id="create">Creating New Themes</h3>
+
+<p>
+To create a theme, follow these steps:
+</p>
+ <ol>
+ <li>Open the <strong>Theme</strong> dropdown menu near the top of the right
+side of the Theme Editor.</li>
+ <li>Select <strong>Create New Theme</strong>. The <em>New Theme</em> dialog appears.</li>
+ <li>Enter a name for the new theme.</li>
+ <li>In the <em>Parent theme name:</em> field, select the parent from which the theme
+ inherits initial resources.</li>
+ </ol>
+
+<h3 id="rename">Renaming Themes</h3>
+
+<p>
+To rename a theme, perform the following steps:
+</p>
+ <ol>
+ <li>Open the <strong>Theme</strong> dropdown menu near the top of the right
+side of the Theme Editor.</li>
+ <li>Select <strong>Rename AppTheme</strong>. The <em>Rename</em> dialog appears.</li>
+ <li>Enter a new name for the theme.</li>
+ <li>(optional) To see how the changes will look, click <strong>Preview</strong>.</li>
+ <li>To apply the changes, click <strong>Refactor</strong>.</li>
+ </ol>
+
+<h3 id="changing">Changing Color Resources</h3>
+
+<p>To change an existing color resource, such as <strong>colorPrimary</strong>,
+follow these steps:
+</p>
+<ol>
+<li>Click anywhere in the field containing the resource. The <em>Resources</em> dialog
+appears, containing a color picker, material-color palette, and other settings and
+information.</li>
+<li>Change the color, opacity, and name of a theme's resources as desired.</p>
+<li>To ensure that your theme uses a color from the material
+palette, click <strong>CLOSEST MATERIAL COLOR</strong>, located next to <em>Custom
+color</em>. Android Studio changes the color you picked to the material color most like it,
+and replaces <em>Custom color</em> with the name of the color from the material palette.</li>
+</ol>
+
+<p>You can also directly select colors from the material palette, which the editor displays
+as two rows of colored squares beneath the color picker.</p>
+
+<h3 id="viewing">Viewing State Lists and Colors</h3>
+
+<p>
+The Theme Editor allows you to preview
+<a href="{@docRoot}guide/topics/resources/color-list-resource.html">
+colors associated with different states.</a> To do so, open the <em>Resource</em> dialog, and click
+the <em>State List</em> tab that appears at the top of the dialog.</p>
+
+<p>
+To more fully control the states themselves, you can directly view and edit their
+properties in the XML file,
+such as {@code colors.xml}, that defines them. For more information, see the
+documentation for the {@link android.content.res.ColorStateList} class.
+</p>
+
+<h2 id="device">Device-Specific Configurations</h2>
+
+<p>
+You can choose
+<a href="{@docRoot}guide/topics/resources/providing-resources.html#Compatibility">
+device-specific</a> configurations for your app to support. Perform
+the following steps to do so:
+</p>
+
+<ol>
+<li>Click the triangle next to <em>Location</em>, near the bottom of the <a href="#changing">
+<em>Resources</em></a> dialog. The <em>Location</em> section expands, revealing
+the name of the XML file containing the
+resource, as well as a list of configuration-specific directories in which to
+place that file.</li>
+<li>If necessary, change the XML file name.</li>
+<li>Check the boxes next to the directories corresponding to the
+device-specific configurations you wish to support. Any configuration
+for which you do not specify a directory defaults to using the
+{@code values} directory.</li>
+</ol>
+
+<p>For more information about the relationship
+between directory names and configurations, see
+<a href="{@docRoot}guide/practices/screens_support.html#ConfigurationExamples">
+Supporting Multiple Screens</a>. For more information about
+supported directory names, see
+<a href="{@docRoot}guide/topics/resources/providing-resources.html#ResourceTypes">
+Providing Resources</a>.
+</p>
+
+
diff --git a/docs/html/tools/tools_toc.cs b/docs/html/tools/tools_toc.cs
index d183f42..b7595ce 100644
--- a/docs/html/tools/tools_toc.cs
+++ b/docs/html/tools/tools_toc.cs
@@ -174,10 +174,12 @@
<li><a href="<?cs var:toroot ?>tools/help/proguard.html" zh-cn-lang="ProGuard">ProGuard</a></li>
<li><a href="<?cs var:toroot ?>tools/help/sdk-manager.html">SDK Manager</a></li>
<li><a href="<?cs var:toroot ?>tools/help/systrace.html">Systrace</a></li>
+ <li><a href="<?cs var:toroot ?>tools/help/theme-editor.html">Theme Editor</a></li>
<li><a href="<?cs var:toroot ?>tools/help/gltracer.html">Tracer for OpenGL ES</a></li>
<li><a href="<?cs var:toroot ?>tools/help/traceview.html">Traceview</a></li>
<li><a href="<?cs var:toroot ?>tools/help/vector-asset-studio.html">Vector Asset Studio</a></li>
<li><a href="<?cs var:toroot ?>tools/help/zipalign.html">zipalign</a></li>
+
</ul>
</li>