Docs: Help page for Theme Editor, introduced in Android Studio 1.5

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> &gt;

<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>

       <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>