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:

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:

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. In the Theme Editor, click the colored square next to the name of the resource you want to change. The Resources dialog appears, which displays a list of color groups 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 either selecting a color from the left panel, or by defining a new color, as described below.

Select a color

The colors are listed in the left column of the Resources dialog and arranged into the following groups.

Define a new color

  1. From the drop-down menu in the top-right of the Resources dialog, click Add new resource > New color Value. The Resources dialog displays an editable right pane with a blank Name field so you can enter a name for your custom color.

    Figure 1. The Color editor

  2. Create the custom color as follows. The steps correspond to the callouts in figure 1.
    1. Type a name for your new color value in the empty Name field. No spaces or special characters allowed in the name. Underscores and numbers are okay.
    2. Color scale, Custom color field, and dropper:
      • On the color scale, click the color you want. The color displays in the Custom color field.
      • You can use the dropper to the left of the Custom color field to select a color. Click the dropper , and then click something visible anywhere on your computer screen. The color in the Custom color field changes to the color you selected.
    3. Just below the Custom color field, use the editable fields and drop-down menu on the left to specify an RGB, HSB, or ARGB color by numeric values. The HEX equivalent of your color displays in the editable field to the far right.
    4. To set the color opacity and hue, move the sliders below the color scale.
    5. Select one of the available predefined color squares. The color displays in the Custom Color field and the name changes to the name of the color you selected.
  3. Click OK to save your settings. The Resources dialog closes and returns you to the Theme Editor.

Modify a color

You can modify any editable color. If a color is editable, you see editable color, hue, opacity, name field, and device configuration fields. See Select Color if you want to know why some fields are editable and others are not.

  1. Adjust the settings.
  2. Click OK.

Match material color

If you have defined 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.

Note: The CLOSEST MATERIAL COLOR feature is visible only when the color is not already a material color.

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

When a color is editable, you can choose device-specific configurations for your app to support. Perform the following steps to do so:

  1. Open the Resources dialog. For information about how to open the Resources dialog, see Changing color resources.
  2. Select a Project color, and then in the bottom of the right pane, click to expand Device Configuration, revealing the source set and name of the XML file containing the resource, and a list of configuration-specific directories in which to place that file.
  3. If necessary, change the XML file name.
  4. 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.