From af4469e1272f3b2bdddc08f5cd8cbe47700dba0b Mon Sep 17 00:00:00 2001 From: David Friedman Date: Tue, 17 Nov 2015 12:22:13 -0800 Subject: [PATCH] Docs: Help page for Theme Editor, introduced in Android Studio 1.5 Bug: 25391360 Change-Id: I76182313e6ccae9d4f2bc7a70916f2a5d3441a21 --- docs/html/tools/help/theme-editor.jd | 166 +++++++++++++++++++++++++++ docs/html/tools/tools_toc.cs | 2 + 2 files changed, 168 insertions(+) create mode 100644 docs/html/tools/help/theme-editor.jd diff --git a/docs/html/tools/help/theme-editor.jd b/docs/html/tools/help/theme-editor.jd new file mode 100644 index 0000000000000..653f3033c76fe --- /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 + +
+
+

In this document

+
    +
  1. Theme Editor Basics
    2. +
  2. Themes and Colors
    3. +
  3. Device-Specific Configurations
    4. +
+ + +

Dependencies and Prerequisites

+
    +
  • Android Studio 1.4.1 or higher
    • +
+ +
+
+ +

+The Theme Editor is a visual assistant that helps you: +

+
  • Create and modify + +themes for your app.
    • +
  • Adjust themes for different resource classifiers.
    • +
  • Visualize the effect of color changes on common UI elements.
    • + +

    +This page introduces the fundamental tasks that you can perform with the Theme +Editor, and explains how to do so. +

    + + +

    Theme Editor Basics

    + +

    +This section describes how to access the Theme Editor, and how it is laid out. +

    + +

    Accessing the Theme Editor

    + +

    There are two ways to open the Theme Editor:

    + +
  • From an open {@code styles.xml} file, click Open editor near the top-right +of the file window.
    • + +
  • From the Tools menu, select Android > +Theme Editor.

    + +

    Navigating the Theme Editor

    +

    +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 Theme parent and +colorPrimary, that comprise the current theme. You can modify design +themes by changing these resource settings. +

    + +

    Themes and Colors

    + +

    +The Theme Editor allows you to create new themes, modify existing ones, and manage the +colors that make up the themes. +

    + +

    Creating New Themes

    + +

    +To create a theme, follow these steps: +

    +
      +
    1. Open the Theme dropdown menu near the top of the right +side of the Theme Editor.
      2. +
    2. Select Create New Theme. The New Theme dialog appears.
      3. +
    3. Enter a name for the new theme.
      4. +
    4. In the Parent theme name: field, select the parent from which the theme + inherits initial resources.
      5. +
    + +

    Renaming Themes

    + +

    +To rename a theme, perform the following steps: +

    +
      +
    1. Open the Theme dropdown menu near the top of the right +side of the Theme Editor.
      2. +
    2. Select Rename AppTheme. The Rename dialog appears.
      3. +
    3. Enter a new name for the theme.
      4. +
    4. (optional) To see how the changes will look, click Preview.
      5. +
    5. To apply the changes, click Refactor.
      6. +
    + +

    Changing Color Resources

    + +

    To change an existing color resource, such as colorPrimary, +follow these steps: +

    +
      +
    1. Click anywhere in the field containing the resource. The Resources dialog +appears, containing a color picker, material-color palette, and other settings and +information.
      2. +
    2. Change the color, opacity, and name of a theme's resources as desired.

      +
    3. To ensure that your theme uses a color from the material +palette, click CLOSEST MATERIAL COLOR, located next to Custom +color. Android Studio changes the color you picked to the material color most like it, +and replaces Custom color with the name of the color from the material palette.
      4. +
    + +

    You can also directly select colors from the material palette, which the editor displays +as two rows of colored squares beneath the color picker.

    + +

    Viewing State Lists and Colors

    + +

    +The Theme Editor allows you to preview + +colors associated with different states. To do so, open the Resource dialog, and click +the State List tab that appears at the top of the dialog.

    + +

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

    + +

    Device-Specific Configurations

    + +

    +You can choose + +device-specific configurations for your app to support. Perform +the following steps to do so: +

    + +
      +
    1. Click the triangle next to Location, near the bottom of the +Resources dialog. The Location 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.
      2. +
    2. If necessary, change the XML file name.
      3. +
    3. 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.
      4. +
    + +

    For more information about the relationship +between directory names and configurations, see + +Supporting Multiple Screens. For more information about +supported directory names, see + +Providing Resources. +

    + + diff --git a/docs/html/tools/tools_toc.cs b/docs/html/tools/tools_toc.cs index d183f42bb3a1a..b7595ce811f0e 100644 --- a/docs/html/tools/tools_toc.cs +++ b/docs/html/tools/tools_toc.cs @@ -174,10 +174,12 @@ class="en">Tools Help
  • ProGuard
  • SDK Manager
  • Systrace
    • +
  • Theme Editor
  • Tracer for OpenGL ES
  • Traceview
  • Vector Asset Studio
  • zipalign
    • +