android_frameworks_base/docs/html/tools/help/theme-editor.jd

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 the colored square next to the name of the resource you want to change.
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>