Skip to content

Most visited

Recently visited

navigation

Design App Themes with Theme Editor

Android Studio includes a visual assistant called Theme Editor 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 styles XML file, such as styles.xml, click Open editor near the top-right of the file window.
  • From the Tools menu, click 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 name of the current theme being previewed, the module where the theme is defined, and the settings for theme resources, such as Theme parent and colorPrimary. 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. Click Create New Theme.
    3. In the New Theme dialog, enter a name for the new theme.
    4. In the Parent theme name list, click on the parent from which the theme inherits initial resources.

    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. Click Rename theme-name.
    3. In the Rename dialog, enter a new name for the theme.
    4. (optional) To see how the changes will look, click Preview.
    5. To apply the changes, click Refactor.

    Changing Color Resources

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

    1. Click the colored square next to the name of the resource you want to change. The Resources dialog appears, which displays a list of colors on the left side, and settings and information for the currently selected resource color on the right.
    2. Set a color for the theme resource by doing one of the following:
      • Select a material palette color from the list of colors.
      • Select a color defined in your project from the list of colors, and optionally modify the color value, opacity, and name as desired.
      • Define a new color in your project by clicking New Resource > New color Value from the drop-down menu in the lower left of the Resources dialog, and specify the color value, opacity, and name.
    3. If you've created or modified a custom project color, you can ensure that the color matches the closest material palette color by clicking CLOSEST MATERIAL COLOR, located next to Custom color. Android Studio changes the color and opacity values of 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.

    Viewing State Lists and Colors

    The Theme Editor allows you to preview colors associated with different states. To do so, open the Resources dialog by clicking on the color set square next to the name of an editable state list resource. The Resources dialog displays a list of states, such as Selected, and the color value associated with the state. Click the color for a state to choose a different color value.

    To more fully control the states themselves, you can directly view and edit their properties in the XML file that defines them. For more information, see the documentation for the 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 Device Configuration, near the bottom of the Resources dialog. The Device Configuration section expands, revealing the source set and name of the XML file containing the resource, as well as a list of configuration-specific directories in which to place that file.
    2. If necessary, change the XML file name.
    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 values directory.

    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.

  • This site uses cookies to store your preferences for site-specific language and display options.

    Hooray!

    This class requires API level or higher

    This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

    For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

    Take a one-minute survey?
    Help us improve Android tools and documentation.